npm - @nanoporetech-digital/components - Versions diffs - 3.5.1 → 3.7.0 - Mend

@nanoporetech-digital/components 3.5.1 → 3.7.0

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

Files changed (226) hide show

package/dist/nano-components/{p-d1c8eca4.entry.js → p-b55ffa92.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,w as s,h as e,a as n,g as o}from"./p-1fe12320.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-9746b0a5.js";import{g as r}from"./p-845ae77e.js";import{g as l}from"./p-b933f3c8.js";const c=":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);-webkit-clip-path:inset(50%);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}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const f=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.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-z0-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}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}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)}}))}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}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(this.input instanceof HTMLElement){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('[slot="internal-opts"]');s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));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 i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}i.removeEventListener("change",this.inputChange);i.removeEventListener("click",this.inputClick);i.removeEventListener("keydown",this.inputKeydown);i.removeEventListener("input",this.inputChange);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.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)||d(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 i=this.connectedInput?.value||"";const e=[];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,i)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;e.push(s.id)}));this.optionIds=e}))}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)}isSelected(t,i){if(i===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 i;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));i=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];i=this.nanoSelect.emit(t)}if(!i.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}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}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}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)}render(){return e(n,{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},e("nano-dropdown",{...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},e("nano-menu",{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},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}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"]}}};f.style=c;const u=":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-width: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=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.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 i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].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 i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}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 i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(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((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}render(){return e(n,null,e("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1},e("slot",null)))}get el(){return o(this)}};g.style=u;const m=":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;width: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}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}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 r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{f as nano_datalist,g as nano_menu,v as nano_option};
-//# sourceMappingURL=p-d1c8eca4.entry.js.map
+import{r as t,c as i,w as s,h as e,a as n,g as o}from"./p-1fe12320.js";import{g as a}from"./p-74a7fc4f.js";import{d as h}from"./p-9746b0a5.js";import{g as r}from"./p-845ae77e.js";import{g as l}from"./p-b933f3c8.js";const c=":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);-webkit-clip-path:inset(50%);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}";function d(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let p=0;const f=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${p++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this._dropDownConfig={skidding:-1};this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.handleHide=()=>{this.open=false;const t=a();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.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-z0-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}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const s=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||s.includes(t.key))){this.connectedInput.focus()}};this.actvOptEles=[];this.connectedInput=undefined;this.inputLabel=undefined;this.hasNoResult=undefined;this.shouldOpen=undefined;this.canOpen=true;this.optionIds=[];this.selected=[];this.options=[];this.input=undefined;this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.inputChange=h(this.inputChange.bind(this),50)}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)}}))}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}get activeOptions(){return this.allOptEles}openWatcher(){s((()=>{this.nanoDropdown.open=this.open;this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}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(this.input instanceof HTMLElement){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('[slot="internal-opts"]');s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const s=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(s);return s}}));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 i="both";let s=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":i="list";s=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=s}manageInputEvents(t,i){if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}i.removeEventListener("change",this.inputChange);i.removeEventListener("click",this.inputClick);i.removeEventListener("keydown",this.inputKeydown);i.removeEventListener("input",this.inputChange);this.inputLabel=null;s((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.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)||d(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 i=this.connectedInput?.value||"";const e=[];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,i)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;e.push(s.id)}));this.optionIds=e}))}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)}isSelected(t,i){if(i===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 i;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));i=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];i=this.nanoSelect.emit(t)}if(!i.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}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}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let s=false;const e=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;s=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||s){e.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){e.push(t)}}));this.isFiltered=i.length&&!s;this.actvOptEles=e}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)}render(){return e(n,{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},e("nano-dropdown",{...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"},e("nano-menu",{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,role:"list"},e("slot",{name:"list-top"}),!this.options.length&&e("slot",null),!!this.options.length&&e("slot",{name:"internal-opts"}),e("slot",{name:"list-bottom"})),e("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},e("slot",{name:"no-result"})),!!this.actvOptEles&&e("div",{class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}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"]}}};f.style=c;const u=":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-width: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=class{constructor(s){t(this,s);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const s=i.closest("nano-nav-item");if(s&&!s.disabled){this.nanoSelect.emit(s)}};this.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 i=this.getItems;const s=this.activeItem;let e=i.indexOf(s);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){e++}else if(t.key==="ArrowUp"){e--}else if(t.key==="Home"||t.key==="PageUp"){e=0}else if(t.key==="End"||t.key==="PageDown"){e=i.length-1}if(e<0)e=i.length-1;if(e>i.length-1)e=0;this.setActiveFocusItem(i[e]);if(i[e])i[e].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 i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const s=l(i).toLowerCase().trim();if(s.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const s=i.closest("nano-nav-item")||i.closest("nano-option");if(s&&!this.ignoreMouseEvents){this.setActiveFocusItem(s)}};this.type="menu";this.label=undefined}get hasFocus(){return this._hasFocus}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 i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const s=i[i.length-1];t=Array.from(s.querySelectorAll("nano-nav-item, nano-option"))}else{t=r(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((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const s=this.getItems;const e=!t||t.disabled?s.find((t=>t.selected))||s[0]:t;s.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===e?"0":"-1")));if(!i)return;if(e){e.setFocus?e.setFocus():e.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let s;if(i.key){if(i.key!=="Tab")return;s=a()&&a().closest(this.el.tagName.toLowerCase())===this.el}else s=!!t.composedPath().find((t=>t===this.el));if(!s){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}componentDidLoad(){{r(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return e(n,{role:this.type==="menu"?"menu":"group"},e("div",{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"},e("slot",null)))}get el(){return o(this)}};g.style=u;const m=":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;width: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}";let b=0;const v=class{constructor(s){t(this,s);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${b++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=h(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}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 r(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return e(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},e("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},e("div",{part:"check-icon",class:"option__check"},e("slot",{name:"check-icon"},e("nano-icon",{name:"light/check","aria-hidden":"true"}))),e("div",{part:"start",class:"option__start"},e("slot",{name:"start"})),e("div",{part:"label",class:"option__label"},e("slot",null,this.label||this.value)),e("div",{part:"end",class:"option__end"},e("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};v.style=m;export{f as nano_datalist,g as nano_menu,v as nano_option};
+//# sourceMappingURL=p-b55ffa92.entry.js.map

package/dist/nano-components/p-b55ffa92.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"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"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","[object Object]","hostRef","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","_dropDownConfig","skidding","optSelected","e","stopPropagation","changeInputValue","detail","requestAnimationFrame","inputChange","type","shouldOpen","handleShow","async","listBox","setFocus","showActiveElement","handleHide","open","activeElement","getActiveElement","host","tagName","toLowerCase","connectedInput","select","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","preventDefault","optionKeyDown","focus","deleteKeys","exactMatch","debounce","bind","allOptEles","opts","value","forEach","opt","selected","dropDownConfig","ddc","activeOptions","writeTask","nanoDropdown","setAttribute","toString","nanoInput","getInputElement","input","HTMLElement","options","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","previousOptions","querySelectorAll","internalOpt","remove","flatMap","option","i","label","Object","assign","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","actvOptEles","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","c","val","optIds","hidden","isSelected","push","optionIds","hasNoResult","canOpen","disabled","openWatcher","nanoOptionsUpdated","emit","dropwdownOpen","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","substring","foundEle","trim","filterMeta","Array","from","disableFilter","valStr","activeEles","indexOf","watchInputChange","manageSlotChangeListener","console","warn","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","dlist__menu","dlist__menu--open","tabIndex","onNanoSelect","onKeyDown","name","menuCss","Menu","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","scrollIntoView","block","shadowRoot","getTextContent","handleMouseOver","hasFocus","menu","preventScroll","blur","map","opened","ctx","getDirectChildren","getAttribute","classList","contains","kev","found","composedPath","resetActiveItem","nanoBlur","onClick","onMouseOver","onFocus","part","menu--has-focus","optionCss","Option","optId","labelContent","valueChanged","labelChanged","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$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($colors, palegrey)};\n */\n\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --padding-start: #{$spacing-xlarge};\n --padding-end: #{$spacing-xlarge};\n --font-size: 0.8em;\n --color: #{map.get($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 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, OptionInterface } from '../../interface';\nimport type { Dropdown } from '../dropdown/dropdown';\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 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 (this.input instanceof HTMLElement) {\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(\n '[slot=\"internal-opts\"]'\n );\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 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 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 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-z0-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 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 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 role=\"list\"\n >\n <slot name=\"list-top\" />\n {!this.options.length && <slot />}\n {!!this.options.length && <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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\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($colors, blue--faded)};\n * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($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: #{$spacing-medium};\n --padding-end: #{$spacing-medium};\n --padding-top: #{$spacing-small};\n --padding-bottom: #{$spacing-small};\n --secondary-padding-top: 0;\n --secondary-padding-bottom: 0;\n --bg-color-hover: #{map.get($colors, blue--faded)};\n --bg-color-focus: #{map.get($colors, blue--faded)};\n --bg-color-selected: #{map.get($colors, blue--faded)};\n --color-hover: #{map.get($colors, blue)};\n --color-selected: #{map.get($colors, blue)};\n --color-focus: #{map.get($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-width: 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(\n this.el,\n 'nano-nav-item, nano-option',\n 'slot'\n ) as ValidElement[];\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 =\n !item || item.disabled ? 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 (activeItem as NNI).setFocus\n ? (activeItem as NNI).setFocus()\n : 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 // 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 = item.shadowRoot.querySelector(\n 'slot:not([name])'\n ) as HTMLSlotElement;\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 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --padding-top: Defaults to #{$spacing-small};\n * @prop --padding-bottom: Defaults to #{$spacing-small};\n * @prop --padding-start: Defaults to #{$spacing-small};\n * @prop --padding-end: Defaults to #{$spacing-small};\n\n * @prop --bg: default background. Defaults to none;\n * @prop --bg-selected: background when selected. Defaults to #{$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, #{$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($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: #{$select-opt-selected};\n --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n --bg-disabled: none;\n --color: var(--input-text-color, #{$input-text-color});\n --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --color-disabled: #{map.get($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 width: 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 '../../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.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"]}

package/dist/nano-components/{p-fb12a45d.entry.js → p-ba9cd047.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-export{T as nano_table}from"./p-8fc2a38d.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";
-//# sourceMappingURL=p-fb12a45d.entry.js.map
+export{T as nano_table}from"./p-d26b97d1.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";
+//# sourceMappingURL=p-ba9cd047.entry.js.map

package/dist/nano-components/{p-fb12a45d.entry.js.map → p-ba9cd047.entry.js.map} RENAMED Viewed

File without changes

package/dist/nano-components/p-cc5e7acb.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,d as s,h as e,a as n,g as r}from"./p-1fe12320.js";const h=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=i(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=i(this,"nanoResizeContentFitChange",7);this.isReady=false;this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;s((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((s=>{let e;if(s==="h")e=this.currentHeight;else e=this.currentWidth;this.appliedStates[s].forEach(((n,r)=>{if(e>=r&&n.applied===false){n.applied=true;t[s].set(r,n);i=true}else if(e<r&&n.applied===true){n.applied=false;t[s].set(r,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.contentFitX=null;this.contentFitY=null;this.notifyContentFit=undefined;this.states=undefined}classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[s,...e]=i.split(" ");const{bp:n,dir:r}=t(s);this.appliedStates[r].set(n,{states:e,applied:false})}else{const{bp:s,dir:e}=t(i);this.appliedStates[e].set(s,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const i=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;i(t)}));return i(t)};let i=false;const s=t(this.host.firstElementChild);if(s){if(this.notifyContentFit?.includes("x")){if(this.currentWidth<s.scrollWidth&&this.contentFitX!==false){i=true;this.contentFitX=false}else if(this.currentWidth>=s.scrollWidth&&this.contentFitX!==true){i=true;this.contentFitX=true}}if(this.notifyContentFit?.includes("y")){if(this.currentHeight<s.scrollHeight&&this.contentFitY!==false){i=true;this.contentFitY=false}else if(this.currentHeight>=s.scrollHeight&&this.contentFitY!==true){i=true;this.contentFitY=true}}if(i){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}applyChanges(t){if(!this.states)return;let i=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{if(!t.states)return;t.states.map((s=>{if(t.applied){i.push(s);i=i.filter((t=>t!=="not-"+s))}else{i.push("not-"+s);i=i.filter((t=>t!==s))}}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((s=>{t[s].forEach(((t,e)=>{i[e+s]=t.applied}))}));return i}attachRO(){this.ro=new ResizeObserver((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}));this.ro.observe(this.host)}componentWillLoad(){this.classNames=Array.from(this.host.classList);if(!this.currentWidth||!this.currentHeight){s((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(i)}))}this.statesChanged();this.applyChanges(this.appliedStates)}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return e(n,null,e("slot",null),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[!!this.contentFitX?e("slot",{name:"content-fit-x"}):e("slot",{name:"content-nofit-x"}),!!this.contentFitY?e("slot",{name:"content-fit-y"}):e("slot",{name:"content-nofit-y"})])}get host(){return r(this)}static get watchers(){return{classNames:["classNameChange"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style="nano-resize-observe { display: block }";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";const o=class{constructor(i){t(this,i);this.animated=true}render(){return e("div",{class:{skeleton:true,animate:this.animated}},e("div",{class:"skeleton__indicator"}," "))}};o.style=a;export{h as nano_resize_observe,o as nano_skeleton};
+//# sourceMappingURL=p-cc5e7acb.entry.js.map

package/dist/nano-components/p-cc5e7acb.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","[object Object]","host","className","join","nanoResizeObserverReady","emit","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","observe","classList","statesChanged","attachRO","disconnect","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"mappings":";;;6EAqCaA,EAAa,oOAGhBC,KAAAC,QAAU,MAoIVD,KAAAE,cAAgB,KACtB,IAAKF,KAAKG,eAAiBH,KAAKI,cAAe,OAC/CC,GAAS,IAAML,KAAKM,oBAEpB,IAAKN,KAAKO,SAAWP,KAAKQ,cAAe,OAEzC,MAAMC,EAA2B,CAAEC,EAAG,IAAIC,IAAOC,EAAG,IAAID,KACxD,IAAIE,EAAa,MAEjBC,OAAOC,KAAKf,KAAKQ,eAAeQ,SAASC,IACvC,IAAIC,EACJ,GAAID,IAAY,IAAKC,EAAMlB,KAAKI,mBAC3Bc,EAAMlB,KAAKG,aAEhBH,KAAKQ,cAAcS,GAASD,SAC1B,CAACG,EAA4BC,KAC3B,GAAIF,GAAOE,GAAMD,EAAME,UAAY,MAAO,CACxCF,EAAME,QAAU,KAChBZ,EAAcQ,GAASK,IAAIF,EAAID,GAC/BN,EAAa,UACR,GAAIK,EAAME,GAAMD,EAAME,UAAY,KAAM,CAC7CF,EAAME,QAAU,MAChBZ,EAAcQ,GAASK,IAAIF,EAAID,GAC/BN,EAAa,YAKrB,GAAIA,EAAYb,KAAKuB,aAAad,QAC7B,IAAKT,KAAKwB,WAAWC,SAAS,YACjCzB,KAAKwB,WAAa,CAAC,sFA7JS,oBACT,sBACA,2DAGvBE,kBACE1B,KAAK2B,KAAKC,UAAY5B,KAAKwB,WAAWK,KAAK,KAC3C,IAAK7B,KAAKC,SAAWD,KAAKwB,WAAWC,SAAS,YAAa,CACzDzB,KAAKC,QAAU,KACfD,KAAK8B,wBAAwBC,QA2BjCL,mBACE1B,KAAKE,gBAIPwB,gBACE,IAAK1B,KAAKO,OAAQ,OAElB,MAAMyB,EAAWC,IACf,MAAMC,EAAWD,EAAME,MAAM,SAASC,QAAQC,GAAOA,EAAGC,SACxD,MAAO,CAAElB,GAAImB,SAASL,EAAS,IAAKM,IAAKN,EAAS,KAEpDlC,KAAKQ,cAAgB,CAAEE,EAAG,IAAIC,IAAOC,EAAG,IAAID,KAG5CX,KAAKO,OAAO4B,MAAM,KAAKM,KAAKC,IAC1BA,EAAKA,EAAGC,OACR,GAAID,EAAGjB,SAAS,KAAM,CACpB,MAAOmB,KAAQC,GAAWH,EAAGP,MAAM,KACnC,MAAMf,GAAEA,EAAEoB,IAAEA,GAAQR,EAAQY,GAC5B5C,KAAKQ,cAAcgC,GAAwBlB,IAAIF,EAAI,CACjDb,OAAQsC,EACRxB,QAAS,YAEN,CACL,MAAMD,GAAEA,EAAEoB,IAAEA,GAAQR,EAAQU,GAC5B1C,KAAKQ,cAAcgC,GAAwBlB,IAAIF,EAAI,CAAEC,QAAS,YAK5DK,kBACN,IAAK1B,KAAK8C,iBAAkB,OAE5B,MAAMC,EAAsBC,IAC1B,GAAIC,OAAOC,iBAAiBF,GAAKG,UAAY,WAAY,OAAOH,EAEhE,MAAMI,EAAWC,GACRC,MAAMC,KAAKF,EAAEG,UAAUC,MAAMC,IAClC,GAAIT,OAAOC,iBAAiBQ,GAAMP,UAAY,WAAY,OAAOO,EACjEN,EAAQM,MAGZ,OAAON,EAAQJ,IAGjB,IAAIW,EAAY,MAChB,MAAMC,EAAab,EAAmB/C,KAAK2B,KAAKkC,mBAEhD,GAAID,EAAY,CACd,GAAI5D,KAAK8C,kBAAkBrB,SAAS,KAAM,CACxC,GACEzB,KAAKG,aAAeyD,EAAWE,aAC/B9D,KAAK+D,cAAgB,MACrB,CACAJ,EAAY,KACZ3D,KAAK+D,YAAc,WACd,GACL/D,KAAKG,cAAgByD,EAAWE,aAChC9D,KAAK+D,cAAgB,KACrB,CACAJ,EAAY,KACZ3D,KAAK+D,YAAc,MAIvB,GAAI/D,KAAK8C,kBAAkBrB,SAAS,KAAM,CACxC,GACEzB,KAAKI,cAAgBwD,EAAWI,cAChChE,KAAKiE,cAAgB,MACrB,CACAN,EAAY,KACZ3D,KAAKiE,YAAc,WACd,GACLjE,KAAKI,eAAiBwD,EAAWI,cACjChE,KAAKiE,cAAgB,KACrB,CACAN,EAAY,KACZ3D,KAAKiE,YAAc,MAIvB,GAAIN,EAAW,CACb3D,KAAKkE,2BAA2BnC,KAAK,CACnCoC,EAAGnE,KAAK+D,YACRK,EAAGpE,KAAKiE,gBAuCRvC,aAAa2C,GACnB,IAAKrE,KAAKO,OAAQ,OAElB,IAAIiB,EAAa,IAAIxB,KAAKwB,YAC1BV,OAAOC,KAAKsD,GAASrD,SAASC,IAC5BoD,EAAQpD,GAASD,SAASG,IACxB,IAAKA,EAAMZ,OAAQ,OACnBY,EAAMZ,OAAOkC,KAAKC,IAChB,GAAIvB,EAAME,QAAS,CACjBG,EAAW8C,KAAK5B,GAChBlB,EAAaA,EAAWY,QAAQmC,GAAOA,IAAO,OAAS7B,QAClD,CACLlB,EAAW8C,KAAK,OAAS5B,GACzBlB,EAAaA,EAAWY,QAAQmC,GAAOA,IAAO7B,cAKtD1C,KAAKwB,WAAa,CAAC,cAAeA,GAClCxB,KAAKwE,sBAAsBzC,KAAK/B,KAAKyE,YAAYJ,IAG3C3C,YAAYgD,GAClB,MAAMC,EAAS,GACf7D,OAAOC,KAAK2D,GAAW1D,SAASC,IAC9ByD,EAAUzD,GAASD,SAAQ,CAACG,EAA4BC,KACtDuD,EAAOvD,EAAKH,GAAWE,EAAME,cAGjC,OAAOsD,EAGDjD,WACN1B,KAAK4E,GAAK,IAAIC,gBAAe,KAC3B,MAAMC,MAAEA,EAAKC,OAAEA,GAAW/E,KAAK2B,KAAKqD,wBACpChF,KAAKG,aAAe8E,KAAKC,KAAKJ,GAC9B9E,KAAKI,cAAgB6E,KAAKC,KAAKH,MAEjC/E,KAAK4E,GAAGO,QAAQnF,KAAK2B,MAGvBD,oBACE1B,KAAKwB,WAAa8B,MAAMC,KAAKvD,KAAK2B,KAAKyD,WAEvC,IAAKpF,KAAKG,eAAiBH,KAAKI,cAAe,CAC7CC,GAAS,KACP,MAAMyE,MAAEA,EAAKC,OAAEA,GAAW/E,KAAK2B,KAAKqD,wBACpChF,KAAKG,aAAe8E,KAAKC,KAAKJ,GAC9B9E,KAAKI,cAAgB6E,KAAKC,KAAKH,MAGnC/E,KAAKqF,gBAELrF,KAAKuB,aAAavB,KAAKQ,eAGzBkB,oBACE,IAAK1B,KAAK4E,GAAI5E,KAAKsF,WAGrB5D,uBACE,GAAI1B,KAAK4E,GAAI5E,KAAK4E,GAAGW,aAGvB7D,SACE,OACEhB,EAAC8E,EAAI,KACH9E,EAAA,OAAA,QACGV,KAAK8C,mBACL9C,KAAK+D,cAAgB,MAAQ/D,KAAKiE,cAAgB,OAAS,GACxDjE,KAAK+D,YACLrD,EAAA,OAAA,CAAM+E,KAAK,kBAEX/E,EAAA,OAAA,CAAM+E,KAAK,sBAEXzF,KAAKiE,YACLvD,EAAA,OAAA,CAAM+E,KAAK,kBAEX/E,EAAA,OAAA,CAAM+E,KAAK,8PC3RzB,MAAMC,EAAc,q3BCYPC,EAAQ,6CAEA,KAEnBjE,SACE,OACEhB,EAAA,MAAA,CACEkF,MAAO,CACLC,SAAU,KACVC,QAAS9F,KAAK+F,WAGhBrF,EAAA,MAAA,CAAKkF,MAAM,uBAAqB","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n tag: 'nano-resize-observe',\n styles: `nano-resize-observe { display: block }`,\n shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n private isReady = false;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n @State() contentFitX = null;\n @State() contentFitY = null;\n\n @Watch('classNames')\n classNameChange() {\n this.host.className = this.classNames.join(' ');\n if (!this.isReady && this.classNames.includes('is-ready')) {\n this.isReady = true;\n this.nanoResizeObserverReady.emit();\n }\n }\n\n /** Fire `nanoResizeContentFitChange` events notifying\n * whether content currently fits or does not on the x, y or both axis'.\n * Also makes the `content-fit-...` slots available */\n @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` */\n @Prop() states: string;\n\n /** A resize break point is switched on or off */\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n /** Fires after the initial loading and assessment */\n @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n /** Fires when the content either begins or stops to fit. Will only work when `notifyContentFit` is set. */\n @Event() nanoResizeContentFitChange!: EventEmitter<{\n x: boolean;\n y: boolean;\n }>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assesContentFit() {\n if (!this.notifyContentFit) return;\n\n const findNonContentsEle = (ele: Element) => {\n if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n const recurse = (e: Element): Element | null => {\n return Array.from(e.children).find((cEle: HTMLElement) => {\n if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n recurse(cEle);\n });\n };\n return recurse(ele);\n };\n\n let didChange = false;\n const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n if (measureEle) {\n if (this.notifyContentFit?.includes('x')) {\n if (\n this.currentWidth < measureEle.scrollWidth &&\n this.contentFitX !== false\n ) {\n didChange = true;\n this.contentFitX = false;\n } else if (\n this.currentWidth >= measureEle.scrollWidth &&\n this.contentFitX !== true\n ) {\n didChange = true;\n this.contentFitX = true;\n }\n }\n\n if (this.notifyContentFit?.includes('y')) {\n if (\n this.currentHeight < measureEle.scrollHeight &&\n this.contentFitY !== false\n ) {\n didChange = true;\n this.contentFitY = false;\n } else if (\n this.currentHeight >= measureEle.scrollHeight &&\n this.contentFitY !== true\n ) {\n didChange = true;\n this.contentFitY = true;\n }\n }\n\n if (didChange) {\n this.nanoResizeContentFitChange.emit({\n x: this.contentFitX,\n y: this.contentFitY,\n });\n }\n }\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n readTask(() => this.assesContentFit());\n\n if (!this.states || !this.appliedStates) return;\n\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n if (!this.states) return;\n\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) {\n classNames.push(st);\n classNames = classNames.filter((cl) => cl !== 'not-' + st);\n } else {\n classNames.push('not-' + st);\n classNames = classNames.filter((cl) => cl !== st);\n }\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n this.ro = new ResizeObserver(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n this.ro.observe(this.host);\n }\n\n componentWillLoad() {\n this.classNames = Array.from(this.host.classList);\n\n if (!this.currentWidth || !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = Math.ceil(width);\n this.currentHeight = Math.ceil(height);\n });\n }\n this.statesChanged();\n // set all class as 'not-' by deafult\n this.applyChanges(this.appliedStates);\n }\n\n connectedCallback() {\n if (!this.ro) this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host>\n <slot />\n {!!this.notifyContentFit &&\n (this.contentFitX !== null || this.contentFitY !== null) && [\n !!this.contentFitX ? (\n <slot name=\"content-fit-x\" />\n ) : (\n <slot name=\"content-nofit-x\" />\n ),\n !!this.contentFitY ? (\n <slot name=\"content-fit-y\" />\n ) : (\n <slot name=\"content-nofit-y\" />\n ),\n ]}\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n */\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n min-block-size: 1em;\n line-height: inherit;\n}\n\n.skeleton {\n display: flex;\n min-inline-size: 100%;\n min-block-size: 100%;\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /** When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\"> </div>\n </div>\n );\n }\n}\n"]}

package/dist/nano-components/p-cecb9af1.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+const n=/^(\d{4})-(\d{2})-(\d{2})/;var t;(function(n){n[n["Sunday"]=0]="Sunday";n[n["Monday"]=1]="Monday";n[n["Tuesday"]=2]="Tuesday";n[n["Wednesday"]=3]="Wednesday";n[n["Thursday"]=4]="Thursday";n[n["Friday"]=5]="Friday";n[n["Saturday"]=6]="Saturday"})(t||(t={}));function e(n,t,e){const r=parseInt(e,10);const u=parseInt(t,10);const s=parseInt(n,10);const a=Number.isInteger(s)&&Number.isInteger(u)&&Number.isInteger(r)&&u>0&&u<=12&&r>0&&r<=31&&s>0;if(a){return new Date(s,u-1,r)}return undefined}function r(t){if(!t)return undefined;const r=t.match(n);if(r){return e(r[1],r[2],r[3])}return undefined}function u(n){if(!n)return"";let t=n.getDate().toString(10);let e=(n.getMonth()+1).toString(10);const r=n.getFullYear().toString(10);if(n.getDate()<10){t=`0${t}`}if(n.getMonth()<9){e=`0${e}`}return`${r}-${e}-${t}`}function s(n,t){if(n==null||t==null)return false;return n.getFullYear()===t.getFullYear()&&n.getMonth()===t.getMonth()&&n.getDate()===t.getDate()}function a(n,t){const e=new Date(n);e.setDate(e.getDate()+t);return e}function o(n,e=t.Monday){const r=new Date(n);const u=r.getDay();const s=(u<e?7:0)+u-e;r.setDate(r.getDate()-s);return r}function c(n,e=t.Monday){const r=new Date(n);const u=r.getDay();const s=(u<e?-7:0)+6-(u-e);r.setDate(r.getDate()+s);return r}function i(n){return new Date(n.getFullYear(),n.getMonth(),1)}function f(n){return new Date(n.getFullYear(),n.getMonth()+1,0)}function d(n,t){const e=new Date(n);e.setMonth(t);return e}function D(n,t){const e=new Date(n);e.setFullYear(t);return e}function l(n,t,e){return w(n,t,e)===n}function w(n,t,e){const r=n.getTime();if(t&&t instanceof Date&&r<t.getTime()){return t}if(e&&e instanceof Date&&r>e.getTime()){return e}return n}function y(n,t){const e=[];let r=n;while(!s(r,t)){e.push(r);r=a(r,1)}e.push(r);return e}function p(n,e=t.Monday){const r=o(i(n),e);const u=c(f(n),e);return y(r,u)}export{t as D,u as a,l as b,e as c,a as d,c as e,d as f,p as g,i as h,s as i,f as j,w as k,D as l,r as p,o as s};
+//# sourceMappingURL=p-cecb9af1.js.map

package/dist/nano-components/p-cecb9af1.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/utils/date-utils.ts"],"names":["ISO_DATE_FORMAT","DaysOfWeek","createDate","year","month","day","dayInt","parseInt","monthInt","yearInt","isValid","Number","isInteger","Date","undefined","parseISODate","value","matches","match","printISODate","date","d","getDate","toString","m","getMonth","y","getFullYear","isEqual","a","b","addDays","days","setDate","startOfWeek","firstDayOfWeek","Monday","getDay","diff","endOfWeek","startOfMonth","endOfMonth","setMonth","setYear","setFullYear","inRange","min","max","dateClamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth"],"mappings":"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","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})/;\n\nexport enum DaysOfWeek {\n Sunday = 0,\n Monday = 1,\n Tuesday = 2,\n Wednesday = 3,\n Thursday = 4,\n Friday = 5,\n Saturday = 6,\n}\n\n/**\n * @param year\n * @param month\n * @param day\n * @returns a new Date object\n */\nexport function createDate(year: string, month: string, day: string): Date {\n const dayInt = parseInt(day, 10);\n const monthInt = parseInt(month, 10);\n const yearInt = parseInt(year, 10);\n\n const isValid =\n Number.isInteger(yearInt) && // all parts should be integers\n Number.isInteger(monthInt) &&\n Number.isInteger(dayInt) &&\n monthInt > 0 && // month must be 1-12\n monthInt <= 12 &&\n dayInt > 0 && // day must be 1-31\n dayInt <= 31 &&\n yearInt > 0;\n\n if (isValid) {\n return new Date(yearInt, monthInt - 1, dayInt);\n }\n return undefined;\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n * @returns an ISO Date object\n */\nexport function parseISODate(value: string): Date {\n if (!value) return undefined;\n const matches = value.match(ISO_DATE_FORMAT);\n if (matches) {\n return createDate(matches[1], matches[2], matches[3]);\n }\n return undefined;\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n * @returns an iso date string\n */\nexport function printISODate(date: Date): string {\n if (!date) return '';\n\n let d = date.getDate().toString(10);\n let m = (date.getMonth() + 1).toString(10);\n const y = date.getFullYear().toString(10);\n\n // days are not zero-indexed, so pad if less than 10\n if (date.getDate() < 10) {\n d = `0${d}`;\n }\n\n // months *are* zero-indexed, pad if less than 9!\n if (date.getMonth() < 9) {\n m = `0${m}`;\n }\n\n return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n * @param a date to compare\n * @param b date to compare\n * @returns boolean\n */\nexport function isEqual(a: Date, b: Date): boolean {\n if (a == null || b == null) return false;\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n}\n\n/**\n * Add days to a date\n * @param date\n * @param days\n * @returns a new Date\n */\nexport function addDays(date: Date, days: number): Date {\n const d = new Date(date);\n d.setDate(d.getDate() + days);\n return d;\n}\n\n/**\n * Add months to a date\n * @param date\n * @param months\n * @returns a new Date\n */\nexport function addMonths(date: Date, months: number): Date {\n const d = new Date(date);\n d.setMonth(date.getMonth() + months);\n return d;\n}\n\n/**\n * Add years to a date\n * @param date\n * @param years\n * @returns a new Date\n */\nexport function addYears(date: Date, years: number): Date {\n const d = new Date(date);\n d.setFullYear(date.getFullYear() + years);\n return d;\n}\n\n/**\n * Takes a date and a day enum and finds the first day of that date's week\n * @param date\n * @param firstDayOfWeek\n * @returns the first day of a date's week\n */\nexport function startOfWeek(\n date: Date,\n firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n const d = new Date(date);\n const day = d.getDay();\n const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n d.setDate(d.getDate() - diff);\n return d;\n}\n\n/**\n * Takes a date and a day enum and finds the last day of that date's week\n * @param date\n * @param firstDayOfWeek\n * @returns the last day of that date's week\n */\nexport function endOfWeek(\n date: Date,\n firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n const d = new Date(date);\n const day = d.getDay();\n const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n d.setDate(d.getDate() + diff);\n return d;\n}\n\n/**\n * Get the date of the start of the month\n * @param date\n * @returns start of the month Date\n */\nexport function startOfMonth(date: Date): Date {\n return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\n/**\n * Get the date of the end of the month\n * @param date\n * @returns end of the month Date\n */\nexport function endOfMonth(date: Date): Date {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\n/**\n * Changes a dates' month\n * @param date\n * @param month\n * @returns a new Date with the new month set\n */\nexport function setMonth(date: Date, month: number): Date {\n const d = new Date(date);\n d.setMonth(month);\n return d;\n}\n\n/**\n * Changes a dates' year\n * @param date\n * @param year\n * @returns a new Date with the new year set\n */\nexport function setYear(date: Date, year: number): Date {\n const d = new Date(date);\n d.setFullYear(year);\n return d;\n}\n\n/**\n * Check if date is within a min and max\n * @param date\n * @param min\n * @param max\n * @returns boolean\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n return dateClamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n * @param date\n * @param min\n * @param max\n * @returns the clamped date\n */\nexport function dateClamp(date: Date, min?: Date, max?: Date): Date {\n const time = date.getTime();\n\n if (min && min instanceof Date && time < min.getTime()) {\n return min;\n }\n if (max && max instanceof Date && time > max.getTime()) {\n return max;\n }\n return date;\n}\n\n/**\n * Given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n * @returns an array of Date objects in the range\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n const days: Date[] = [];\n let current = start;\n\n while (!isEqual(current, end)) {\n days.push(current);\n current = addDays(current, 1);\n }\n\n days.push(current);\n\n return days;\n}\n\n/**\n * Given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n * @returns an array of Date objects in the month range\n */\nexport function getViewOfMonth(\n date: Date,\n firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n return getDaysInRange(start, end);\n}\n"]}

package/dist/nano-components/p-d26b97d1.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{j as t,g as n,e as o,h as e,F as i,r,c as s,d as a,a as l}from"./p-1fe12320.js";import{a as d}from"./p-ee045579.js";import{d as c}from"./p-9746b0a5.js";import{c as h}from"./p-651b3264.js";const p="nano-tbl";const b=(t,n)=>{const o=globalThis[n];return o!=null&&t instanceof o};const _=t=>{if(t!=null){if(b(t,"ArrayBuffer")||b(t,"MessagePort")||b(t,"ImageBitmap")||b(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(_)}return _(t.buffer)}}return[]};let f=0;let u=0;const g=new Map;const m=new Map;const w=(n,o,e)=>{const i=new Worker(n,{name:o});i.addEventListener("message",(({data:n})=>{if(n){const o=n[0];const i=n[1];const r=n[2];if(o===e){const o=n[3];const[e,s,a]=g.get(i);g.delete(i);if(o){const n=o.isError?Object.assign(new Error(o.value.message),o.value):o.value;t(n);s(n)}else{if(a){a.forEach((t=>m.delete(t)))}e(r)}}else if(o===e+".cb"){try{m.get(i)(...r)}catch(n){t(n)}}}}));return i};const y=(t,n,o)=>(...e)=>new Promise(((i,r)=>{let s=f++;let a=0;let l=e.length;let d=[i,r];g.set(s,d);for(;a<l;a++){if(typeof e[a]==="function"){const t=u++;m.set(t,e[a]);e[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,s,o,e],_(e));if(t.then){t.then(c)}else{c(t)}}));const v=import("./p-0b29b22c.js").then((t=>t.worker));const x=y(v,"stencil.table.worker","createWorkerStore");const k=y(v,"stencil.table.worker","syncConfigToWorker");const $=y(v,"stencil.table.worker","syncDataToWorker");const C=y(v,"stencil.table.worker","workerFilter");const z=y(v,"stencil.table.worker","workerSearch");const S=y(v,"stencil.table.worker","workerSort");function I(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!t.sortCompareFn){const o=n.find((n=>n.prop===t.prop));o.sortCompareFn=t.sortCompareFn.toString()}}));return n}const D=new WeakMap;async function T(t,n,o){const e={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:o,host:t})};const i=await x(e.data.state.rows,I(e.config.state.columns));e.general.state.workerId=i;D.set(t,e);e.data.use({reset:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)}});e.config.use({reset:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)}});return e}function R(t){return D.get(t)}function M(t){if(t instanceof Date){return"date"}if(["number","string"].includes(typeof t)){return typeof t}return"unknown"}function O(t,n){const o=D.get(t);if(!o)return;const e=o.config.state.columns;const i=e.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const r=e.filter((t=>!t.type));n=n.map(((t,n)=>{if(r.length&&n===0){o.config.state.columns=e.map((n=>{if(r.includes(n)&&t[n.prop]&&!n.type){n.type=M(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const o=new Date(t[n])??null;if(!!o&&Number(o))t[n]=Number(o)}));t["__index"]=n;t["__uuid"]=d(e.map((n=>t[n.prop])).join());return t}));o.data.state.rows=n;if(o.general.state.workerId)return $(o.general.state.workerId,n)}function j(t,n){const o=D.get(t);if(!o)return;o.config.state.columns=n;if(o.general.state.workerId)return k(o.general.state.workerId,I(n))}async function F(t,n){const o=D.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await z(o.general.state.workerId,n)}catch(t){console.warn(t)}}async function N(t,n){const o=D.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await C(o.general.state.workerId,n)}catch(t){console.warn(t)}}async function A(t,n,o){const e=D.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await S(e.general.state.workerId,n,o)}catch(t){console.warn(t)}}function B(t,n){const o=E();const e=o.config.state.columns;const i=o.data.state.rows;const r=e[n];const s=r?.prop;const a=i[t];const l=a?a[e[n].prop]:"";return{prop:s,cellModel:l,column:r,rowIndex:t,rowModel:a}}function P(t){const n=E();const o=n.data.state.rows;const e=o[t];return{rowModel:e,rowIndex:t}}function W(t,n){if(!n)return t;const o={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof o.class==="object"){o.class={...n.class,...o.class}}else if(typeof n.class==="string"&&typeof o.class==="object"){o.class[n.class]=true}else if(typeof o.class==="string"){o.class+=" "+n.class}}if(n.style){o.style={...n.style,...o.style}}return o}function E(){return R(n(o()))}function q(t,n,o){const e={...o};const i=E().config.state.columns[n]?.cellProperties;if(!i)return e;const r=B(t,n);const s=i(r);if(!s)return e;return W(e,s)}function L(t){const n=t?.columnTemplate;return n?n(e,t):e(i,null,t.title)}const H=new WeakMap;const J=new WeakMap;function U(t,n,o){if(H.get(t))return;const e=E();const i=e.general.state.scrollParent;const r=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const r={};if(n==="start"){r.start=t.boundingClientRect.x-(e.x+i.scrollLeft)<0&&!t.isIntersecting}if(n==="end"){r.end=t.boundingClientRect.right>t.boundingClientRect.width&&!t.isIntersecting}if(!!o)o(r)}),{threshold:[1],rootMargin:"1px 0px 100px 0px",root:i===document.scrollingElement?null:i});H.set(t,r);setTimeout((()=>r.observe(t)),300)}function Z(t,n,o){if(J.get(t))return;const e=E();const i=e.general.state.scrollParent;const r=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const r={};if(n==="top"){r.top=t.boundingClientRect.y-(e.y+i.scrollTop)<0&&!t.isIntersecting}if(n==="bottom"){const n=t.target.getBoundingClientRect();r.bottom=n.height+n.y>e.height&&!t.isIntersecting}if(!!o)o(r)}),{threshold:[1],rootMargin:"0px 100px 0px 100px",root:i===document.scrollingElement?null:i});J.set(t,r);requestAnimationFrame((()=>r.observe(t)))}function G(t,n,o=false){const e={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(o)return K(e);return e}function K(t){let n="";Object.entries(t).forEach((([t,o])=>{if(o)n+=t+" "}));return n}const Q=(()=>{let t;let n;let o;let e;const i=60;const r=()=>{t=null;e=0};r();return()=>{n=window.scrollY;if(t!=null)e=n-t;t=n;window.clearTimeout(o);o=window.setTimeout(r,i);return e}})();function V(t){let n=getComputedStyle(t);const o=n.position==="absolute";const e=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let i=t;i=i.parentElement;){n=getComputedStyle(i);if(o&&n.position==="static"){continue}if(e.test(n.overflow+n.overflowY+n.overflowX))return i}return document.documentElement}function X(t,n=100){const o=t.getBoundingClientRect();const e=window.innerHeight||document.documentElement.clientHeight;if(!o.bottom&&!o.top&&!o.left&&!o.right&&!o.height&&!o.width&&!o.x&&!o.y)return false;return!(Math.floor(100-(o.top>=0?0:o.top)/+-o.height*100)<n||Math.floor(100-(o.bottom-e)/o.height*100)<n)}function Y(t,n,o){const e=[...o];const i=e.splice(t,1)[0];e.splice(n,0,i);return e}let tt;let nt;let ot;let et;const it=({column:t,headRenderer:n,onColumnSortClick:o,onColumnPinned:r,onColumnDrag:s,onColumnDrop:a,defaults:l})=>{const d=E();function c(t,n){tt=n;nt=ot=t.target;et=nt.closest("."+`${p}__tr`);et.classList.add(`${p}__dragging`);nt.classList.add(`${p}__drag--start`);t.dataTransfer.effectAllowed="move";t.dataTransfer.setData("text/html",nt.innerHTML);s(n.prop,nt)}function h(){et.classList.remove(`${p}__dragging`);nt.classList.remove(`${p}__drag--start`);et.querySelectorAll(`.${p}__drag-mask--active`).forEach((t=>{t.classList.remove(`${p}__drag-mask--active`)}));nt=null;tt=null;et=null;ot=null}function b(t){if(ot===t.target)return;t.preventDefault();t.stopImmediatePropagation();t.dataTransfer.dropEffect="move";et.querySelectorAll(`.${p}__drag-mask--active`).forEach((t=>{t.classList.remove(`${p}__drag-mask--active`)}));ot=t.target;if(!ot.classList.contains(`${p}__drag-mask`)){t.dataTransfer.dropEffect="none";return}ot.classList.add(`${p}__drag-mask--active`)}function _(t){t.stopPropagation();const{colName:n}=this.dataset;if(n===tt.prop)return;const o=d.config.state.columns;let e=o.findIndex((t=>t.prop===n));const i=o.findIndex((t=>t===tt));if(e<i&&this.classList.contains(`${p}__drag-mask--end`))e++;if(e>i&&this.classList.contains(`${p}__drag-mask--start`))e--;if(e===i)return;a(tt.prop,d.config.state.columns[e].prop,nt)}function f(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}o(e,t.prop,n.target.closest("th"))}function u(){return!!l.sortable&&t.sortable!==false||!l.sortable&&t.sortable===true}function g(){return!!l.draggable&&t.draggable!==false||!l.draggable&&t.draggable===true}let m={};if(t.columnProperties){m=t.columnProperties(t)||m}const w={class:{...G("th",n?.pinned),[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:!!t.filter}};let y=m?W(w,m):w;const v=L(t);if(!v)return e(i,null);y=Number(y.colSpan)>1?{...y,scope:"colgroup"}:{...y,scope:"col"};if(u()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";y={...y,"aria-sort":n}}if(g()){y={...y,draggable:true,onDragStart:n=>c(n,t),onDragOver:t=>t.preventDefault(),onDragEnd:()=>h()}}return e("th",{...y,ref:o=>{if(["end","start"].includes(t.pinned))U(o,t.pinned,r);if(["top","bottom"].includes(n.pinned))Z(o,n.pinned,r)},key:t.prop},g()&&[e("div",{class:{[`${p}__drag-mask`]:true,[`${p}__drag-mask--start`]:true},"data-col-name":t.prop,onDragEnter:b,onDrop:_,onDragOver:t=>t.preventDefault()}),e("div",{class:{[`${p}__drag-mask`]:true,[`${p}__drag-mask--end`]:true},"data-col-name":t.prop,onDragEnter:b,onDrop:_,onDragOver:t=>t.preventDefault()})],u()?e("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:f},L(t),!!t.filter&&e("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?e("nano-icon",{name:"solid/long-arrow-down"}):e("nano-icon",{name:"solid/long-arrow-up"})),e("div",{class:`${p}__status-icons`},e("nano-icon",{name:"light/chevron-down"}))):e("div",{class:`${p}__cell-content`},L(t),!!t.filter&&e("nano-icon",{name:"light/bars-filter"})))};function rt(t,n){const o=E();const r=o.config.state.columns;const s=r[n]?.cellTemplate;const a=B(t,n);if(!!a.cellModel&&r[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!s?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}return s?s(e,a):a.cellModel?e(i,null,a.cellModel?.toString()):""}const st=(t,n=false)=>{const o=E();const e=o.config.state.columns[t];const i={[`${p}__td`]:true,[`${p}__ordered`]:!!e.order,[`${p}__pin`]:!!e.pinned,[`${p}__pin--start`]:e.pinned==="start",[`${p}__pin--end`]:e.pinned==="end"};if(n)return K(i);return i};const at=({rowIndex:t,colIndex:n,nestedContent:o})=>{const i=()=>o?o():rt(t,n)||e("span",{class:"placeholder"}," ");let r="td";const s=E();const a=s.config.state.columns[n];let l=q(t,n,{class:st(n)});if(a.rowHeader){l=Number(l.rowSpan)>1?{...l,scope:"rowgroup"}:{...l,scope:"row"};r="th"}const d=t=>e("div",{...t,class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:!!a.wrap}},e(i,null));return e(r,{...l},a.autoTooltip&&!a.wrap?e("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},e("nano-tooltip",{disabled:true,hoist:true},e(d,null),e("span",{slot:"content"},e(i,null)))):e(d,null))};const lt=({rowRenderer:t,rowIndex:n,rowModel:o,onColumnPinned:i},r,s)=>{let a={};const l=({header:t,wrap:n},o)=>{const i=e("div",{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:n}},o);return t?e("th",{scope:"row"},i):e("td",null,i)};if(!o){const t=P(n);o=t.rowModel}if(t?.rowProperties){a=t.rowProperties({rowModel:o,rowIndex:n})||a}let d;if(t?.pinned&&typeof t.pinned==="function"){d=t.pinned()}const c={class:G("tr",d)};const h=a?W(c,a):c;const b=t?.template;if(b){let t=b(e,{renderedRow:e("tr",{...h,key:o.__uuid},r),rowModel:o,rowIndex:n},l);if(Array.isArray(t)){t=s.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${o.__uuid}_${n}`;t.vattrs=W({class:G("tr",d,true)},t.vattrs);if(!!t.vchildren){t.vchildren=s.map(t.vchildren,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:G(t.vtag.toString(),d,true)+st(n,true),ref:t=>{if(!!t&&d==="top"||d==="bottom")Z(t,d,i);if(!!t&&t.classList.contains("nano-tbl__pin--end"))U(t,"end",i);if(!!t&&t.classList.contains("nano-tbl__pin--start"))U(t,"start",i)}},t.vattrs)}return t}))}}return t}))}return t}return e("tr",{...h,key:o.__uuid},r)};const dt=({rowRenderer:t,onColumnPinned:n},o,i)=>{let r={};if(t.rowProperties){r=t.rowProperties()||{}}const s=({header:t,wrap:n},o)=>{const i=e("div",{class:{[`${p}__cell-content`]:true,[`${p}__cell-content--wrap`]:n}},o);return t!==false?e("th",{scope:"col"},i):e("td",null,i)};const a=t.pinned||null;const l={class:G("tr",null)};const d=r?W(l,r):l;const c=t?.template;if(c){let t=c(e,{renderedRow:e("tr",{...d},o)},s);if(Array.isArray(t)){t=i.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=W({class:G("tr",a,true)},t.vattrs);if(!!t.vchildren){t.vchildren=i.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=W({class:G(t.vtag.toString(),a,true),ref:t=>{if(!!t&&a==="top"||a==="bottom")Z(t,a,n);if(!!t&&t.classList.contains("nano-tbl__pin--end"))U(t,"end",n);if(!!t&&t.classList.contains("nano-tbl__pin--start"))U(t,"start",n)}},t.vattrs)}return t}))}}return t}))}return t}return e("tr",{...d},o)};const ct=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;width:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__drag-mask{display:none;position:absolute;inset-block:-2px -2px;z-index:10;opacity:0;transition:0.2s ease opacity}.nano-tbl__drag-mask--start{width:calc(50% + 2px);inset-inline-start:-2px;border-inline-start:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--end{width:50%;inset-inline-end:0;border-inline-end:2px dashed var(--border-tint-color)}.nano-tbl__drag-mask--active{opacity:1}.nano-tbl__dragging .nano-tbl__drag-mask{display:block}.nano-tbl__drag--start{opacity:0.4}.nano-tbl__dragging .nano-tbl__td,.nano-tbl__dragging .nano-tbl__th{cursor:no-drop}.nano-tbl__dragging .nano-tbl__td .nano-tbl__cell-content,.nano-tbl__dragging .nano-tbl__th .nano-tbl__cell-content{pointer-events:none}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none !important;transition:all 0.2s ease}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity;transform:translateZ(0)}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__pin{position:sticky}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s ease}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px !important}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width) !important}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4 !important}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5 !important}.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6 !important}.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6 !important}.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5 !important}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6 !important}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';let ht=0;const pt=class{constructor(t){r(this,t);this.nanoTblReady=s(this,"nanoTblReady",7);this.nanoTblBlockRendered=s(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=s(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=s(this,"nanoTblAfterSort",7);this.nanoTblColDrag=s(this,"nanoTblColDrag",7);this.nanoTblColDrop=s(this,"nanoTblColDrop",7);this.nanoTblBeforeFilter=s(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=s(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=s(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=s(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=s(this,"nanoTblBeforeEdit",7);this.renderId="tbl-"+ht++;this.filters=[];this.currentFilters="[]";this.currentSort="";this.measureHeight=0;this.blockIos=new WeakMap;this.blockHeights=[];this.unitHeight=0;this.ignoreIO=true;this._isReady=false;this.colDrag=t=>{this.nanoTblColDrag.emit({column:t})};this.colDrop=(t,n)=>{const o=this.store.config.state.columns;const e=o.findIndex((t=>t.prop===n));const i=o.findIndex((n=>n.prop===t));const r=this.nanoTblColDrop.emit({fromCol:t,toCol:n,fromIndex:i,toIndex:e});if(r.defaultPrevented)return;this.columns=Y(i,e,o)};this.sortStart=async(t,n,o)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const e=this.nanoTblBeforeSort.emit({column:n,order:t});if(e.defaultPrevented)return;this.currentSort=t+":"+n;this.scrollToTop(o);if(this.customSortFn){try{const o=await this.customSortFn(n,t);if(o===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await A(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};this.setupBlockIO=(t,n)=>{if(!t||this.blockIos.has(t))return;const o=new IntersectionObserver((([o])=>{if(o.intersectionRatio===0)return;a((()=>{if(this.scrollSpeed<100||X(t,.01)){if(!this.ignoreIO){const t=[n,n+1,Math.max(0,n-1)];if(t.toString()!==this.activeBlocks.toString()){this.debouncedBlockChange(t)}}this.nanoTblBlockRendered.emit({block:n,totalBlocks:this.blockElements.length})}}))}),{threshold:[0],root:this.scrollParent===document.scrollingElement?null:this.scrollParent});o.observe(t);this.blockIos.set(t,o)};this.handleColumnPinned=t=>{Object.entries(t).forEach((([t,n])=>{this.tableEle.classList.toggle(`${p}__pinned--${t}`,n)}))};this.handleResizeChange=t=>{this.tableWrapperEle.className="";this.tableWrapperEle.classList.add(...(t.target.className+" "+`${p}__wrap`).split(" "))};this.type="table";this.caption=undefined;this.showCaption=false;this.loading=undefined;this.internalLoading=false;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=60;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.defaultSort=true;this.defaultColDraggable=false;this.virtualTotalItems=0;this.blocks=[];this.activeBlocks=[0,1,2];this.debounceSetLoading=c(this.debounceSetLoading.bind(this),50);this.debouncedBlockChange=c(this.debouncedBlockChange.bind(this),100)}get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await O(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)this.setInitialBlockDimension();this._loading=false}))}async handleColsChange(){await j(this.host,this.columns);if(this.isReady)this.columnInit()}get blocksLength(){return this.blocks.length}handleSearchTermChange(){this.searchStart()}virtualTotalItemsChangeHandler(){this.setBlocks()}async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const o=this.columns.find((n=>n.prop===t));if(!o)throw"Cannot find column with "+t;return this.sortStart(n,o.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}scrollListener(){const t=Q();this.scrollSpeed=t<0?t*-1:t}handleReady(){const t=window.location.hash;if(t.length>1){const n=document.querySelector(t);if(n){n.scrollIntoView()}}this.nanoTblReady.emit()}sortComplete(t,n){this.columns=this.columns.map((o=>{if(o.prop===n)return{...o,order:t};return{...o,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;this.scrollToTop();try{await F(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const o=this.nanoTblBeforeFilter.emit({filters:this.filters});if(o.defaultPrevented)return;this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){this.filterComplete();this._loading=false}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false}return}try{await N(this.host,this.filters);this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n)t.filter=n.filter;return t}));this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const o=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!X(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!X(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(o)this.scrollParent.scrollLeft=o;if(n)this.scrollParent.style.scrollBehavior=n}setMeasureElement(){a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${p}__inactive`)))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;const t=new Promise((t=>{a((()=>{this.setMeasureElement();if(!this.measureEle&&!this.unitHeight)t();this.blockElements.forEach(((n,o)=>{if(!n||!n.classList?.contains(`${p}__inactive`)){if(o===this.blockElements.length-1)t();return}if(o===this.blockElements.length-1)t()}))}))}));t.then((()=>{requestAnimationFrame((()=>{this.isReady=true}))}))}async columnInit(){this.filters=this.columns.filter((t=>!!t.filter)).map((t=>{const{filter:n,prop:o}=t;return{filter:n,prop:o}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}this.ignoreIO=true;let n=1;const o=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let e=[];const i=[];this.blockHeights=[];for(n;n<=o;n++){e.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:e,__uuid:d(e.map((t=>t.__uuid)).join())});e=[]}}if(e.length){i.push({rows:e,__uuid:d(e.map((t=>t.__uuid)).join())})}this.blocks=i}getBlockHeight(t){if(this.activeBlocks.includes(t))return undefined;if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n)return n.height+"px"}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight+"px"}return this.unitHeight?this.unitHeight*n+"px":undefined}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;a((()=>{const o=n.getBoundingClientRect().height;const e=this.blockHeights.findIndex((n=>n.blockIndex===t));if(e>0){this.blockHeights[e]={height:o,blockIndex:t}}else this.blockHeights.push({height:o,blockIndex:t})}))}))}debouncedBlockChange(t){this.activeBlocks=t;this.setBlockHeight()}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}async componentWillLoad(){this.scrollParent=V(this.host);this.store=await T(this.host,this.columns,this.scrollParent);await this.handleRowsChange();this.processSlots();this.store.data.onChange("rows",(()=>this.setBlocks()));this.setBlocks()}connectedCallback(){this.scrollParent=V(this.host)}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,o){if(["rows","columns"].includes(o))return false}componentWillRender(){}componentDidRender(){requestAnimationFrame((()=>this.ignoreIO=false));this.setMeasureElement()}render(){this.blockElements=[];return e(l,null,e("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),e("nano-resize-observe",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined,states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange}),e("div",{class:`${p}__wrap sm md`,ref:t=>this.tableWrapperEle=t},e("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),e("table",{role:this.type==="grid"?"grid":undefined,"aria-readonly":this.type==="table"?"true":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t},e("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},e("slot",{name:"caption"},this.caption)),e("thead",null,e(dt,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[e(it,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,onColumnPinned:this.handleColumnPinned,onColumnDrag:this.colDrag,onColumnDrop:this.colDrop,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})])))),this._loading&&!this.blocks.length&&e("tbody",{class:`${p}__active`},[...Array(10).keys()].map((t=>e("tr",null,this.store.config.state.columns.map(((n,o)=>e(at,{rowIndex:t,colIndex:o,nestedContent:()=>e("nano-skeleton",null)}))))))),!this._loading&&!this.blocks.length&&e("tr",null,e("th",{class:`${p}__th`,colSpan:this.store.config.state.columns.length},e("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},e("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>e("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t);requestAnimationFrame((()=>this.setupBlockIO(t,n)))},class:{[`${p}__inactive`]:!this.activeBlocks.includes(n),[`${p}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,o)=>{const i=n>0?n*this.perBlock+o:o;return e(lt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:i},this.store.config.state.columns.map(((t,n)=>e(at,{rowIndex:i,colIndex:n}))))})):e("tr",null,e("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)}}))))),this.showFooter&&e("tfoot",null,e(dt,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[e(it,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort,draggable:this.defaultColDraggable}})]))))),!!this.blocks.length&&e("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}})))}get host(){return n(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};pt.style=ct;export{pt as T,w as c};
+//# sourceMappingURL=p-d26b97d1.js.map