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-6ad194e4.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as e,i as n,c as s,a as o,g as i}from"./p-1fe12320.js";import{b as a,g as r,c as l}from"./p-845ae77e.js";import{d as c}from"./p-167b9165.js";import{g as h}from"./p-45abbbdd.js";import{g as d}from"./p-74a7fc4f.js";import{c as u}from"./p-7b3638b7.js";import{d as p,a as f}from"./p-9746b0a5.js";import{F as b,a as m}from"./p-77cad8d1.js";const v=class{constructor(e){t(this,e);this.myAccountUser=null;this.userProfileUrl=""}render(){return e("a",{href:this.userProfileUrl,class:"user-profile"},e("div",{class:"left"},e("div",{class:"avatar-container"},e("img",{class:"avatar",src:this.myAccountUser.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&e("img",{class:"logo-small",src:n(`./assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),e("div",{class:"user-details"},e("span",{class:"name"},this.myAccountUser.name),e("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),e("div",{class:"right"},e("div",{class:"chevron-right"},e("nano-icon",{slot:"icon-end",name:"light/chevron-right","aria-label":"navigate to ..."}))))}static get assetsDirs(){return["assets"]}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline-start:var(--padding-start);padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline-end:var(--padding-end);padding-inline-start:0}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline-start:0;padding-inline-end:var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;inset-block-start:0;inset-inline-start:0;width:100%;z-index:1;opacity:0;transition:opacity 0.2s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translateX(0);transition:opacity 0.3s ease, transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block-start:calc(var(--padding-top) / 2);padding-inline-end:0;padding-block-end:calc(var(--padding-bottom) / 2);padding-inline-start:var(--padding-start);display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}:host(.nano-menu-drawer) .text{padding-inline-end:var(--padding-end);padding-inline-start:0;text-align:start;flex:0 1 auto;min-width:130px;width:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);width:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-width:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;width:6px;height:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{width:7px;height:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(e){t(this,e);this.nanoClose=s(this,"nanoClose",7);this.nanoOpen=s(this,"nanoOpen",7);this.nanoOpening=s(this,"nanoOpening",7);this.nanoClosing=s(this,"nanoClosing",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,"open",false);this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,"open",true);this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=t=>{if(!this.hasAnchorEle)return;const e=t.target.closest("a, button");if(!e)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let t=0;if(a(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),t);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const t=new window.IntersectionObserver((e=>{if(e[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}t.disconnect()}),{threshold:1});t.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const e=h(this.secondaryDiv,true);if(e[0])e[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(t){if(!this.didOpen||!this.hasSecondarySlot)return;if(!t.composedPath().some((t=>t===this.secondaryDiv)))this.toggleSecondary()}componentWillLoad(){const t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;const e=r(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}}connectedCallback(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}render(){return e(o,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},e("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{part:"ctrl ctrl--anchor",target:this.target,ref:t=>this.btn=t,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&e("button",{part:"ctrl ctrl--button",ref:t=>this.btn=t,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},e("slot",{name:"icon-start"}),e("span",{class:"text"},e("slot",null)),e("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&e("div",{class:"link"},e("slot",{name:"icon-start"}),e("slot",null),e("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&e("div",{class:"secondary-menu",ref:t=>this.secondaryDiv=t,tabIndex:-1},e("div",{class:"secondary-menu-content",part:"secondary-wrapper"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return i(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const y='.sc-nano-select-h{box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{box-sizing:border-box}[hidden].sc-nano-select{display:none !important}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-select{min-inline-size:100%;display:block}.form-ctrl.has-helper-end.sc-nano-select{display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-select{opacity:1}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select{flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper-end.sc-nano-select{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-select .form-ctrl__helper.sc-nano-select{display:none}.form-ctrl__wrapper.sc-nano-select{display:block}label.sc-nano-select,.form-ctrl__more.sc-nano-select,.form-ctrl__error.sc-nano-select,.form-ctrl__helper.sc-nano-select{display:block;inline-size:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.form-ctrl__more.visually-hide.sc-nano-select,.form-ctrl__error.visually-hide.sc-nano-select,.form-ctrl__helper.visually-hide.sc-nano-select{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}.form-ctrl__float-label.sc-nano-select{padding-block:0;padding-inline-end:0;padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;transform:translateY(-50%);transform-origin:top left;inset-block-start:50%;transition:all 0.125s ease-in;opacity:1}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select,.has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{opacity:1}.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:50%}.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select{inset-block-start:0;transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-block-end:var(--padding-bottom);line-height:1;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{margin-block:unset;margin-inline-end:5px;margin-inline-start:0;opacity:0;-webkit-appearance:none;appearance:none;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;margin-inline-end:0;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .form-ctrl__label.sc-nano-select{color:var(--label-color--invalid)}.has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:0;transition:opacity 0.125s ease-in}.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select,.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select,.has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select{opacity:1}.form-ctrl__more.sc-nano-select{block-size:1em;position:relative;margin-block:4px var(--padding-bottom);margin-inline:3px 0}.form-ctrl__helper.sc-nano-select,.form-ctrl__error.sc-nano-select{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-select{opacity:0}.form-ctrl__helper-end.sc-nano-select{flex:1 1 30%;min-inline-size:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .form-ctrl__error.sc-nano-select{opacity:1}.form-ctrl__input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);inline-size:100%;padding:0 !important;position:relative;flex:1 0 auto;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:flex;align-items:stretch;flex:1;max-inline-size:100%}.form-ctrl__clear-btn.sc-nano-select,.form-ctrl__slot-end.sc-nano-select,.form-ctrl__slot-start.sc-nano-select,.form-ctrl__slot-value-end.sc-nano-select{--nano-icon-size:1.4em;margin-block:0;margin-inline:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:flex;align-items:stretch;inline-size:auto}.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select{display:none}.form-ctrl__slot-start.sc-nano-select-s>*,.form-ctrl__slot-start .sc-nano-select-s>*,.form-ctrl__slot-end.sc-nano-select-s>*,.form-ctrl__slot-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;padding-inline:unset;padding-inline-start:var(--padding-start);padding-inline-end:var(--padding-end);font-size:1em;align-items:center;display:flex;block-size:100%;z-index:1}.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-select-s>*,.form-ctrl__slot-value-end .sc-nano-select-s>*,.form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;inline-size:0;-webkit-appearance:none;appearance:none;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select{padding-block:0;padding-inline:var(--padding-start) var(--padding-end);opacity:1;inline-size:auto}.form-ctrl__clear-btn.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.select__native-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding:unset;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;padding-block-start:1.4em}.select__native-input.sc-nano-select::selection{background:transparent}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.select__native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.select__native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.select__native-input.sc-nano-select::-webkit-search-decoration,.select__native-input.sc-nano-select::-webkit-search-cancel-button,.select__native-input.sc-nano-select::-webkit-search-results-button,.select__native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.select__native-input.sc-nano-select:invalid{box-shadow:none}.select__native-input.sc-nano-select::-ms-clear,.select__native-input.sc-nano-select::-ms-reveal{display:none}.select__native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select{line-height:1.5em;padding-block:var(--padding-top) var(--padding-bottom);white-space:pre-wrap}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select{padding-block-start:1.8em}.masked.sc-nano-select-h .select__native-input.sc-nano-select{opacity:0;position:absolute;inset-inline-start:0;inset-block-start:0}.select__mask.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:0;border-radius:var(--input-border-radius);pointer-events:none;line-height:2.5em;min-height:2.5em}.select__multi-wrap.sc-nano-select{padding-block:0 var(--padding-bottom);padding-inline:0 0;display:flex;flex:1;flex-wrap:wrap;overflow:hidden;align-items:flex-start}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{padding-block-start:1em}.select__multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-bottom) 0;min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;flex:0;position:relative;box-sizing:border-box;line-height:calc(2.5em - var(--padding-bottom));height:calc(2.5em - var(--padding-bottom))}.select__multi-input.sc-nano-select:last-child{flex:1}.select__multi-value.sc-nano-select{margin-block:var(--padding-bottom) 0;margin-inline:var(--padding-start) -3px;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.35em 0.5em;max-width:100%;display:flex;align-items:center;font-size:var(--input-font-size);letter-spacing:1px;max-height:calc(2.5em - 8px)}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}.select__multi-value-remove.sc-nano-select{background-position:center;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;display:flex;align-items:center;inset-block-start:0;font-size:1em}.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.form-ctrl__float-label.sc-nano-select{width:calc(100% - (1em + var(--padding-start) * 2))}.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{transform:translateY(21%);inset-block-start:0}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';let w=0;const x=class{constructor(e){t(this,e);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.nanoDidLoad=s(this,"nanoDidLoad",7);this.nanoDidUnload=s(this,"nanoDidUnload",7);this.nanoSearchChange=s(this,"nanoSearchChange",7);this.nanoValidate=s(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${w++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError)return;this.nativeSelect.setCustomValidity("");if(this.required&&!this.valArray.length){this.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(this.valArray.length&&!this.allowCustomValues&&!this.isValidValues()){this.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(this.max&&this.valArray.length>this.max){this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);return true}if(this.min&&this.valArray.length<this.min){this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);return true}return false};this.showInlineValidation=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this._invalid=false;this.showErrorMsg=false;this.errorMessage="";if(!this.nativeSelect.validity.valid){this.errorMessage=this.nativeSelect.validationMessage;this._invalid=true;this.showErrorMsg=true}this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:t})};this.handleInvalid=t=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)t.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(t)))};this.setValue=t=>{t.preventDefault();if(!this.multiple){this.value=t.detail.value;return}if(this.value&&this.value.length&&this.value.includes(t.detail.value))return;if(this.max&&this.value.length===this.max)return;this.currInsertIndex++;this.value=[...this.value.slice(0,this.currInsertIndex),t.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=t=>{if(!this.multiple||!this.value.length)return;if(!t)t=this.value[this.value.length-1];this.value=this.value.filter((e=>e!==t));this.currInsertIndex--;this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._eOptions=this.datalist.activeOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:o}=t;return{value:e,selected:n,label:s,filterMeta:o}}));this.customValidate()};this.handleDocumentKeyDown=t=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let e;switch(t.key){case"Backspace":if(this.inputCtrl.previousElementSibling)e=this.inputCtrl.previousElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)e=this.inputCtrl.nextElementSibling;else break;this.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(t.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(t.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=t=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const e=new window.Event("change");this.inputCtrl.dispatchEvent(e)};this.onClick=()=>{this.setFocus()};this.onDragStart=t=>{const e=t.target;this.dragVal=e.dataset.value};this.onDragEnd=t=>{this.dragVal=null;t.preventDefault()};this.onDragLeave=t=>{const e=t.target;const n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||this.dragVal===n||!this.value.includes(this.dragVal)){t.preventDefault();return}const s=this.value.indexOf(n);const o=this.value.indexOf(this.dragVal);const i=this.value;const a=i[s];i[s]=i[o];i[o]=a;this.value=[...i]};this.onMultiInput=t=>{this.inputSearchVal=t.target.value.trim();this.nanoSearchChange.emit({value:t.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.showInlineValidation=p(this.showInlineValidation,50)}get inputCtrl(){return this._inputCtrl}set inputCtrl(t){if(t===this._inputCtrl)return;this._inputCtrl=t;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}get value(){return this._value}set value(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((t=>{const{value:e,selected:n,label:s,filterMeta:o}=t;return{value:e,selected:n,label:s,filterMeta:o}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=f(this.nanoSearchChange,this.debounce)}shouldValidate(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...t,...this.dropDownConfig,tetherTo:this.selectWrap}}async reportValidity(t){return new Promise((e=>{if(t){this.customValidate();this.showInlineValidation()}setTimeout((()=>{e({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(t){if(this.nativeSelect){this.customError=t;this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((t=>this.options.find((e=>e.value===t))))}slotChangeObserver(){const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getLabel(t){const e=this.options.find((e=>!e.disabled&&e.value?.length&&e.value===t));return e&&e.label?e.label:t}onReset(t){const e=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!e||t.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(t){if(!this.hasFocus)return;const e=t;let n;requestAnimationFrame((()=>{if(e.key){if(e.key!=="Tab")return;n=d()}else n=t.target;if(l(this.el.tagName.toLowerCase(),n)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const t=this.selectId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const s=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const i=(({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:o,hasHelperSlot:i,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:s,showInlineError:o,hasHelperSlot:i,hasHelperEndSlot:a,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const a={...i,labelId:t,moreId:n,helperEndId:s,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId};const r=(({readonly:t,disabled:e})=>({readonly:t,disabled:e,clearControl:this.clearSelect}))(this);return e(o,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...u(this.color),"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask}},e(b,{...a},e(m,{...r,onClearText:this.clearSelectValue,control:this.el,ref:t=>this.selectWrap=t,endValueSlot:e("slot",{name:"down-arrow"},e("nano-icon",{slot:"value-end",name:"light/chevron-down"}))},this.multiple&&e("div",{class:"select__multi-wrap select"},this.multipleValues(t,n,s)),!this.multiple&&[this.mask&&e("div",{class:"select__mask"},this.getLabel(this.value)),e("input",{id:this.selectId,class:"select__native-input",ref:t=>this.inputCtrl=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&e("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:t=>this.datalist=t,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:t=>{t.preventDefault();this.removeValue(t.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&e("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},e("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),e("slot",null)),e("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:t=>this.nativeSelect=t,"aria-labelledby":t+" "+n+" "+s,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((t=>e("option",{value:t,selected:true},t))),!this.allowCustomValues&&this.options.map((t=>e("option",{value:t.value,selected:this.valArray.includes(t.value),disabled:t.disabled,label:t.label},this.valArray.includes(t.value))))))}multipleValues(t,n,s){const o=e("input",{class:"select__multi-input",id:this.selectId,ref:t=>this.inputCtrl=t,readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+n+" "+s});if(!this.value.length)return o;return this.value.map(((t,n)=>{let s=e("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:t=>t.preventDefault(),draggable:true,"data-value":t,ref:t=>this.valueItems.push(t),class:"select__multi-value"},e("span",null,this.getLabel(t)),e("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(t)},onMouseUp:()=>{this.removeValue(t)}},e("nano-icon",{name:"light/times"})));if(n===0&&this.currInsertIndex<0)s=[o,s];else if(n===this.currInsertIndex)s=[s,o];return s}))}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};x.style=y;export{v as nano_global_nav_user_profile,_ as nano_nav_item,x as nano_select};
+//# sourceMappingURL=p-6ad194e4.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/global-nav/global-nav-user-profile.tsx","src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["GlobalNavUserProfile","[object Object]","h","href","this","userProfileUrl","class","src","myAccountUser","small_avatar_url","alt","height","width","is_nanopore_user","getAssetPath","name","job_title","company","slot","aria-label","navItemCss","NavItem","hasSecondarySlot","hasAnchorEle","animating","closeSecondary","async","didOpen","open","displayTransition","secondaryDiv","nanoClosing","emit","secondaryMenu","openSecondary","window","innerWidth","secondaryActiveWidth","secondaryFallback","call","nanoOpening","toggleSecondary","handleFocus","hasFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","target","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","handleMouseLeave","handleClick","focus","document","activeElement","body","preventScroll","tabIndex","nanoClose","panelio","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","focusableChild","getTabbableElements","nanoOpen","e","composedPath","some","secondaryEle","querySelector","link","getDirectChildren","addEventListener","isInGlobalNav","isInMenuDrawer","isInMenu","parentElement","Host","has-secondary","secondary-open","selected","has-focus","disabled","nano-global-nav","nano-menu-drawer","nano-menu","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","part","ref","a","onFocus","notification","div","selectCss","selectIds","Select","hostRef","valueItems","selectId","rtl","onInit","customError","_value","multiple","_options","customValidate","nativeSelect","setCustomValidity","required","valArray","allowCustomValues","isValidValues","max","min","showInlineValidation","validateOn","_invalid","showErrorMsg","errorMessage","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","showInlineError","preventDefault","requestAnimationFrame","setValue","value","detail","includes","currInsertIndex","slice","inputSearchVal","removeValue","toFind","filter","val","setFocus","setOptions","datalist","activeOptions","_eOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","inputCtrl","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","clearSelect","readonly","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","debounce","_inputCtrl","input","setDataListOpts","selectWrap","_selectWrap","_datalist","validityMessage","split","Array","isArray","options","opts","opt","debounceEvent","shouldValidate","nanoChange","currDWConfig","dropDownConfig","tetherTo","validateFirst","Promise","resolve","message","find","mo","MutationObserver","processSlottedContent","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","form","kev","getActiveElement","closestElement","tagName","toLowerCase","debounceChanged","CustomEvent","slotChangeObserver","labelId","moreId","helperEndId","compWrapOptions","floatLabel","hideLabel","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","mask","FormControlWrap","FormControl","onClearText","control","endValueSlot","multipleValues","getLabel","id","aria-labelledby","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autofocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","tabindex","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n getAssetPath,\n ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/**\n * Nanopore digital global navigation user profile.\n */\n@Component({\n tag: 'nano-global-nav-user-profile',\n assetsDirs: ['assets'],\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n /**\n * Logged in user details automatically populated from MyAccount\n */\n @Prop() myAccountUser: MyAccountUser = null;\n\n /**\n * Link to the user profile\n */\n @Prop() userProfileUrl: string = '';\n\n // Render output\n\n render() {\n return (\n <a href={this.userProfileUrl} class=\"user-profile\">\n <div class=\"left\">\n <div class=\"avatar-container\">\n <img\n class=\"avatar\"\n src={this.myAccountUser.small_avatar_url}\n alt=\"User Avatar\"\n height={75}\n width={75}\n />\n {this.myAccountUser.is_nanopore_user && (\n <img\n class=\"logo-small\"\n src={getAssetPath(`./assets/ont-wheel-light.svg`)}\n alt=\"Nanopore Logo\"\n />\n )}\n </div>\n\n <div class=\"user-details\">\n <span class=\"name\">{this.myAccountUser.name}</span>\n\n <span class=\"bio\">\n {this.myAccountUser.job_title} at {this.myAccountUser.company}\n </span>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"chevron-right\">\n <nano-icon\n slot=\"icon-end\"\n name=\"light/chevron-right\"\n aria-label=\"navigate to ...\"\n ></nano-icon>\n </div>\n </div>\n </a>\n );\n }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n // These can be overwritten, but are automatically set from context components\n\n // --padding-top: inherit;\n // --padding-bottom: inherit;\n // --padding-start: inherit;\n // --padding-end: inherit;\n // --margin: inherit;\n\n // --secondary-padding-top: inherit;\n // --secondary-padding-bottom: inherit;\n // --secondary-padding-start: inherit;\n // --secondary-padding-end: inherit;\n\n // --border-bottom: inherit;\n // --icon-size: inherit;\n\n // --color: inherit;\n // --color-hover: inherit;\n // --color-focus: inherit;\n // --color-selected: inherit;\n // --color-open: inherit;\n\n // --bg-color: inherit;\n // --bg-color-hover: inherit;\n // --bg-color-selected: inherit;\n // --bg-color-open: inherit;\n // --bg-color-focus: inherit;\n\n // --secondary-bg-color: inherit;\n // --secondary-color: inherit;\n\n opacity: inherit;\n display: block;\n color: var(--color) !important;\n margin: var(--margin);\n outline: none !important;\n\n .nav-item,\n .link {\n outline: none !important;\n }\n\n ::slotted(*),\n * {\n box-sizing: border-box;\n }\n\n ::slotted(button),\n button {\n background: none;\n border: none;\n margin: 0;\n }\n\n ::slotted(button),\n ::slotted(a),\n ::slotted(a:visited),\n button,\n a,\n a:visited {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-top) var(--padding-bottom);\n display: var(--display, block);\n white-space: nowrap;\n color: var(--color) !important;\n background-color: var(--bg-color);\n line-height: inherit;\n outline: none !important;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-end: var(--padding-end);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-start: var(--padding-start);\n }\n\n .link {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline-start: var(--padding-start);\n padding-inline-end: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n }\n }\n\n .link,\n button,\n a {\n border-block-end: var(--border-bottom);\n display: flex;\n align-items: center;\n }\n\n .secondary-menu {\n display: none;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n text-decoration: inherit !important;\n }\n\n button:focus-visible,\n a:focus-visible {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n box-shadow: #{$control-focus-style};\n }\n}\n\n.nav-item {\n &.selected {\n .link,\n button,\n a {\n color: var(--color-selected, var(--color-open, var(--color))) !important;\n background-color:\n var(\n --bg-color-selected,\n var(--bg-color-open, var(--bg-color))\n );\n }\n }\n\n &.secondary-open {\n button,\n a {\n color: var(--color-open, var(--color-selected, var(--color))) !important;\n background-color:\n var(\n --bg-color-open,\n var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n );\n }\n }\n\n &.disabled {\n opacity: 0.6;\n\n button,\n a {\n color: var(--color-disabled, var(--color)) !important;\n }\n }\n\n &:not(.nano-menu) {\n ::slotted(a:hover),\n ::slotted(button:hover),\n .link:hover,\n button:hover,\n a:hover {\n color: var(--color-hover, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-hover,\n var(--bg-color-focus, var(--bg-color))\n );\n }\n }\n}\n\n:host(.has-focus) {\n .link {\n color: var(--color-focus, var(--color-hover, var(--color))) !important;\n background-color:\n var(\n --bg-color-focus,\n var(--bg-color-hover, var(--bg-color))\n );\n outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n a,\n a:visited,\n button,\n .link {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: 'currentColor';\n text-decoration: inherit;\n white-space: normal;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-start: 0;\n padding-inline-end: var(--padding-end);\n flex: 1;\n }\n\n ::slotted(a),\n ::slotted(button) {\n flex: 1;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n color: var(--secondary-color, 'currentColor');\n min-height: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n z-index: 1;\n opacity: 0;\n transition: opacity 0.2s ease, transform 0.3s ease;\n background-color: var(--secondary-bg-color, white);\n transform: translateX(100%);\n\n &:focus {\n outline: none;\n }\n\n &.open {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 0.3s ease, transform 0.2s ease;\n }\n }\n}\n\n:host(.nano-global-nav-menu) {\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: 10px;\n flex: 0 0 10px;\n pointer-events: none;\n }\n\n button,\n a {\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0;\n }\n }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n .secondary-menu {\n transform: translateX(-100%);\n\n &.open {\n transform: translateX(0);\n }\n }\n}\n\n:host(.nano-menu) {\n ::slotted(a:focus),\n ::slotted(button:focus) {\n box-shadow: none;\n }\n\n .secondary-menu-content {\n padding-inline: var(--secondary-padding-start) var(--secondary-padding-end);\n padding-block: var(--secondary-padding-top) var(--secondary-padding-bottom);\n }\n}\n\n:host(.nano-global-nav-bar) {\n .link,\n a,\n button {\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n\n .text {\n flex: 1 0 auto;\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n margin-inline: var(--padding-end) 0;\n margin-block: 0;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n margin-inline: 0 var(--padding-start);\n margin-block: 0;\n }\n\n ::slotted(a),\n button {\n position: relative;\n\n &::before {\n content: '';\n background-color: rgb(12, 90, 113);\n height: 9px;\n inset-inline: 0 5px;\n inset-block-end: -22px;\n position: absolute;\n transform: translateZ(0) scaleX(0);\n transform-origin: 0;\n transition: 0.2s ease transform;\n }\n }\n\n .selected button::before,\n .secondary-open button::before {\n transform: translateZ(0) scaleX(1);\n }\n}\n\n:host(.nano-global-nav-bar.selected) {\n ::slotted(a) {\n &::before {\n transform: translateZ(0) scaleX(1);\n }\n }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n .secondary-open button::before {\n opacity: 0.7;\n }\n\n .secondary-menu {\n display: none;\n transition: transform 0.3s ease;\n transform: translateY(-100%) translateZ(0);\n background-color: var(--secondary-bg-color, #196c82);\n color: var(--secondary-color);\n position: absolute;\n box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n inset-inline: 0;\n z-index: -2;\n outline: none;\n\n &.open {\n transform: translateY(12px) translateZ(0);\n }\n }\n}\n\n:host(.nano-menu-drawer) {\n .link,\n a,\n button {\n padding-block-start: calc(var(--padding-top) / 2);\n padding-inline-end: 0;\n padding-block-end: calc(var(--padding-bottom) / 2);\n padding-inline-start: var(--padding-start);\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n color: currentColor;\n text-decoration: inherit;\n white-space: normal;\n border: none;\n cursor: pointer;\n line-height: 1.2;\n width: 100%;\n }\n\n .text {\n padding-inline-end: var(--padding-end);\n padding-inline-start: 0;\n text-align: start;\n flex: 0 1 auto;\n min-width: 130px;\n width: 130px;\n }\n\n ::slotted(nano-icon[slot='icon-start']) {\n padding-inline: 0 var(--padding-end);\n padding-block: 0;\n font-size: var(--icon-size);\n width: var(--icon-size);\n flex: 0 0 var(--icon-size);\n }\n\n ::slotted(nano-icon[slot='icon-end']) {\n padding: 0 var(--padding-end) 0 0;\n font-size: 10px;\n flex: 0 0 20px;\n min-width: 20px;\n }\n\n .secondary-menu {\n display: none;\n position: absolute;\n background-color: var(--secondary-bg-color);\n color: var(--secondary-color);\n height: 100vh;\n inset-inline: auto 0;\n inset-block: 0;\n transform: translateX(0);\n z-index: -1;\n transition: transform 0.3s ease, opacity 0.2s ease;\n overflow-y: auto;\n width: var(--secondary-width, 400px);\n max-width: 62vw;\n opacity: 1;\n padding-inline: var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));\n padding-block: var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom));\n\n &:focus {\n outline: none;\n }\n\n &.open {\n transform: translateX(100%);\n }\n }\n\n .notification {\n position: relative;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #ef4135;\n inset-inline-start: 10px;\n inset-block-start: 7px;\n border-radius: 50%;\n\n @media (min-width: 52em) {\n width: 7px;\n height: 7px;\n inset-inline-start: 8px;\n inset-block-start: 5px;\n }\n }\n }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n .secondary-menu {\n transform: translateX(0%);\n\n &.open {\n transform: translateX(-100%);\n opacity: 1;\n }\n }\n}\n","import {\n Component,\n h,\n Host,\n Element,\n Prop,\n Watch,\n EventEmitter,\n Event,\n State,\n Method,\n ComponentInterface,\n Listen,\n} from '@stencil/core';\nimport { getDirectChildren, getSiblings } from '../../utils/dom';\nimport { displayTransition } from '../../utils/transitions';\nimport { getTabbableElements } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n *\n * @slot icon-start - an icon at the start of the main control\n * @slot icon-end - an icon at the end of the main control\n * @slot secondary - a content panel in which you can place any html to display on control click\n * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)\n * @part ctrl - the controlling `<a>` or `<button>` element\n * @part ctrl--button - the controlling `<button>` element\n * @part ctrl--anchor - the controlling <a> element\n * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)\n * @part secondary-wrapper - the div surrounding slotted secondary content\n * @part secondary-mask - the div that is added when secondary content is shown\n */\n@Component({\n tag: 'nano-nav-item',\n styleUrl: 'nav-item.scss',\n shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n private hasSecondarySlot: boolean = false;\n private hasAnchorEle: boolean = false;\n private secondaryDiv: HTMLDivElement;\n private btn: HTMLButtonElement | HTMLAnchorElement;\n private fromHover: boolean;\n private animating: boolean = false;\n private waitHide: number;\n private waitShow: number;\n private globalNavEle?: HTMLNanoGlobalNavElement;\n\n @State() didOpen: boolean = false;\n @State() isInGlobalNav: boolean = false;\n @State() isInMenuDrawer: boolean = false;\n @State() isInMenu: boolean = false;\n @State() hasFocus: boolean = false;\n @Element() private el: HTMLNanoNavItemElement;\n\n /**\n * Href to link to\n */\n @Prop({ mutable: true }) href: string = null;\n\n /**\n * Target to use for links\n */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /**\n * Disable the nav item\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether a secondary menu should be or is currently open\n */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /**\n * Whether this menu item is currently 'selected'\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * Screen pixel width to activate the secondary menu\n */\n @Prop() secondaryActiveWidth: number = 0;\n\n /**\n * Secondary fallback function for when the secondary menu is no longer active.\n */\n @Prop() secondaryFallback = () => {};\n\n /**\n * Whether secondary menus should close on blur\n */\n @Prop() closeOnBlur: boolean = true;\n\n /**\n * Will show an indicator badge - only when placed in a nano-menu-draw\n */\n @Prop() notification: boolean = false;\n\n /**\n * Emitted when the nav item closes it's secondary navigation.\n */\n @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item opens it's secondary navigation.\n */\n @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to open it's secondary navigation.\n */\n @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item is about to close it's secondary navigation.\n */\n @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n /**\n * Emitted when the nav item loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the nav item has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Sets focus on the first button or anchor present. Use this method instead of the global\n * `element.focus()`.\n */\n @Method()\n async setFocus() {\n if (!this.btn) return;\n this.btn.focus();\n }\n\n /**\n * Public open watcher\n */\n @Watch('open')\n openChange() {\n this.open ? this.openSecondary() : this.closeSecondary();\n }\n\n /**\n * Internal open watcher\n */\n @Watch('didOpen')\n didOpenChange() {\n if (!this.hasSecondarySlot) return;\n\n if (!this.didOpen) {\n /* the secondadry panel is not closing via hover,\n remove blur events, add focus back to originating button */\n setTimeout(() => {\n if (\n !this.fromHover &&\n (!document.activeElement || document.activeElement === document.body)\n )\n this.btn.focus({ preventScroll: true });\n this.el.tabIndex = null;\n this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n }, 50);\n } else {\n /* the secondadry panel is not opening via hover,\n scroll content into view, focus on it and add blur events */\n if (!this.fromHover) {\n const panelio = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].boundingClientRect.top < 0) {\n this.secondaryDiv.scrollIntoView({\n behavior: 'smooth',\n });\n }\n panelio.disconnect();\n },\n { threshold: 1 }\n );\n panelio.observe(this.secondaryDiv);\n this.secondaryDiv.focus({ preventScroll: true });\n\n const focusableChild = getTabbableElements(this.secondaryDiv, true);\n if (focusableChild[0]) focusableChild[0].focus();\n\n this.el.tabIndex = -1;\n this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n }\n }\n }\n\n @Listen('click', { target: 'body' })\n @Listen('keyup', { target: 'body' })\n handleClose(e: MouseEvent | KeyboardEvent) {\n if (!this.didOpen || !this.hasSecondarySlot) return;\n if (!e.composedPath().some((el) => el === this.secondaryDiv))\n this.toggleSecondary();\n }\n\n private closeSecondary = async () => {\n if (!this.hasSecondarySlot || !this.didOpen) return;\n this.open = false;\n await displayTransition(this.secondaryDiv, 'open', false);\n this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = false;\n };\n\n private openSecondary = async () => {\n if (window.innerWidth < this.secondaryActiveWidth) {\n this.secondaryFallback.call(this);\n return;\n }\n\n if (!this.hasSecondarySlot || this.didOpen) return;\n this.open = true;\n await displayTransition(this.secondaryDiv, 'open', true);\n this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n this.didOpen = true;\n };\n\n private toggleSecondary = () => {\n if (!this.hasSecondarySlot) return;\n if (this.didOpen) this.closeSecondary();\n else this.openSecondary();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n // opens secondary panel when activated via hover\n if (this.href && !this.animating && this.hasSecondarySlot)\n this.openSecondary();\n this.nanoFocus.emit();\n };\n\n private handleHostBlur = () => {\n if (this.animating) return;\n\n // tab index is added to host when secondary panel opens\n // to return focus after secondary panel closes. Remove now if it was added\n this.el.removeAttribute('tabindex');\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n // direct host clicks to internal button\n private handleHostClick = (ev: MouseEvent) => {\n if (!this.hasAnchorEle) return;\n const foundlink = (ev.target as HTMLElement).closest('a, button');\n if (!foundlink) this.btn.click();\n };\n\n // handles secondary menu hover behaviour.\n private handleMouseEnter = async () => {\n if (\n !this.href ||\n this.animating ||\n !this.hasSecondarySlot ||\n (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n )\n return;\n\n // if there are sibling secondary panels currently open,\n // we need to wait before opening otherwise we get unwanted overlapping\n let timeToWait = 0;\n if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n timeToWait = 300;\n\n clearTimeout(this.waitHide);\n this.fromHover = true;\n this.animating = true;\n this.waitShow = window.setTimeout(\n async () => await this.openSecondary(),\n timeToWait\n );\n this.animating = false;\n };\n\n // handles secondary menu hover-out behaviour.\n private handleMouseLeave = () => {\n if (!this.href) return;\n clearTimeout(this.waitShow);\n this.fromHover = true;\n this.animating = true;\n\n // prevent closing immediately - makes navigating to items within more forgiving\n this.waitHide = window.setTimeout(\n async () => await this.closeSecondary(),\n 300\n );\n this.animating = false;\n };\n\n private handleClick = () => {\n this.fromHover = false;\n if (this.hasSecondarySlot) this.toggleSecondary();\n // else this.el.querySelector<HTMLElement>('*')?.click();\n };\n\n componentWillLoad() {\n const secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n this.hasSecondarySlot = !!secondaryEle;\n\n const link = getDirectChildren(this.el, 'a, button')[0] as\n | HTMLAnchorElement\n | HTMLButtonElement;\n this.hasAnchorEle = !!link;\n\n if (link) {\n this.href = (link as HTMLAnchorElement).href\n ? (link as HTMLAnchorElement).href\n : null;\n this.btn = link;\n if (this.hasSecondarySlot)\n this.btn.addEventListener('click', this.toggleSecondary);\n\n this.btn.addEventListener('focus', this.handleFocus);\n this.btn.addEventListener('blur', this.handleHostBlur);\n }\n }\n\n connectedCallback() {\n this.isInGlobalNav = false;\n this.isInMenuDrawer = false;\n this.globalNavEle = this.el.closest('nano-global-nav');\n\n this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n this.isInMenu = !!this.el.closest('nano-menu');\n this.isInGlobalNav =\n this.el.parentElement === this.globalNavEle ||\n !!this.el.closest('.global-nav');\n }\n\n render() {\n return (\n <Host\n class={{\n 'has-secondary': this.hasSecondarySlot,\n 'secondary-open': this.open,\n selected: this.selected,\n 'has-focus': this.hasFocus,\n disabled: this.disabled,\n 'nano-global-nav': this.isInGlobalNav,\n 'nano-menu-drawer': this.isInMenuDrawer,\n 'nano-menu': this.isInMenu,\n }}\n onBlur={this.handleHostBlur}\n dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n onClick={this.handleHostClick}\n role=\"menuitem\"\n >\n <div\n class={{\n 'nav-item': true,\n 'secondary-open': this.open,\n selected: this.selected,\n }}\n part=\"ctrl-wrapper\"\n >\n {this.href && !this.hasAnchorEle && !this.disabled && (\n <a\n part=\"ctrl ctrl--anchor\"\n target={this.target}\n ref={(a) => (this.btn = a)}\n href={this.href}\n onFocus={this.handleFocus}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </a>\n )}\n {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n <button\n part=\"ctrl ctrl--button\"\n ref={(btn) => (this.btn = btn)}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n disabled={this.disabled}\n class={{\n notification: this.notification,\n }}\n >\n <slot name=\"icon-start\" />\n <span class=\"text\">\n <slot />\n </span>\n <slot name=\"icon-end\" />\n </button>\n )}\n {this.hasAnchorEle && !this.disabled && (\n <div class=\"link\">\n <slot name=\"icon-start\" />\n <slot />\n <slot name=\"icon-end\" />\n </div>\n )}\n {this.hasSecondarySlot && !this.disabled && (\n <div\n class=\"secondary-menu\"\n ref={(div) => (this.secondaryDiv = div)}\n tabIndex={-1}\n >\n <div class=\"secondary-menu-content\" part=\"secondary-wrapper\">\n <slot name=\"secondary\" />\n </div>\n <div\n class=\"secondary-menu-mask\"\n onClick={this.closeSecondary}\n part=\"secondary-mask\"\n ></div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n @include formControlVars;\n\n position: relative;\n width: 100%;\n padding: 0 !important;\n font-family: $font-family-base;\n display: block;\n}\n\n:host(.nano-color) {\n --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n --multi-input-value-bg: var(--nano-color-tint-rgb);\n --multi-input-value-border: var(--nano-color-shade);\n --multi-input-value-text-color: var(--nano-color-contrast);\n\n color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n * {\n pointer-events: none !important;\n }\n}\n\nselect {\n display: none;\n}\n\n.select__native-input {\n @include text-inherit();\n\n padding: unset;\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n text-overflow: ellipsis;\n color: var(--input-text-color);\n display: inline-block;\n flex: 1;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n border: 0;\n outline: none;\n background: transparent;\n appearance: none;\n margin: 0;\n box-sizing: border-box;\n resize: none;\n overflow: hidden;\n cursor: default;\n line-height: 2.5em;\n\n .has-float-label & {\n line-height: 2.1em;\n min-height: 2.1em;\n padding-block-start: 1.4em;\n }\n\n &::selection {\n background: transparent;\n }\n\n &::-moz-selection {\n background: transparent;\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n font-family: inherit;\n font-style: var(--placeholder-font-style);\n font-weight: var(--placeholder-font-weight);\n opacity: var(--placeholder-opacity);\n line-height: inherit;\n min-height: initial;\n }\n\n &::-moz-placeholder {\n line-height: 2.8em;\n text-overflow: ellipsis;\n }\n\n &:-webkit-autofill {\n background-color: transparent;\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:invalid {\n box-shadow: none;\n }\n\n &::-ms-clear,\n &::-ms-reveal {\n display: none;\n }\n\n &.resizable {\n resize: vertical;\n overflow: auto;\n }\n\n .form-ctrl__textarea & {\n line-height: 1.5em;\n padding-block: var(--padding-top) var(--padding-bottom);\n white-space: pre-wrap;\n\n &::placeholder {\n line-height: 1.5em;\n }\n }\n\n .has-float-label.textarea & {\n padding-block-start: 1.8em;\n }\n\n :host(.masked) & {\n opacity: 0;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n }\n}\n\n.select__mask {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: 0;\n border-radius: var(--input-border-radius);\n pointer-events: none;\n line-height: 2.5em;\n min-height: 2.5em;\n}\n\n// multi stuff\n\n.select__multi {\n &-wrap {\n padding-block: 0 var(--padding-bottom);\n padding-inline: 0 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n overflow: hidden;\n align-items: flex-start;\n\n :host(.has-float-label) & {\n padding-block-start: 1em;\n }\n }\n\n &-input {\n @include text-inherit();\n\n padding-inline: var(--padding-start) var(--padding-end);\n padding-block: var(--padding-bottom) 0;\n min-width: 50px;\n width: 100%;\n max-height: 100%;\n appearance: none;\n border: 0;\n outline: none;\n display: inline-block;\n background: transparent;\n flex: 0;\n position: relative;\n box-sizing: border-box;\n line-height: calc(2.5em - var(--padding-bottom));\n height: calc(2.5em - var(--padding-bottom));\n\n &:last-child {\n flex: 1;\n }\n }\n\n &-value {\n margin-block: var(--padding-bottom) 0;\n margin-inline: var(--padding-start) -3px;\n background: rgba(var(--multi-input-value-bg), 0.8);\n color: var(--multi-input-value-text-color);\n border: 1px solid;\n border-color: var(--multi-input-value-border);\n padding: 0.35em 0.5em;\n max-width: 100%;\n display: flex;\n align-items: center;\n font-size: var(--input-font-size);\n letter-spacing: 1px;\n max-height: calc(2.5em - 8px);\n\n span {\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n overflow: hidden;\n line-height: 1;\n }\n }\n\n &-value-remove {\n @include background-position(center);\n\n padding-inline-start: 0.5em;\n margin: 0;\n color: inherit;\n border: 0;\n outline: none;\n background-color: transparent;\n background-repeat: no-repeat;\n appearance: none;\n display: flex;\n align-items: center;\n inset-block-start: 0;\n font-size: 1em;\n\n nano-icon {\n --color: var(--multi-input-value-text-color);\n }\n }\n}\n\n.form-ctrl__float-label {\n width: calc(100% - (1em + (var(--padding-start) * 2)));\n\n :host(.has-focus.has-multiple) & {\n transform: translateY(-110%);\n font-size: 0.8em;\n }\n\n :host(.has-value.has-multiple) & {\n transform: translateY(21%);\n inset-block-start: 0;\n }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n pointer-events: auto;\n}\n","import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n State,\n Watch,\n h,\n VNode,\n Listen,\n} from '@stencil/core';\n\nimport { getActiveElement } from '../../utils/active-element';\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounce, debounceEvent } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type {\n Color,\n SelectChangeEventDetail,\n InputChangeEventDetail,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n tag: 'nano-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class Select implements ComponentInterface {\n private nativeSelect?: HTMLSelectElement;\n private valueItems: Array<HTMLSpanElement> = [];\n private dragVal: string;\n private mo?: MutationObserver;\n private selectId = `nano-select-${selectIds++}`;\n private rtl: boolean = false;\n private onInit: boolean = true;\n private customError: string = '';\n\n private get inputCtrl() {\n return this._inputCtrl;\n }\n private set inputCtrl(input) {\n if (input === this._inputCtrl) return;\n this._inputCtrl = input;\n this.setDataListOpts();\n }\n private _inputCtrl?: HTMLInputElement;\n\n // we don't want these rendered eles decorated with @State\n // because that will cause re-renders. Use get/set to set datalist options\n private _selectWrap: HTMLElement;\n private get selectWrap() {\n return this._selectWrap;\n }\n private set selectWrap(ele: HTMLElement) {\n if (this._selectWrap === ele) return;\n this._selectWrap = ele;\n this.setDataListOpts();\n }\n\n private _datalist: HTMLNanoDatalistElement;\n private get datalist() {\n return this._datalist;\n }\n private set datalist(ele: HTMLNanoDatalistElement) {\n if (this._datalist === ele) return;\n this._datalist = ele;\n this.setDataListOpts();\n }\n\n constructor() {\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n }\n\n @State() currInsertIndex: number = -1;\n @State() showErrorMsg = false;\n @State() errorMessage: string = '';\n @State() hasFocus = false;\n @State() hasLabelSlot: boolean = false;\n @State() hasHelperSlot: boolean = false;\n @State() hasHelperEndSlot = false;\n @State() inputSearchVal: string = '';\n\n @Element() el!: HTMLNanoSelectElement;\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set.\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.nativeSelect) return '';\n return this.nativeSelect.validationMessage;\n }\n\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n */\n @Prop() autofocus = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * When should the field perform validation\n */\n @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n 'submitThenDirty';\n\n /**\n * Whether to show validation errors underneath input\n */\n @Prop({ reflect: true }) showInlineError = true;\n\n /**\n * String to place within a label element. Alternatively use the 'label' slot\n */\n @Prop() label!: string;\n\n /**\n * Visually hide the label - but make it accessible.\n */\n @Prop() hideLabel?: boolean = false;\n\n /**\n * Enable floating label behaviour. Will disable placeholder if set.\n */\n @Prop() floatLabel: boolean = false;\n\n /**\n * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n */\n @Prop() multiple?: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId + '-name';\n\n /**\n * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n */\n @Prop() placeholder?: string | null;\n\n /**\n * If `true`, the user cannot modify the value.\n */\n @Prop({ reflect: true }) readonly = false;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required = false;\n\n /**\n * The initial size of the control.\n */\n @Prop() size?: number;\n\n /**\n * Maximum number of options that can be selected when multiple is true\n */\n @Prop() max?: number;\n\n /**\n * Minimum number of options that can be selected when multiple is true\n */\n @Prop() min?: number;\n\n /**\n * The form element to associate the select with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * in multiple mode, allow users to enter their own values\n */\n @Prop() allowCustomValues: boolean = false;\n\n /**\n * The value of the select.\n */\n @Prop()\n get value() {\n return this._value;\n }\n set value(val: string | string[]) {\n if (typeof val === 'string') {\n if (this.multiple) this._value = val.split(',');\n else this._value = val;\n } else if (Array.isArray(val)) {\n if (this.multiple) this._value = val;\n else this._value = val[0];\n }\n }\n private _value: Array<string> | string = this.multiple ? [] : '';\n\n /**\n * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n * Regardless - reading `options` will return the current component options - slotted or otherwise\n */\n @Prop()\n get options(): Array<OptionInterface | string> {\n if (this._options.length) return this._options;\n\n if (!this.datalist || !this.datalist.activeOptions) return [];\n\n return this._eOptions.map((ao) => {\n const { value, selected, label, filterMeta } = ao;\n return { value, selected, label, filterMeta };\n });\n }\n set options(opts: Array<OptionInterface | string>) {\n this._options = opts.map((opt) => {\n if (typeof opt === 'string') return { value: opt, label: opt };\n else return opt;\n });\n }\n private _options: OptionInterface[] = [];\n @State() _eOptions: OptionInterface[] = [];\n\n /**\n * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n */\n @Prop() clearSelect = false;\n\n /**\n * Hide the native select element and cover with a value 'mask'.\n * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n */\n @Prop() mask = false;\n\n /**\n * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n */\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n }\n\n @Watch('required')\n @Watch('disabled')\n @Watch('min')\n @Watch('max')\n @Watch('readonly')\n protected shouldValidate() {\n if (this.onInit) return;\n if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n this.customValidate();\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n /**\n * Update the native select element when the value changes\n */\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('value')\n valueChanged() {\n this.customValidate();\n\n if (this.onInit) {\n if (this.multiple) this.currInsertIndex = this.value.length - 1;\n return;\n }\n requestAnimationFrame(() => {\n this.shouldValidate();\n this.nanoChange.emit({ value: this.value });\n });\n }\n\n /** nano-dropdown config options you can pass to the nested dropdown component */\n @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n @Watch('dropDownConfig')\n setDataListOpts() {\n if (!this.datalist || !this.selectWrap) return;\n\n this.datalist.input = this.inputCtrl;\n\n const currDWConfig = this.datalist.dropDownConfig || {};\n this.datalist.dropDownConfig = {\n ...currDWConfig,\n ...this.dropDownConfig,\n tetherTo: this.selectWrap,\n };\n }\n\n // Custom Events\n\n /**\n * Emitted when the value has changed.\n */\n @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select has been created.\n * @internal\n */\n @Event() nanoDidLoad!: EventEmitter<void>;\n\n /**\n * Emitted when the select has been removed.\n * @internal\n */\n @Event() nanoDidUnload!: EventEmitter<void>;\n\n /**\n * Emitted when a keyboard input occurred on a multiple=\"true\" input\n */\n @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n */\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public Methods\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n */\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this._invalid,\n errorMessage: this.nativeSelect.validationMessage,\n });\n }, 50);\n });\n }\n\n /**\n * Sets focus on the specified `nano-select`. Use this method instead of the global\n * `select.focus()`.\n */\n @Method()\n async setFocus() {\n if (!this.inputCtrl) return;\n this.inputCtrl.focus();\n setTimeout(() => this.inputCtrl.click(), 50);\n }\n\n /**\n * @returns the native `<select>` element used under the hood.\n */\n @Method()\n getSelectElement(): Promise<HTMLSelectElement> {\n return Promise.resolve(this.nativeSelect!);\n }\n\n /**\n * Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n */\n @Method()\n async showError(message: string) {\n if (this.nativeSelect) {\n this.customError = message;\n this.nativeSelect.setCustomValidity(message);\n this.showInlineValidation();\n }\n }\n\n /* Logic */\n\n private get valArray() {\n return typeof this.value === 'string'\n ? this.value.length\n ? [this.value]\n : []\n : this.value;\n }\n\n private isValidValues() {\n return this.valArray.find((val) =>\n (this.options as OptionInterface[]).find((opt) => opt.value === val)\n );\n }\n\n private customValidate = () => {\n if (!this.nativeSelect || !!this.customError) return;\n\n this.nativeSelect.setCustomValidity('');\n // add custom validations 'cos html5 validations are a bit rubbish on selects\n if (this.required && !this.valArray.length) {\n this.nativeSelect.setCustomValidity('Please fill in this field.');\n return true;\n }\n if (\n this.valArray.length &&\n !this.allowCustomValues &&\n !this.isValidValues()\n ) {\n this.nativeSelect.setCustomValidity(\n 'Please choose an item from this field.'\n );\n return true;\n }\n if (this.max && this.valArray.length > this.max) {\n this.nativeSelect.setCustomValidity(\n `Only up to ${this.max} values are allowed.`\n );\n return true;\n }\n if (this.min && this.valArray.length < this.min) {\n this.nativeSelect.setCustomValidity(\n `You must select a minimum of ${this.min} values.`\n );\n return true;\n }\n return false;\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this._invalid = false;\n this.showErrorMsg = false;\n this.errorMessage = '';\n\n if (!this.nativeSelect.validity.valid) {\n this.errorMessage = this.nativeSelect.validationMessage;\n this._invalid = true;\n this.showErrorMsg = true;\n }\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (this.showInlineError) ev.preventDefault();\n\n requestAnimationFrame(() => this.showInlineValidation(ev));\n };\n\n private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n e.preventDefault();\n\n if (!this.multiple) {\n this.value = e.detail.value;\n return;\n }\n if (this.value && this.value.length && this.value.includes(e.detail.value))\n return;\n if (this.max && this.value.length === this.max) return;\n\n this.currInsertIndex++;\n this.value = [\n ...this.value.slice(0, this.currInsertIndex),\n e.detail.value,\n ...this.value.slice(this.currInsertIndex),\n ];\n this.inputSearchVal = '';\n // this.selectWrap.clientWidth; // force reflow\n };\n\n private removeValue = (toFind?: string) => {\n if (!this.multiple || !this.value.length) return;\n\n if (!toFind) toFind = this.value[this.value.length - 1];\n this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n this.currInsertIndex--;\n // this.selectWrap.clientWidth; // force reflow\n this.setFocus();\n };\n\n private slotChangeObserver() {\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.el, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have label / helper content\n this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n }\n\n private getLabel(toFind: string) {\n const label = (this.options as OptionInterface[]).find((opt) => {\n return !opt.disabled && opt.value?.length && opt.value === toFind;\n });\n return label && label.label ? label.label : toFind;\n }\n\n /* Event handling */\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.el.closest('form');\n if (!form || e.target !== this.el.closest('form')) return;\n\n this.clearSelectValue();\n }\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 target: Element;\n\n requestAnimationFrame(() => {\n if (kev.key) {\n if (kev.key !== 'Tab') return;\n target = getActiveElement();\n } else target = e.target as Element;\n\n if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n this.onBlur();\n }\n });\n }\n\n private setOptions = () => {\n if (\n !this.datalist ||\n !this.datalist.activeOptions ||\n !this.datalist.activeOptions.length\n )\n return;\n\n this._eOptions = this.datalist.activeOptions.map((ao) => {\n const { value, selected, label, filterMeta } = ao;\n return { value, selected, label, filterMeta };\n });\n this.customValidate();\n };\n\n private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n if (!this.multiple || !this.hasFocus) return;\n\n if (!this.inputSearchVal) {\n let rm: HTMLSpanElement;\n\n switch (ev.key) {\n case 'Backspace':\n if (this.inputCtrl.previousElementSibling)\n rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value || null);\n break;\n\n case 'Delete':\n if (this.inputCtrl.nextElementSibling)\n rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n else break;\n\n this.removeValue(rm.dataset.value || null);\n break;\n\n case 'ArrowLeft':\n case 'ArrowRight':\n if (!this.value.length) break;\n\n if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n this.currInsertIndex--;\n if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n this.currInsertIndex++;\n\n setTimeout(() => {\n this.inputCtrl.focus();\n }, 20);\n ev.preventDefault();\n break;\n }\n }\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n\n requestAnimationFrame(() => {\n if (this.validateOn === 'dirty' && !this.hasFocus)\n this.showInlineValidation();\n });\n this.nanoBlur.emit();\n\n if (!this.allowCustomValues && this.multiple) {\n this.inputSearchVal = '';\n const event = new window.Event('change');\n this.inputCtrl.dispatchEvent(event);\n }\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private clearSelectValue = (ev?: Event) => {\n if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n if (this.multiple) {\n this.value = [];\n this.currInsertIndex = -1;\n } else this.value = '';\n\n this.inputCtrl.value = '';\n const event = new window.Event('change');\n this.inputCtrl.dispatchEvent(event);\n };\n\n private onClick = () => {\n this.setFocus();\n };\n\n /* Multi event handlers */\n\n private onDragStart = (ev: MouseEvent) => {\n const ele = ev.target as HTMLSpanElement;\n this.dragVal = ele.dataset.value;\n };\n\n private onDragEnd = (ev) => {\n this.dragVal = null;\n ev.preventDefault();\n };\n\n private onDragLeave = (ev: MouseEvent) => {\n const ele = ev.target as HTMLSpanElement;\n const spanVal: string =\n ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n if (\n !spanVal ||\n this.dragVal === spanVal ||\n !this.value.includes(this.dragVal)\n ) {\n ev.preventDefault();\n return;\n }\n\n const to = this.value.indexOf(spanVal);\n const from = this.value.indexOf(this.dragVal);\n const tmpArr = this.value as Array<string>;\n const tmpVal = tmpArr[to];\n\n tmpArr[to] = tmpArr[from];\n tmpArr[from] = tmpVal;\n this.value = [...tmpArr];\n };\n\n private onMultiInput = (ev) => {\n this.inputSearchVal = ev.target.value.trim();\n this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n };\n\n /* Stencil Component lifecycle hooks */\n\n connectedCallback() {\n this.debounceChanged();\n\n if (!Build.isBrowser) return;\n\n this.el.dispatchEvent(\n new CustomEvent('nanoDidLoad', {\n detail: this.el,\n })\n );\n }\n\n disconnectedCallback() {\n document.dispatchEvent(\n new CustomEvent('nanoDidUnload', {\n detail: this.el,\n })\n );\n\n if (!Build.isBrowser) return;\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n this.customValidate();\n this.setDataListOpts();\n requestAnimationFrame(() => (this.onInit = false));\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n render() {\n const labelId = this.selectId + '-lbl';\n const moreId =\n this.showInlineError || this.hasHelperSlot\n ? this.selectId + '-moreId'\n : '';\n const helperEndId = this.hasHelperEndSlot ? this.selectId + '-helper' : '';\n\n this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n this.valueItems = [];\n\n const compWrapOptions = (({\n el,\n floatLabel,\n label,\n errorMessage,\n showInlineError,\n hasHelperSlot,\n hasHelperEndSlot,\n hasLabelSlot,\n hideLabel,\n placeholder,\n rtl,\n }) => ({\n el,\n floatLabel,\n label,\n errorMessage,\n showInlineError,\n hasHelperSlot,\n hasHelperEndSlot,\n hasLabelSlot,\n hideLabel,\n placeholder,\n rtl,\n }))(this);\n const wrapOptions = {\n ...compWrapOptions,\n labelId,\n moreId,\n helperEndId,\n hasValue: !!this.value.length || !!this.inputSearchVal.length,\n controlId: this.selectId,\n };\n\n const controlOptions = (({ readonly, disabled }) => ({\n readonly,\n disabled,\n clearControl: this.clearSelect,\n }))(this);\n\n return (\n <Host\n type={this.multiple ? 'select-multiple' : 'select-one'}\n aria-disabled={this.disabled ? 'true' : null}\n class={{\n ...createColorClasses(this.color),\n 'has-value': !!this.value.length || !!this.inputSearchVal.length,\n 'has-focus': this.hasFocus,\n 'is-invalid': this.invalid,\n 'has-label': this.label !== null && !this.floatLabel,\n 'has-float-label': this.label !== null && this.floatLabel,\n rtl: this.rtl,\n 'has-multiple': this.multiple,\n 'has-clr-btn': this.clearSelect,\n masked: this.mask,\n }}\n >\n <FormControlWrap {...wrapOptions}>\n <FormControl\n {...controlOptions}\n onClearText={this.clearSelectValue}\n control={this.el}\n ref={(el) => (this.selectWrap = el)}\n endValueSlot={\n <slot name=\"down-arrow\">\n <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n </slot>\n }\n >\n {this.multiple && (\n <div class=\"select__multi-wrap select\">\n {this.multipleValues(labelId, moreId, helperEndId)}\n </div>\n )}\n {!this.multiple && [\n this.mask && (\n <div class=\"select__mask\">\n {this.getLabel(this.value as string)}\n </div>\n ),\n <input\n id={this.selectId}\n class=\"select__native-input\"\n ref={(input) => (this.inputCtrl = input)}\n aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n disabled={this.disabled}\n form={this.form}\n placeholder={this.placeholder}\n readOnly={true}\n required={this.required}\n value={this.getLabel(this.value as string)}\n onFocus={this.onFocus}\n />,\n ]}\n </FormControl>\n </FormControlWrap>\n {!this.readonly && !this.disabled && (\n <nano-datalist\n onNanoOptionsUpdated={this.setOptions}\n ref={(el) => (this.datalist = el)}\n selected={this.valArray}\n type={this.multiple ? 'selctMulti' : 'select'}\n onNanoSelect={this.setValue}\n onNanoDeselect={(e) => {\n e.preventDefault();\n this.removeValue(e.detail.value);\n }}\n options={this._options.length ? this._options : undefined}\n >\n {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n <nano-option\n slot=\"list-top\"\n value={this.inputSearchVal}\n selected={false}\n label={this.inputSearchVal}\n onNanoSelect={() => this.inputCtrl.focus()}\n >\n <span slot=\"check-icon\"></span>\n Add '{this.inputSearchVal}'\n </nano-option>\n )}\n <slot />\n </nano-datalist>\n )}\n\n <select\n id={this.selectId + '-hidden'}\n class=\"select__native-ctrl\"\n ref={(select) => (this.nativeSelect = select)}\n aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n disabled={this.disabled}\n form={this.form}\n multiple={this.multiple}\n name={this.name}\n required={this.required}\n onInvalid={this.handleInvalid}\n >\n {this.allowCustomValues &&\n this.valArray.map((val) => {\n return (\n <option value={val} selected={true}>\n {val}\n </option>\n );\n })}\n {!this.allowCustomValues &&\n this.options.map((opt: OptionInterface) => {\n return (\n <option\n value={opt.value}\n selected={this.valArray.includes(opt.value)}\n disabled={opt.disabled}\n label={opt.label}\n >\n {this.valArray.includes(opt.value)}\n </option>\n );\n })}\n </select>\n </Host>\n );\n }\n\n private multipleValues(\n labelId: string,\n moreId: string,\n helperEndId: string\n ): VNode | (VNode | VNode[])[] {\n const input: VNode = (\n <input\n class=\"select__multi-input\"\n id={this.selectId}\n ref={(input) => (this.inputCtrl = input)}\n readOnly={this.readonly}\n disabled={this.disabled}\n autoFocus={this.autofocus}\n autocomplete=\"off\"\n onKeyDown={this.handleDocumentKeyDown}\n onInput={this.onMultiInput}\n value={this.inputSearchVal}\n onTouchStart={this.onClick}\n onMouseDown={this.onClick}\n onFocus={this.onFocus}\n placeholder={\n this.placeholder && !this.value.length ? this.placeholder : ''\n }\n aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n />\n );\n if (!this.value.length) return input;\n\n return (this.value as Array<string>).map((val, i) => {\n let toReturn: VNode | VNode[] = (\n <span\n onDragStart={this.onDragStart}\n onDragLeave={this.onDragLeave}\n onDragEnd={this.onDragEnd}\n onDragOver={(e) => e.preventDefault()}\n draggable\n data-value={val}\n ref={(span) => this.valueItems.push(span)}\n class=\"select__multi-value\"\n >\n <span>{this.getLabel(val)}</span>\n <button\n class=\"select__multi-value-remove\"\n type=\"button\"\n tabindex=\"-1\"\n onTouchEnd={() => {\n this.removeValue(val);\n }}\n onMouseUp={() => {\n this.removeValue(val);\n }}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n </span>\n );\n if (i === 0 && this.currInsertIndex < 0)\n toReturn = [input, toReturn as VNode];\n else if (i === this.currInsertIndex)\n toReturn = [toReturn as VNode, input];\n return toReturn;\n });\n }\n}\n"]}

package/dist/nano-components/{p-46b348b7.entry.js → p-6cb77d5c.entry.js} RENAMED Viewed

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

package/dist/nano-components/{p-46b348b7.entry.js.map → p-6cb77d5c.entry.js.map} RENAMED Viewed

File without changes

package/dist/nano-components/{p-85cfb0af.entry.js → p-9a4297e1.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,h as t,F as n,a as l}from"./p-1fe12320.js";function a(e){if(!e)return"";return e.charAt(0).toUpperCase()+e.slice(1)}function r(e){if(!e)return undefined;return new Date(e).toLocaleDateString(undefined,{year:"numeric",month:"short",day:"numeric"})}function s(e=0,t="USD"){t=t?.toLocaleUpperCase()||"USD";return new Intl.NumberFormat("en-US",{style:"currency",currency:t}).format(e)}const o=class{constructor(t){e(this,t);this.order={checks:[{name:"Compliance",external_id:"CO",status:"complete",account_info:{name:"Jeongmin Song",email:"js2957@cornell.edu",address_line_1:"930 Campus Road",address_line_2:"Veterinary Medical Center C4 109",address_postcode:"14853",address_city:"Ithaca",address_region:"New York",address_country:"US"},individual_name_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},organization_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},checks:[{label:"Compliance check",external_id:"compliance_check",item_type:"pass/fail/escalate",answer:"pass"}],further_information:[],attachments:[],notes:[]}],orderId:"00886434",createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T16:02:29",status:"Processing",subStatus:null,currency:"USD",customerPaymentMethod:"CC-USD",paymentPlatform:"Shop",dataAreaId:"OXUS",defaultShippingWarehouse:null,deliveryContact:"Jeongmin Song",deliveryMode:null,deliveryName:"Cornell University",deliveryTerms:null,invoiceAccountNumber:"C038330",orderAccountNumber:"C038330",orderAccountName:"Cornell University",originalLeadTime:null,salesDate:"2022-12-09T15:57:50",salesName:"Cornell University",salesOrigin:"Shop",salesOriginName:"Main USD Store View",customerReference:"",purchaseOrder:null,additionalDocuments:[],total:860,shippingAmount:50,taxAmount:0,projectId:null,deliveryPhoneNumber:"+16072533722",invoicePhoneNumber:"+16072533722",quoteNumber:null,customerType:"N/A",invoiceAccountEmail:"js2957@cornell.edu",partnerReference:null,sentToD365:false,sentToD365Status:"unsent",orderAccountEmail:"js2957@cornell.edu",controllingAccountNumber:"C038330",controllingAccountEmail:"js2957@cornell.edu",deliveryAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},invoiceAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},shopOrderLines:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001",quantity:1,price:810,total:810,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"bundle",salesTag:"FLGExpSP",requestedShippingDate:null,discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku},includedItems:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001D",quantity:12,price:66,total:792,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0},{name:"Flongle Flow Cell Priming Kit",sku:"EXP-FSE001",quantity:1,price:18,total:18,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0}]},{name:"Carriage - Device shipment",sku:"FREIGHT",quantity:1,price:50,total:50,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"virtual",salesTag:null,requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku}}],orderLines:[],pickedItems:[],packedItems:[],trackingNumbers:[],trackingUpdates:[],ecoOrder:false,revenueOrder:false}}lineItemTotal(e){if(!e||!e.shopOrderLines?.length)return;let t=0;e.shopOrderLines.forEach((e=>{if(e.status!=="cancelled")t+=e.total}));return t}render(){return t(l,null,t("nano-table",{rowRender:{template:(e,l,s)=>[l.renderedRow,l.row.includedItems?.length?l.row.includedItems?.map((e=>t("tr",{class:"child-row"},t(s,{header:true},e.name),t(s,null,a(l.row.status||this.order.status)),t(s,null,a(e.sku)),t(s,null,a(e.salesTag)),t(s,null,r(e.requestedShippingDate))))):t(n,null)].flat(1)},columns:[{title:"Name",prop:"name",pinned:"start",rowHeader:true},{title:"Status",prop:"status",cellTemplate:(e,t)=>a(t.cellModel||this.order.status)},{title:"SKU",prop:"finalSku"},{title:"Sales tag",prop:"salesTag",cellTemplate:(e,t)=>t.cellModel||"None"},{title:"Requested ship date",prop:"requestedShippingDate",cellTemplate:(e,t)=>r(t.cellModel)||"N/A"},{title:"Quantity",prop:"quantity"},{title:"Unit price",prop:"price",cellTemplate:(e,t)=>s(t.cellModel,this.order.currency)},{title:"Discount %",prop:"discountPercentage",cellTemplate:(e,t)=>t.cellModel||0},{title:"Line value",prop:"total",cellTemplate:(e,t)=>s(t.cellModel,this.order.currency)}],rows:this.order.shopOrderLines,caption:`List of order line items found within order ${this.order.orderId}`,showFooter:true,footRender:{pinned:"bottom",template:()=>[t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Sub total:"),t("span",{class:"order-lines__total--num"},s(this.lineItemTotal(this.order),this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total order tax:"),t("span",{class:"order-lines__total--num"},s(this.order.taxAmount,this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total on order placement:"),t("span",{class:"order-lines__total--num"},s(this.order.total,this.order.currency)))))]}}))}};o.style=":host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }";export{o as nano_demo};
-//# sourceMappingURL=p-85cfb0af.entry.js.map
+import{r as e,h as t,F as n,a as l}from"./p-1fe12320.js";function a(e){if(!e)return"";return e.charAt(0).toUpperCase()+e.slice(1)}function r(e){if(!e)return undefined;return new Date(e).toLocaleDateString(undefined,{year:"numeric",month:"short",day:"numeric"})}function o(e=0,t="USD"){t=t?.toLocaleUpperCase()||"USD";return new Intl.NumberFormat("en-US",{style:"currency",currency:t}).format(e)}const s=class{constructor(t){e(this,t);this.order={checks:[{name:"Compliance",external_id:"CO",status:"complete",account_info:{name:"Jeongmin Song",email:"js2957@cornell.edu",address_line_1:"930 Campus Road",address_line_2:"Veterinary Medical Center C4 109",address_postcode:"14853",address_city:"Ithaca",address_region:"New York",address_country:"US"},individual_name_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},organization_compliance_information:{table:{names:[],addresses:[],match:false,false_positive:null}},checks:[{label:"Compliance check",external_id:"compliance_check",item_type:"pass/fail/escalate",answer:"pass"}],further_information:[],attachments:[],notes:[]}],orderId:"00886434",createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T16:02:29",status:"Processing",subStatus:null,currency:"USD",customerPaymentMethod:"CC-USD",paymentPlatform:"Shop",dataAreaId:"OXUS",defaultShippingWarehouse:null,deliveryContact:"Jeongmin Song",deliveryMode:null,deliveryName:"Cornell University",deliveryTerms:null,invoiceAccountNumber:"C038330",orderAccountNumber:"C038330",orderAccountName:"Cornell University",originalLeadTime:null,salesDate:"2022-12-09T15:57:50",salesName:"Cornell University",salesOrigin:"Shop",salesOriginName:"Main USD Store View",customerReference:"",purchaseOrder:null,additionalDocuments:[],total:860,shippingAmount:50,taxAmount:0,projectId:null,deliveryPhoneNumber:"+16072533722",invoicePhoneNumber:"+16072533722",quoteNumber:null,customerType:"N/A",invoiceAccountEmail:"js2957@cornell.edu",partnerReference:null,sentToD365:false,sentToD365Status:"unsent",orderAccountEmail:"js2957@cornell.edu",controllingAccountNumber:"C038330",controllingAccountEmail:"js2957@cornell.edu",deliveryAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},invoiceAddress:{street:["930 Campus Road, Veterinary Medical Center C4 109"],city:"Ithaca",postcode:"14853",region:"New York",regionCode:"NY",countryCode:"US"},shopOrderLines:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001",quantity:1,price:810,total:810,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"bundle",salesTag:"FLGExpSP",requestedShippingDate:null,discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku},includedItems:[{name:"Flongle Flow Cell (R9.4.1)",sku:"FLO-FLG001D",quantity:12,price:66,total:792,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"FLO-FLG001",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0},{name:"Flongle Flow Cell Priming Kit",sku:"EXP-FSE001",quantity:1,price:18,total:18,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"simple",salesTag:"FLGExpSP",requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0}]},{name:"Carriage - Device shipment",sku:"FREIGHT",quantity:1,price:50,total:50,createdAt:"2022-12-09T15:57:50",updatedAt:"2022-12-09T15:57:50",maskSku:"",productType:"virtual",salesTag:null,requestedShippingDate:"2022-12-27T00:00:00",discount:0,discountPercentage:0,get finalSku(){return this.maskSku||this.sku}}],orderLines:[],pickedItems:[],packedItems:[],trackingNumbers:[],trackingUpdates:[],ecoOrder:false,revenueOrder:false}}lineItemTotal(e){if(!e||!e.shopOrderLines?.length)return;let t=0;e.shopOrderLines.forEach((e=>{if(e.status!=="cancelled")t+=e.total}));return t}render(){return t(l,null,t("nano-table",{rowRender:{template:(e,l,o)=>[l.renderedRow,l.rowModel.includedItems?.length?l.rowModel.includedItems?.map((e=>t("tr",{class:"child-row"},t(o,{header:true},e.name),t(o,null,a(l.rowModel.status||this.order.status)),t(o,null,a(e.sku)),t(o,null,a(e.salesTag)),t(o,null,r(e.requestedShippingDate))))):t(n,null)].flat(1)},columns:[{title:"Name",prop:"name",pinned:"start",rowHeader:true,autoTooltip:true},{title:"Status",prop:"status",cellTemplate:(e,t)=>a(t.cellModel||this.order.status)},{title:"SKU",prop:"finalSku"},{title:"Sales tag",prop:"salesTag",cellTemplate:(e,t)=>t.cellModel||"None"},{title:"Requested ship date",prop:"requestedShippingDate",cellTemplate:(e,t)=>r(t.cellModel)||"N/A"},{title:"Quantity",prop:"quantity"},{title:"Unit price",prop:"price",cellTemplate:(e,t)=>o(t.cellModel,this.order.currency)},{title:"Discount %",prop:"discountPercentage",cellTemplate:(e,t)=>t.cellModel||0},{title:"Line value",prop:"total",cellTemplate:(e,t)=>o(t.cellModel,this.order.currency)}],rows:this.order.shopOrderLines,caption:`List of order line items found within order ${this.order.orderId}`,showFooter:true,footRender:{pinned:"bottom",template:()=>[t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Sub total:"),t("span",{class:"order-lines__total--num"},o(this.lineItemTotal(this.order),this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total order tax:"),t("span",{class:"order-lines__total--num"},o(this.order.taxAmount,this.order.currency))))),t("tr",null,t("td",{colSpan:6}," "),t("th",{scope:"row",class:"tbl__pin nano-tbl__pin--end",colSpan:3},t("div",{class:"nano-tbl__cell-content order-lines__total"},t("span",{class:"order-lines__total--label"},"Total on order placement:"),t("span",{class:"order-lines__total--num"},o(this.order.total,this.order.currency)))))]}}))}};s.style=":host {display: block}\n    .child-row {\n      opacity: .8;\n      font-style: italic;\n    }";export{s as nano_demo};
+//# sourceMappingURL=p-9a4297e1.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/demo/demo.tsx"],"names":["capitalise","value","charAt","toUpperCase","slice","mediumDate","date","undefined","Date","toLocaleDateString","year","month","day","currency","amount","currencyCode","toLocaleUpperCase","Intl","NumberFormat","style","format","Demo","[object Object]","hostRef","this","order","checks","name","external_id","status","account_info","email","address_line_1","address_line_2","address_postcode","address_city","address_region","address_country","individual_name_compliance_information","table","names","addresses","match","false_positive","organization_compliance_information","label","item_type","answer","further_information","attachments","notes","orderId","createdAt","updatedAt","subStatus","customerPaymentMethod","paymentPlatform","dataAreaId","defaultShippingWarehouse","deliveryContact","deliveryMode","deliveryName","deliveryTerms","invoiceAccountNumber","orderAccountNumber","orderAccountName","originalLeadTime","salesDate","salesName","salesOrigin","salesOriginName","customerReference","purchaseOrder","additionalDocuments","total","shippingAmount","taxAmount","projectId","deliveryPhoneNumber","invoicePhoneNumber","quoteNumber","customerType","invoiceAccountEmail","partnerReference","sentToD365","sentToD365Status","orderAccountEmail","controllingAccountNumber","controllingAccountEmail","deliveryAddress","street","city","postcode","region","regionCode","countryCode","invoiceAddress","shopOrderLines","sku","quantity","price","maskSku","productType","salesTag","requestedShippingDate","discount","discountPercentage","finalSku","includedItems","orderLines","pickedItems","packedItems","trackingNumbers","trackingUpdates","ecoOrder","revenueOrder","length","forEach","itm","h","Host","rowRender","template","_","c","TableCell","renderedRow","rowModel","map","item","class","header","Fragment","flat","columns","title","prop","pinned","rowHeader","autoTooltip","cellTemplate","cellModel","rows","caption","showFooter","footRender","colSpan","scope","lineItemTotal"],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() || 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku || this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order || !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status || this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={[\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'status',\n cellTemplate: (_, c) =>\n capitalise(c.cellModel || this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel || 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel || 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n ]}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"]}