@nanoporetech-digital/components 2.7.0 → 2.10.0

package/dist/nano-components/{p-730f60ea.entry.js → p-6ddb51e4.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as a,h as i,e as t,g as e}from"./p-ab5813a7.js";import{l as s,u as r}from"./p-1805d59a.js";import{M as n}from"./p-cb79d1ec.js";import{h as l}from"./p-8971a867.js";import{C as d}from"./p-5a0095f9.js";import"./p-b619500f.js";import"./p-9a385481.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-modal, 700)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--nano-spacing-xlarge, 24px));max-height:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-top:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transform:none;transform:none}.dialog--nodismiss .dialog__panel{-webkit-animation:cannotClose 0.25s ease-in-out 1;animation:cannotClose 0.25s ease-in-out 1}@-webkit-keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}.dialog__header{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:var(--width);width:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-transition:var(--nano-transition-fast, 0.1s) box-shadow;transition:var(--nano-transition-fast, 0.1s) box-shadow}.dialog--visible .dialog__header{min-width:auto}[stuck] .dialog__header{-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding:var(--header-padding-v) var(--header-padding-h)}.dialog .dialog__close-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding:0 var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding:0 var(--body-padding-h) var(--body-padding-v)}.dialog:not(.dialog--has-header) .dialog__body{padding-top:var(--body-padding-v)}.dialog__body ::slotted(*){max-width:100%}.dialog__body-wrap{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{width:100%;padding:var(--footer-padding-v) var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;top:1px}.dialog--visible .dialog__footer{min-width:auto}.dialog__footer ::slotted(button){margin-right:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);-webkit-transition:-webkit-box-shadow 100ms ease-in-out;transition:-webkit-box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let b=0;let c=class{constructor(i){o(this,i);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++b}`;this.willShow=false;this.willHide=false;this.addedTransEnd=false;this.isVisible=false;this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeMethod="url-hash";this.handleKeyDown=o=>{if(o.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const o=this.nanoRequestClose.emit();if(!o.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((o=>this.noDismiss=false),250)}};this.handleTransitionEnd=o=>{if(o.propertyName==="opacity"&&o.composedPath().find((o=>o===this.panel||o===this.overlay))){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")}}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.willShow){return}const o=this.nanoShow.emit();if(o.defaultPrevented){this.open=false;return}this.originalTrigger=document.activeElement;this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const o=this.nanoInitialFocus.emit();if(!o.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const o=this.nanoHide.emit();if(o.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){var o=Array.from(this.host.querySelectorAll("iframe,video"));o.forEach((o=>{if(o.tagName.toLowerCase()==="video")o.pause();else{const a=o.src;o.src=a}}))}connectedCallback(){this.modal=new n(this.host);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){r(this.host);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return i(t,{showing:this.isVisible?true:undefined},i("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown},i("div",{part:"overlay",class:"dialog__overlay",ref:o=>this.overlay=o,onClick:this.requestClose}),i("div",{ref:o=>this.panel=o,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},i("div",{class:"dialog__body-wrap"},!this.noHeader&&i("nano-sticker",null,i("header",{part:"header",class:"dialog__header"},i("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},i("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&i("nano-icon-button",{exportparts:"base:close-button",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),i("div",{part:"body",class:"dialog__body"},i("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&i("nano-sticker",{position:"bottom"},i("footer",{part:"footer",class:"dialog__footer"},i("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&i("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=h;export{c as nano_dialog};
-//# sourceMappingURL=p-730f60ea.entry.js.map
+import{r as i,c as o,h as a,e as t,g as e}from"./p-b5c33aff.js";import{l as s,u as r}from"./p-1805d59a.js";import{M as n}from"./p-cb79d1ec.js";import{h as l}from"./p-8971a867.js";import{C as d}from"./p-32f4516e.js";import"./p-b619500f.js";import"./p-9a385481.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-modal, 700)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--nano-spacing-xlarge, 24px));max-height:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-top:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transform:none;transform:none}.dialog--nodismiss .dialog__panel{-webkit-animation:cannotClose 0.25s ease-in-out 1;animation:cannotClose 0.25s ease-in-out 1}@-webkit-keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}.dialog__header{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:var(--width);width:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-transition:var(--nano-transition-fast, 0.1s) box-shadow;transition:var(--nano-transition-fast, 0.1s) box-shadow}.dialog--visible .dialog__header{min-width:auto}[stuck] .dialog__header{-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding:var(--header-padding-v) var(--header-padding-h)}.dialog .dialog__close-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding:0 var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding:0 var(--body-padding-h) var(--body-padding-v)}.dialog:not(.dialog--has-header) .dialog__body{padding-top:var(--body-padding-v)}.dialog__body ::slotted(*){max-width:100%}.dialog__body-wrap{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{width:100%;padding:var(--footer-padding-v) var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;top:1px}.dialog--visible .dialog__footer{min-width:auto}.dialog__footer ::slotted(button){margin-right:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);-webkit-transition:-webkit-box-shadow 100ms ease-in-out;transition:-webkit-box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";let b=0;let c=class{constructor(a){i(this,a);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.nanoInitialFocus=o(this,"nanoInitialFocus",7);this.nanoRequestClose=o(this,"nanoRequestClose",7);this.componentId=`dialog-${++b}`;this.willShow=false;this.willHide=false;this.addedTransEnd=false;this.isVisible=false;this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeMethod="url-hash";this.hoist=false;this.handleKeyDown=i=>{if(i.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const i=this.nanoRequestClose.emit();if(!i.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((i=>this.noDismiss=false),250)}};this.handleTransitionEnd=i=>{if(i.propertyName==="opacity"&&i.composedPath().find((i=>i===this.panel||i===this.overlay))){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")}}handleOpenChange(){this.open?this.show():this.hide()}handleHoistChange(){if(!this.hoist||document.body.children[0]===this.host)return;document.body.prepend(this.host)}async show(){if(this.willShow){return}const i=this.nanoShow.emit();if(i.defaultPrevented){this.open=false;return}this.originalTrigger=document.activeElement;this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const i=this.nanoInitialFocus.emit();if(!i.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const i=this.nanoHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}}stopVideos(){var i=Array.from(this.host.querySelectorAll("iframe,video"));i.forEach((i=>{if(i.tagName.toLowerCase()==="video")i.pause();else{const o=i.src;i.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){if(!this.panel)return;r(this.host);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return a(t,{showing:this.isVisible?true:undefined},a("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown},a("div",{part:"overlay",class:"dialog__overlay",ref:i=>this.overlay=i,onClick:this.requestClose}),a("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},a("div",{class:"dialog__body-wrap"},!this.noHeader&&a("nano-sticker",null,a("header",{part:"header",class:"dialog__header"},a("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},a("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&a("nano-icon-button",{exportparts:"base:close-button",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),a("div",{part:"body",class:"dialog__body"},a("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&a("nano-sticker",{position:"bottom"},a("footer",{part:"footer",class:"dialog__footer"},a("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&a("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};c.style=h;export{c as nano_dialog};
+//# sourceMappingURL=p-6ddb51e4.entry.js.map

package/dist/nano-components/p-6ddb51e4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","[object Object]","hostRef","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","noHeader","noFooter","noUserDismiss","storeMethod","hoist","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","show","document","body","children","prepend","nanoShow","originalTrigger","activeElement","modal","activate","lockBodyScrolling","addEventListener","nanoInitialFocus","focus","preventScroll","once","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","handleHoistChange","Modal","storeId","ComponentStore","init","removeEventListener","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to  #{map.get($colors, celsius)};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{map.get($colors, mediumgrey)};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{map.get($colors, blue)};\n * @prop --width: defaults to 31rem;\n */\n:host {\n  --border-radius: #{$layer-border-radius};\n  --content-background: #fafafa;\n  --footer-content: #{map.get($colors, lightgrey)};\n  --scrim-color: #{$layer-overlay-dark};\n  --box-shadow: #{$layer-shadow-large};\n  --close-button-color: #{map.get($colors, palegrey)};\n  --width: 60rem;\n  --tint-color: #{darken(map.get($colors, blue), 5%)};\n  --body-padding-v: #{$spacing-large};\n  --body-padding-h: #{$spacing-large};\n  --header-padding-v: #{$spacing-medium};\n  --header-padding-h: #{$spacing-large};\n  --footer-padding-v: #{$spacing-medium};\n  --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n  $self: &;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-modal};\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n\n  &__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - #{$spacing-xlarge});\n    max-height: calc(92% - #{$spacing-xlarge});\n    background-color: var(--content-background);\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transform: scale(0.8);\n    transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n\n    &:focus {\n      outline: none;\n    }\n\n    .dialog--with-ribbon & {\n      border-top: 5px solid var(--tint-color);\n    }\n\n    .dialog--open & {\n      display: flex;\n      opacity: 1;\n      transform: none;\n    }\n\n    .dialog--nodismiss & {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n\n  &__header {\n    flex: 0 0 auto;\n    display: flex;\n    min-width: var(--width);\n    width: 100%;\n    background-color: var(--content-background);\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    transition: #{$transition-xfast} box-shadow;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    [stuck] & {\n      box-shadow: #{$layer-shadow-medium};\n    }\n  }\n\n  &__title {\n    flex: 1 1 auto;\n    font-size: #{$fontsize-large};\n    line-height: 1.6;\n    padding: var(--header-padding-v) var(--header-padding-h);\n  }\n\n  & &__close-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{$fontsize-xlarge};\n    padding: 0 var(--header-padding-h);\n\n    --color: var(--close-button-color);\n  }\n\n  &__body {\n    padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n    .dialog:not(.dialog--has-header) & {\n      padding-top: var(--body-padding-v);\n    }\n\n    & ::slotted(*) {\n      max-width: 100%;\n    }\n\n    &-wrap {\n      flex: 1 1 auto;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: var(--border-radius);\n\n      .dialog:not(.dialog--has-header) & {\n        border-radius: 0 0 inherit inherit;\n      }\n\n      .dialog:not(.dialog--has-footer) & {\n        border-radius: inherit inherit 0 0;\n      }\n    }\n  }\n\n  &__footer {\n    width: 100%;\n    padding: var(--footer-padding-v) var(--footer-padding-h);\n    background: var(--footer-content);\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    position: relative;\n    top: 1px;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    ::slotted(button) {\n      margin-right: #{$spacing-small} !important;\n    }\n\n    .dialog:not(.dialog--has-footer) & {\n      display: none;\n    }\n  }\n\n  &__close-txt {\n    color: var(--tint-color);\n    border: none;\n    text-decoration: underline;\n    margin: 0;\n    text-underline-offset: 4px;\n    background-color: transparent;\n    font: inherit;\n    -webkit-box-align: center;\n    cursor: pointer;\n    font-size: #{$fontsize-small};\n    padding: 0.5rem;\n    border-radius: #{$border-radius-small};\n    transition: box-shadow 100ms ease-in-out;\n\n    &:focus {\n      outline: none;\n      box-shadow: #{$control-focus-style};\n    }\n  }\n\n  &__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--scrim-color);\n    opacity: 0;\n    transition: #{$transition-fast} opacity;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n\n    .dialog--open & {\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot } from '../../utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || document.body.children[0] === this.host) return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      this.host.addEventListener(\n        'nanoAfterShow',\n        () => {\n          const nanoInitialFocus = this.nanoInitialFocus.emit();\n          if (!nanoInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        },\n        { once: true }\n      );\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    if (!this.panel) return;\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-71bbb7ba.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{k as t,j as s,r as i,c as e,h as n,e as r,g as h}from"./p-b5c33aff.js";const a=(t,s,i)=>{const e=t.get(s);if(!e){t.set(s,[i])}else if(!e.includes(i)){e.push(i)}};const o=(t,s)=>{let i;return(...e)=>{if(i){clearTimeout(i)}i=setTimeout((()=>{i=0;t(...e)}),s)}};const u=t=>!("isConnected"in t)||t.isConnected;const c=o((t=>{for(let s of t.keys()){t.set(s,t.get(s).filter(u))}}),2e3);const l=()=>{if(typeof t!=="function"){return{}}const i=new Map;return{dispose:()=>i.clear(),get:s=>{const e=t();if(e){a(i,s,e)}},set:t=>{const e=i.get(t);if(e){i.set(t,e.filter(s))}c(i)},reset:()=>{i.forEach((t=>t.forEach(s)));c(i)}}};const f=(t,s=((t,s)=>t!==s))=>{let i=new Map(Object.entries(t!==null&&t!==void 0?t:{}));const e={dispose:[],get:[],set:[],reset:[]};const n=()=>{i=new Map(Object.entries(t!==null&&t!==void 0?t:{}));e.reset.forEach((t=>t()))};const r=()=>{e.dispose.forEach((t=>t()));n()};const h=t=>{e.get.forEach((s=>s(t)));return i.get(t)};const a=(t,n)=>{const r=i.get(t);if(s(n,r,t)){i.set(t,n);e.set.forEach((s=>s(t,n,r)))}};const o=typeof Proxy==="undefined"?{}:new Proxy(t,{get(t,s){return h(s)},ownKeys(t){return Array.from(i.keys())},getOwnPropertyDescriptor(){return{enumerable:true,configurable:true}},has(t,s){return i.has(s)},set(t,s,i){a(s,i);return true}});const u=(t,s)=>{e[t].push(s);return()=>{d(e[t],s)}};const c=(s,i)=>{const e=u("set",((t,e)=>{if(t===s){i(e)}}));const n=u("reset",(()=>i(t[s])));return()=>{e();n()}};const l=(...t)=>{const s=t.reduce(((t,s)=>{if(s.set){t.push(u("set",s.set))}if(s.get){t.push(u("get",s.get))}if(s.reset){t.push(u("reset",s.reset))}if(s.dispose){t.push(u("dispose",s.dispose))}return t}),[]);return()=>s.forEach((t=>t()))};const f=t=>{const s=i.get(t);e.set.forEach((i=>i(t,s,s)))};return{state:o,get:h,set:a,on:u,onChange:c,use:l,dispose:r,reset:n,forceUpdate:f}};const d=(t,s)=>{const i=t.indexOf(s);if(i>=0){t[i]=t[t.length-1];t.length--}};const m=(t,s)=>{const i=f(t,s);i.use(l());return i};let b=class{constructor(t){i(this,t);this.nanoPayloadChange=e(this,"nanoPayloadChange",7);this.nanoSubmit=e(this,"nanoSubmit",7);this.nanoInvalid=e(this,"nanoInvalid",7);this.submitted=false;this.fields=[];this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.handleStoreChange=async(t,s)=>{if(this.validateOn==="dirty"&&this.dirty){this.internalValidate=true;await this.validateAllFields();this._valid=this.activeForm.checkValidity();this.internalValidate=false}this.nanoPayloadChange.emit(this.store.state)};this.handleFieldChange=t=>{this._dirty=true;this.setFieldValue([t.target])};this.handleFormInvalid=async t=>{t.preventDefault();this._valid=false;if(this.internalValidate)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();if(this.validateOn==="submit"){this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid();this.nanoInvalid.emit()};this.handleSubmit=async t=>{t.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;await this.validateAllFields();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return}this.submitForm()}}userFormChange(){if(!!this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(this._activeForm)this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true);if(t)t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}validateOnChange(){this.fields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const s=t.closest("nano-checkbox-group");if(s)s.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}get dirty(){return this._dirty}get valid(){return this._valid}get payload(){return this.store.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.fields.forEach((async s=>{const i=t.find((t=>t.name===s.name));if(i){i.validityMessage=s.validityMessage.length?s.validityMessage:i.validityMessage;if(!i.fields.find((t=>t===s)))i.fields.push(s);if(i.valid&&s.invalid)i.valid=false;return}t.push({fields:[s],name:s.name,valid:!s.invalid,value:this.store.state[s.name],dirty:false,validityMessage:s.validityMessage})}));return t}attachSlotObserver(){if(!!this.mo)return;const t=this.mo=new MutationObserver((t=>{const s=this.host.querySelector("form");if(s!==this.activeForm)this.activeForm=s;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}setupFields(){let t=Array.from(this.host.querySelectorAll(`\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      `));t=t.filter((t=>!!t.name&&!!t.name.length));if(!t.filter((t=>!this.fields.includes(t))).length)return;this.fields=t;this.validateOnChange();this.setFieldValue(this.fields);this.nanoPayloadChange.emit(this.store.state)}setFieldValue(t){t.forEach((t=>{const s=t.name;if(!s.length)return;switch(t.tagName){case"NANO-CHECKBOX":let i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this.store.state[s]=i.value;else if(!i.checked&&i.value===this.store.state[s])this.store.state[s]=""}else if(this.fields.filter((t=>t.name===s&&t.tagName==="NANO-CHECKBOX")).length>1){const t=Array.isArray(this.store.state[s])?this.store.state[s]:[];if(i.checked){if(!this.store.state[s].includes(i.value)){this.store.state[s]=[...t,i.value]}}else{this.store.state[s]=t.filter((t=>t!==i.value))}}else this.store.state[s]=i.value;break;case"NANO-FILE-UPLOAD":this.store.state[s]=t.files;break;default:this.store.state[s]=t.value;break}}))}async validate(t,s){if(!this.validation)return;const i=this.validation(t,s,this.store.state);if(!i)return;await Promise.all(Object.entries(i).map((async([t,s])=>{const i=this.fields.find((s=>s.name===t));let e=i;if(i.tagName==="NANO-CHECKBOX"){const t=i.closest("nano-checkbox-group");e=t||i}if(e.validityMessage===s.msg&&s.valid)await this.setFieldError(e,"");else if(!s.valid){await this.setFieldError(e,s.msg)}})))}async setFieldError(t,s){if(t["showError"])await t.showError(s);else await t.setError(s)}async validateAllFields(){await Object.entries(this.store.state).reduce((async(t,[s,i])=>{await t;await this.validate(s,i)}),undefined)}scrollToFirstInvalid(){if(!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}connectedCallback(){this.userForm=this.host.querySelector("form")}componentDidLoad(){requestAnimationFrame((()=>{this.store=m({});this.setupFields();this.attachSlotObserver();this.store.on("set",((t,s)=>this.handleStoreChange(t,s)));this.host.addEventListener("nanoChange",this.handleFieldChange);this.host.addEventListener("submit",this.handleSubmit)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this.store.dispose();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("submit",this.handleSubmit);if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return n(r,null,this.userForm&&n("slot",null),!this.userForm&&n("form",{ref:t=>this.activeForm=t},n("slot",null)))}get host(){return h(this)}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"]}}};export{b as nano_field_validator};
+//# sourceMappingURL=p-71bbb7ba.entry.js.map

package/dist/nano-components/p-71bbb7ba.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@stencil/store/dist/index.mjs","src/components/field-validator/field-validator.tsx"],"names":["appendToMap","map","propName","value","items","get","set","includes","push","debounce","fn","ms","timeoutId","args","clearTimeout","setTimeout","isConnected","maybeElement","cleanupElements","key","keys","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","forEach","elms","createObservableMap","defaultState","shouldUpdate","a","b","states","Object","entries","handlers","cb","oldValue","state","Proxy","[object Object]","_","Array","from","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","reduce","subscription","unsub","array","item","index","indexOf","length","createStore","FieldValidator","hostRef","this","submitted","fields","internalValidate","validateOn","scrollToInvalid","_dirty","handleStoreChange","async","_key","_newVal","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","store","handleFieldChange","ev","setFieldValue","target","handleFormInvalid","preventDefault","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","userForm","_activeForm","form","removeEventListener","addEventListener","field","tagName","cbg","closest","valid","payload","showValidation","validationState","found","find","v","name","validityMessage","f","invalid","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","querySelectorAll","validateOnChange","fieldName","type","checked","currentArr","isArray","files","newVal","validation","res","Promise","all","o","validityTarget","msg","setFieldError","showError","setError","memo","validate","undefined","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","requestAnimationFrame","attachSlotObserver","disconnect","h","Host","ref"],"mappings":"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","sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(defaultState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        const unReset = on('reset', () => cb(defaultState[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\n\ntype NanoFormEles =\n  | HTMLNanoInputElement\n  | HTMLNanoCheckboxElement\n  | HTMLNanoSelectElement\n  | HTMLNanoDateInputElement\n  | HTMLNanoFileUploadElement;\ntype NanoEvent = CustomEvent & { target: NanoFormEles };\ninterface ValueStore {\n  [key: string]: any;\n}\n\ninterface ValidationState {\n  fields: NanoFormEles[];\n  valid: boolean;\n  validityMessage: string;\n  dirty: boolean;\n  name: string | number;\n  value: any;\n}\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n *\n * - Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() store: ObservableMap<ValueStore>;\n  @State() userForm: HTMLFormElement;\n  @State() submitted = false;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    if (this._activeForm)\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    if (form) form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private fields: NanoFormEles[] = [];\n  // annoyingly, whenever we attempt to checkValidty it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.fields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form payload as a reactive store. @readonly */\n  @Prop()\n  get payload() {\n    return this.store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop() get validationState(): ValidationState[] {\n    const validationState: ValidationState[] = [];\n\n    this.fields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === field.name);\n\n      if (found) {\n        found.validityMessage = field.validityMessage.length\n          ? field.validityMessage\n          : found.validityMessage;\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n        if (found.valid && field.invalid) found.valid = false;\n        return;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: field.name,\n        valid: !field.invalid,\n        value: this.store.state[field.name],\n        dirty: false,\n        validityMessage: field.validityMessage,\n      });\n    });\n    return validationState;\n  }\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let fields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(`\n        nano-input,\n        nano-select,\n        nano-file-upload,\n        nano-date-input,\n        nano-checkbox\n      `)\n    );\n    fields = fields.filter((f) => !!f.name && !!f.name.length);\n\n    // do we have any currently un-watched fields?\n    if (!fields.filter((f) => !this.fields.includes(f)).length) return;\n\n    // setup the initial store state / refresh on new fields\n    this.fields = fields;\n    this.validateOnChange();\n    this.setFieldValue(this.fields);\n    this.nanoPayloadChange.emit(this.store.state);\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private setFieldValue(fields: NanoFormEles[]) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (!fieldName.length) return;\n\n      switch (field.tagName) {\n        case 'NANO-CHECKBOX':\n          let cb = field as HTMLNanoCheckboxElement;\n          if (\n            cb.type === 'radio' ||\n            cb.type === 'segment' ||\n            cb.type === 'segment-pill'\n          ) {\n            if (cb.checked) this.store.state[fieldName] = cb.value;\n            else if (!cb.checked && cb.value === this.store.state[fieldName])\n              this.store.state[fieldName] = '';\n          } else if (\n            this.fields.filter(\n              (f) => f.name === fieldName && f.tagName === 'NANO-CHECKBOX'\n            ).length > 1\n          ) {\n            const currentArr = Array.isArray(this.store.state[fieldName])\n              ? this.store.state[fieldName]\n              : [];\n            if (cb.checked) {\n              if (!this.store.state[fieldName].includes(cb.value)) {\n                this.store.state[fieldName] = [...currentArr, cb.value];\n              }\n            } else {\n              this.store.state[fieldName] = currentArr.filter(\n                (v) => v !== cb.value\n              );\n            }\n          } else this.store.state[fieldName] = cb.value;\n          break;\n        case 'NANO-FILE-UPLOAD':\n          this.store.state[fieldName] = (\n            field as HTMLNanoFileUploadElement\n          ).files;\n          break;\n        default:\n          this.store.state[fieldName] = field.value;\n          break;\n      }\n    });\n  }\n\n  /** Checks for user defined validations */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this.store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must to coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([key, o]) => {\n        // switch on/off validation messages\n        const field = this.fields.find((f) => f.name === key);\n        let validityTarget: NanoFormEles | HTMLNanoCheckboxGroupElement = field;\n\n        if (field.tagName === 'NANO-CHECKBOX') {\n          const cbg = field.closest('nano-checkbox-group');\n          validityTarget = cbg || field;\n        }\n\n        // status is now valid - clear the error\n        if (validityTarget.validityMessage === o.msg && o.valid)\n          await this.setFieldError(validityTarget, '');\n        // status is invalid. Set the error\n        else if (!o.valid) {\n          await this.setFieldError(validityTarget, o.msg);\n        }\n      })\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement,\n    msg: string\n  ) {\n    if (field['showError'])\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    else await (field as HTMLNanoCheckboxElement).setError(msg);\n  }\n\n  /** Loops through all store entries and checks field validity */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this.store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /** Fired whenever store values change and potentially checks validity */\n  private handleStoreChange = async (_key: string | number, _newVal: any) => {\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this.store.state);\n  };\n\n  /** Handles field value changes and passes to store */\n  private handleFieldChange = (ev: NanoEvent) => {\n    this._dirty = true;\n    this.setFieldValue([ev.target]);\n  };\n\n  /** Handles default field validation events */\n  private handleFormInvalid = async (ev: Event) => {\n    ev.preventDefault();\n    this._valid = false;\n\n    if (this.internalValidate) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      this.internalValidate = true;\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /** stops default form submission, checks if valid, then submits manually  */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.store = createStore<ValueStore>({});\n\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.store.on('set', (key, value) => this.handleStoreChange(key, value));\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    this.store.dispose();\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-71e9fa33.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{h as l}from"./p-b5c33aff.js";const e=({label:e,hasLabelSlot:r,controlId:a,labelId:t,floatLabel:s,placeholder:o,hideLabel:c,hasValue:n,rtl:_,showCharCount:d,maxlength:m,charCount:i})=>{if(!e&&!r)return;if(s){return l("label",{class:"form-ctrl__float-label",htmlFor:a,id:t},e&&e,!e&&r&&l("slot",{name:"label"}),d&&l("span",{class:"form-ctrl__label-charcount"},m?` ${i}/${m}`:` ${i}`))}else{return l("label",{class:{"form-ctrl__label":true,"visually-hide":c},htmlFor:a,id:t},l("div",{class:"form-ctrl__label-wrap"},o&&n&&_&&l("span",{class:"form-ctrl__label-placeholder"},o," / "),l("span",{class:"form-ctrl__labeltext"},e&&e,!e&&r&&l("slot",{name:"label"})),o&&n&&!_&&l("span",{class:"form-ctrl__label-placeholder"}," / ",o)),d&&l("span",{class:"form-ctrl__label-charcount"},m?m-i+" left":i+" characters"))}};const r=(r,a)=>{const{rtl:t,floatLabel:s,label:o,moreId:c,helperEndId:n,type:_,hasHelperSlot:d,showInlineError:m,errorMessage:i,hasHelperEndSlot:f}=r;const h=f?"nano-resize-observe":"div";return l(h,{states:"350w has-enough-width",class:{"has-label":o!==null&&!s,"has-float-label":o!==null&&s,"has-helper-end":f,rtl:t,"form-ctrl":true}},l("div",{class:"form-ctrl__wrapper"},!s?e(Object.assign({},r)):"",l("div",{class:{"form-ctrl__input":true,"form-ctrl__textarea":_==="textarea"}},s&&e(Object.assign(Object.assign({},r),{rtl:t})),a),m||d?l("div",{class:"form-ctrl__more",id:c},!!m?l("div",{class:"form-ctrl__error","aria-live":"polite"},i):"",l("div",{class:"form-ctrl__helper"},l("slot",{name:"helper"}))):""),f?l("div",{class:"form-ctrl__helper-end",id:n},l("slot",{name:"helper-end"})):"")};const a=(e,r)=>{const{clearControl:a,onClearText:t,readonly:s,disabled:o,control:c,ref:n,endSlot:_,endValueSlot:d,startSlot:m}=e;const i=()=>{c.setFocus()};return l("div",{class:"form-ctrl__input-wrap",ref:l=>{if(n)n(l)}},l("span",{class:"form-ctrl__slot-start"},l("slot",{name:"start"}),m),r,a&&!s&&!o&&l("button",{type:"button",class:"icon form-ctrl__clear-btn",tabindex:"-1",onTouchStart:t,onMouseDown:t},l("nano-icon",{name:"light/times"})),l("span",{class:"form-ctrl__slot-value-end",onClick:i},l("slot",{name:"value-end"}),d),l("span",{class:"form-ctrl__slot-end"},l("slot",{name:"end"}),_))};export{r as F,a};
+//# sourceMappingURL=p-71e9fa33.js.map

package/dist/nano-components/p-71e9fa33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","form-ctrl__label","visually-hide","FormControlWrap","props","children","moreId","helperEndId","type","hasHelperSlot","showInlineError","errorMessage","hasHelperEndSlot","MainTag","states","has-label","has-float-label","has-helper-end","form-ctrl","Object","assign","form-ctrl__input","form-ctrl__textarea","aria-live","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  helperEndId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n  hasHelperEndSlot?: boolean;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`}\n          </span>\n        )}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    helperEndId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n    hasHelperEndSlot,\n  } = props;\n\n  const MainTag = hasHelperEndSlot ? 'nano-resize-observe' : 'div';\n\n  return (\n    <MainTag\n      states=\"350w has-enough-width\"\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        'has-helper-end': hasHelperEndSlot,\n        rtl,\n        'form-ctrl': true,\n      }}\n    >\n      <div class=\"form-ctrl__wrapper\">\n        {!floatLabel ? renderLabel({ ...props }) : ''}\n        <div\n          class={{\n            'form-ctrl__input': true,\n            'form-ctrl__textarea': type === 'textarea',\n          }}\n        >\n          {floatLabel && renderLabel({ ...props, rtl })}\n          {children}\n        </div>\n        {showInlineError || hasHelperSlot ? (\n          <div class=\"form-ctrl__more\" id={moreId}>\n            {!!showInlineError ? (\n              <div class=\"form-ctrl__error\" aria-live=\"polite\">\n                {errorMessage}\n              </div>\n            ) : (\n              ''\n            )}\n            <div class=\"form-ctrl__helper\">\n              <slot name=\"helper\" />\n            </div>\n          </div>\n        ) : (\n          ''\n        )}\n      </div>\n      {hasHelperEndSlot ? (\n        <div class=\"form-ctrl__helper-end\" id={helperEndId}>\n          <slot name=\"helper-end\" />\n        </div>\n      ) : (\n        ''\n      )}\n    </MainTag>\n  );\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/nano-components/p-72ed603c.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,s){function a(t){try{l(i.next(t))}catch(e){s(e)}}function r(t){try{l(i["throw"](t))}catch(e){s(e)}}function l(t){t.done?n(t.value):o(t.value).then(a,r)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,o&&(s=a[0]&2?o["return"]:a[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,a[1])).done)return s;if(o=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){n.label=a[1];break}if(a[0]===6&&n.label<s[1]){n.label=s[1];s=a;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(a);break}if(s[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(r){a=[6,r];o=0}finally{i=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,i=e.length,o=t.length;n<i;n++,o++)t[o]=e[n];return t};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-f48be9f5.system.js","./p-1c216ca4.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-1f2b5241.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,i,o,s,a,r,l,u,c,p;return{setters:[function(t){e=t.r;n=t.c;i=t.f;o=t.h;s=t.e;a=t.g},function(t){r=t.r},function(t){l=t.d},function(t){u=t.g},function(t){c=t.g},function(t){p=t.g}],execute:function(){var d=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function h(t){var e;if(t.id){e=document.querySelector("label[for='"+t.id+"']")}if(!e){e=t.closest("label")}return e}var f=0;var b=t("nano_datalist",function(){function t(t){var i=this;e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.nanoDeselect=n(this,"nanoDeselect",7);this.nanoOptionsUpdated=n(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId="nano-datalist-"+f++;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this.actvOptEles=[];this.canOpen=true;this.optionIds=[];this.selected=[];this._dropDownConfig={skidding:-1};this.options=[];this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.optSelected=function(t){t.stopPropagation();i.changeInputValue(t.detail);r((function(){return i.inputChange()}));if(i.type==="select")i.shouldOpen=false};this.handleShow=function(){return __awaiter(i,void 0,void 0,(function(){return __generator(this,(function(t){if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement();return[2]}))}))};this.inputClick=function(){i.shouldOpen=true;i.manageDropdownDisplay()};this.inputKeydown=function(t){var e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")i.shouldOpen=false;return}if(i.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||i.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=window.setTimeout((function(){i.typeToSelect="";i.typeToSelectTimeout=0}),750);i.typeToSelect+=t.key;i.setOptStartsWith()}return}i.shouldOpen=true;i.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key))i.shouldFocus=true};this.optionKeyDown=function(t){var e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")i.connectedInput.focus();return}var n=["Delete","Backspace"];if(i.type!=="select"&&(!i.exactMatch||n.includes(t.key))){i.connectedInput.focus()}};this.inputChange=l(this.inputChange.bind(this),50)}Object.defineProperty(t.prototype,"allOptEles",{get:function(){return this._allOptEles},set:function(t){var e=this;var n;this._allOptEles=t;if((n=this.connectedInput)===null||n===void 0?void 0:n.value)return;t.forEach((function(t){if(t.selected&&!e.selected.includes(t.value)){e.changeInputValue(t)}}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"dropDownConfig",{get:function(){return this._dropDownConfig},set:function(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeOptions",{get:function(){return this.allOptEles},enumerable:false,configurable:true});t.prototype.openWatcher=function(){var t=this;i((function(){t.nanoDropdown.open=t.open;t.connectedInput.setAttribute("aria-expanded",t.open.toString())}))};t.prototype.watchInputChange=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;return __generator(this,(function(n){switch(n.label){case 0:if(!(t=this.host.closest("nano-input")))return[3,2];this.isNanoInput=true;e=this;return[4,t.getInputElement()];case 1:e.connectedInput=n.sent();return[3,3];case 2:if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(this.input instanceof HTMLElement){this.connectedInput=this.input}n.label=3;case 3:return[2]}}))}))};t.prototype.manageSlotChangeListener=function(){var t=this;var e;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((e=this.options)===null||e===void 0?void 0:e.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}i((function(){var e;t.allOptEles=t.options.flatMap((function(e,n){if(e.value||e.label){var i=Object.assign(document.createElement("nano-option"),{label:e.label,value:e.value,ariaPosinset:n,ariaSetsize:t.options.length,selected:e.selected,id:t.listId+"-option-"+n,textContent:e.label?e.label:e.value,slot:"internal-opts"});t.host.append(i);return i}}));if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=__spreadArray([],t.allOptEles)}))}};t.prototype.watchTypeChange=function(){if(!this.connectedInput)return;var t={closeOnSelect:false};var e="both";var n=false;switch(this.type){case"selctMulti":break;case"select":e="list";n=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=n};t.prototype.manageInputEvents=function(t,e){var n=this;var o;if(!!e){var s=e.closest("nano-input");if(s){s.removeEventListener("nanoChange",this.inputChange)}e.removeEventListener("change",this.inputChange);e.removeEventListener("click",this.inputClick);e.removeEventListener("keydown",this.inputKeydown);e.removeEventListener("input",this.inputChange);this.inputLabel=null;i((function(){e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(!!t){var s=t.closest("nano-input");if(s){s.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((o=t===null||t===void 0?void 0:t.labels)===null||o===void 0?void 0:o.item(0))||h(t);i((function(){n.host.id=n.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",n.listId);t.setAttribute("aria-owns",n.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}};t.prototype.watchActvOptChange=function(){var t=this;var e;var n=0;var o=((e=this.connectedInput)===null||e===void 0?void 0:e.value)||"";var s=[];i((function(){t.allOptEles.forEach((function(e,i){if(t.actvOptEles.includes(e)){n++;e.setAttribute("aria-posinset",n+"");e.setAttribute("aria-setsize",t.actvOptEles.length+"");e.hidden=false;t.isSelected(e,o)}else{e.removeAttribute("aria-posinset");e.removeAttribute("aria-setsize");e.hidden=true;e.selected=false}e.id=t.listId+"-option-"+i;s.push(e.id)}));t.optionIds=s}))};t.prototype.manageCanOpen=function(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false};t.prototype.manageDropdownDisplay=function(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false};t.prototype.fireActiveOptsEvent=function(){this.nanoOptionsUpdated.emit(this.actvOptEles)};t.prototype.isSelected=function(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false};Object.defineProperty(t.prototype,"dropwdownOpen",{get:function(){if(!this.nanoDropdown||!this.open)return false;return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"exactMatch",{get:function(){var t=this;return this.allOptEles.find((function(e){return t.connectedInput.value===e.value}))},enumerable:false,configurable:true});t.prototype.changeInputValue=function(t){var e;var n;if(this.selected.includes(t.value)){this.selected=this.selected.filter((function(e){return e!==t.value}));n=this.nanoDeselect.emit(t)}else{this.selected=__spreadArray([],this.selected);n=this.nanoSelect.emit(t)}if(!n.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;var i=new window.Event("change");(e=this.connectedInput)===null||e===void 0?void 0:e.dispatchEvent(i)}};t.prototype.setOptStartsWith=function(){var t=this;var e=function(e){return e.toLowerCase().substring(0,t.typeToSelect.length)===t.typeToSelect};var n=this.allOptEles.find((function(t){return t.value.trim().length>0&&!t.disabled&&(e(t.textContent)||e(t.value)||e(t.label)||e(t.filterMeta))}));if(n)this.changeInputValue(n)};t.prototype.processSlottedContent=function(){var t=this;r((function(){var e;t.allOptEles=Array.from(t.host.querySelectorAll("nano-option"));t.hasNoResult=!!t.host.querySelector('[slot="no-result"]');if(((e=t.connectedInput)===null||e===void 0?void 0:e.value.length)&&t.type!=="select"){t.inputChange()}else t.actvOptEles=t.allOptEles}))};t.prototype.inputChange=function(){var t=this;if(this.disableFilter){this.actvOptEles=this.allOptEles;return}var e=this.connectedInput.value;var n=e.trim().toLowerCase();var i=false;var o=[];var s=function(t){return t.toLowerCase().indexOf(n)>-1};this.allOptEles.forEach((function(n){if((e===n.value||e===n.label)&&t.type!=="selctMulti"){n.selected=true;i=true}else t.isSelected(n,e)}));this.allOptEles.forEach((function(t){if(!n.length||i){o.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(s(t.textContent)||s(t.value)||s(t.label)||s(t.filterMeta))){o.push(t)}}));this.isFiltered=n.length&&!i;this.actvOptEles=o};t.prototype.connectedCallback=function(){this.watchInputChange()};t.prototype.componentDidLoad=function(){this.manageSlotChangeListener();this.openWatcher()};t.prototype.componentDidRender=function(){var t=this;setTimeout((function(){if(!t.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",t.host)}),500)};t.prototype.render=function(){var t=this;return o(s,{role:"listbox","aria-owns":this.optionIds.join(" "),"aria-label":"Select options from the list below"},o("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:function(e){return t.nanoDropdown=e},dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:function(e){return t.open=false}}),o("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:function(e){return t.listBox=e}},o("slot",{name:"list-top"}),!this.options.length&&o("slot",null),!!this.options.length&&o("slot",{name:"internal-opts"}),o("slot",{name:"list-bottom"})),o("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},o("slot",{name:"no-result"})),!!this.actvOptEles&&o("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}},enumerable:false,configurable:true});return t}());b.style=d;var g=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";var v=!!document.head.attachShadow;var m=t("nano_menu",function(){function t(t){var i=this;e(this,t);this.nanoFocus=n(this,"nanoFocus",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoSelect=n(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.type="menu";this.handleFocus=function(){i.setActiveFocusItem(i.selectedItem||i.getItems[0]);i._hasFocus=true;i.nanoFocus.emit()};this.handleClick=function(t){var e=t.target;var n=e.closest("nano-nav-item");if(n&&!n.disabled){i.nanoSelect.emit(n)}};this.handleKeyDown=function(t){clearTimeout(i.ignoreMouseTimeout);i.ignoreMouseTimeout=setTimeout((function(){return i.ignoreMouseEvents=false}),500);i.ignoreMouseEvents=true;switch(t.key){case" ":if(i.activeItem)i.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":var e=i.getItems;var n=i.activeItem;var o=e.indexOf(n);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){o++}else if(t.key==="ArrowUp"){o--}else if(t.key==="Home"||t.key==="PageUp"){o=0}else if(t.key==="End"||t.key==="PageDown"){o=e.length-1}if(o<0)o=e.length-1;if(o>e.length-1)o=0;i.setActiveFocusItem(e[o]);if(e[o])e[o].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(i.typeToSelectTimeout);i.typeToSelectTimeout=setTimeout((function(){return i.typeToSelect=""}),750);i.typeToSelect+=t.key;var e=i.getItems;for(var s=0,a=e;s<a.length;s++){var r=a[s];var l=r.shadowRoot.querySelector("slot:not([name])");var u=c(l).toLowerCase().trim();if(u.substring(0,i.typeToSelect.length)===i.typeToSelect){i.setActiveFocusItem(r);break}}}};this.handleMouseOver=function(t){var e=t.target;var n=e.closest("nano-nav-item")||e.closest("nano-option");if(n&&!i.ignoreMouseEvents){i.setActiveFocusItem(n)}}}Object.defineProperty(t.prototype,"hasFocus",{get:function(){return this._hasFocus},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true});return[2]}))}))};t.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur();return[2]}))}))};t.prototype.showActiveElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"});return[2]}))}))};t.prototype.resetActiveItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.getItems.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex","-1")}));return[2]}))}))};Object.defineProperty(t.prototype,"getItems",{get:function(){var t;var e=this.el.querySelectorAll("nano-nav-item.secondary-open");if(e.length){var n=e[e.length-1];t=Array.from(n.querySelectorAll("nano-nav-item, nano-option"))}else{t=u(this.el,"nano-nav-item, nano-option","slot")}return t.filter((function(t){return!t.disabled&&!t.hidden}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"activeItem",{get:function(){var t=p();return this.getItems.find((function(e){return e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedItem",{get:function(){return this.getItems.find((function(t){return t.selected}))},enumerable:false,configurable:true});t.prototype.setActiveFocusItem=function(t,e){if(e===void 0){e=true}return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(o){n=this.getItems;i=!t||t.disabled?n.find((function(t){return t.selected}))||n[0]:t;n.filter((function(t){return t.tagName.toLowerCase()==="nano-option"})).map((function(t){return t.setAttribute("tabindex",t===i?"0":"-1")}));if(!e)return[2];if(i){i.setFocus?i.setFocus():i.focus()}else this.menu.focus();return[2]}))}))};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var i;if(n.key){if(n.key!=="Tab")return;i=p()&&p().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((function(t){return t===e.el}));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}};t.prototype.render=function(){var t;var e=this;return o(s,{class:{legacy:!v}},o("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:function(t){return e.menu=t},part:"base",class:(t={menu:true},t["menu--"+this.type]=true,t["menu--has-focus"]=this.hasFocus,t),tabIndex:-1},o("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());m.style=g;var y=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";var w=0;var x=t("nano_option",function(){function t(t){e(this,t);this.nanoSelect=n(this,"nanoSelect",7);this.optId="nano-option-"+w++;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=l(this.handleClick.bind(this),5)}t.prototype.valueChanged=function(){if(!this.value||!this.value.length)this.value=this.labelContent};t.prototype.labelChanged=function(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value};t.prototype.handleKeyDown=function(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)};t.prototype.handleClick=function(){if(this.disabled)return;this.nanoSelect.emit(this.host)};Object.defineProperty(t.prototype,"labelContent",{get:function(){return u(this.host,"*:not([slot])",false).map((function(t){return t.textContent})).join(" ").trim()},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){this.valueChanged();this.labelChanged()};t.prototype.render=function(){return o(s,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},o("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},o("div",{part:"check-icon",class:"option__check"},o("slot",{name:"check-icon"},o("nano-icon",{name:"light/check","aria-hidden":"true"}))),o("div",{part:"start",class:"option__start"},o("slot",{name:"start"})),o("div",{part:"label",class:"option__label"},o("slot",null,this.label||this.value)),o("div",{part:"end",class:"option__end"},o("slot",{name:"end"}))))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"],label:["labelChanged"]}},enumerable:false,configurable:true});return t}());x.style=y}}}));
+//# sourceMappingURL=p-72ed603c.system.entry.js.map

package/dist/nano-components/p-72ed603c.system.entry.js.map

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

package/dist/nano-components/{p-c9d09839.entry.js → p-73985eda.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,h as s,g as e}from"./p-ab5813a7.js";import{P as o}from"./p-178c34e3.js";import{g as n}from"./p-74a7fc4f.js";import{a as r}from"./p-9a385481.js";import"./p-289aa03f.js";const a=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let h=0;let d=class{constructor(s){t(this,s);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(["ArrowDown","ArrowUp"," "].includes(t.key)){this.show();t.preventDefault();t.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()}}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();if(!t.target.parentElement)return;this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(t){var i;const s=n();if(t&&((i=t.composedPath())===null||i===void 0?void 0:i.length)){const i=t.composedPath().includes(this.containingElement);return!t.composedPath().includes(this.accessibleTrigger)&&i}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));t=i.map(r)[0]}else{t=r(this.tetherTo)}if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=t}}handleDocumentKeyDown(t){if(t.key==="Escape"){this.hide();return}if(t.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(t.key)){if(!this.open||this.focusEleInDropDwn(t))return;t.preventDefault();this.menu.setFocus();return}const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(t.type,t));return}}handleDocumentMouseDown(t){if(!this.focusEleInDropDwn(t)){this.hide();return}}createPopover(){if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:"dropdown__positioner"},s("div",{ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
-//# sourceMappingURL=p-c9d09839.entry.js.map
+import{r as t,c as i,h as s,g as e}from"./p-b5c33aff.js";import{P as o}from"./p-3de7735c.js";import{g as n}from"./p-74a7fc4f.js";import{a as r}from"./p-9a385481.js";import"./p-289aa03f.js";const a=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));display:-webkit-box;display:-ms-flexbox;display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-width:var(--min-width)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-width:var(--min-width);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";let h=0;let d=class{constructor(s){t(this,s);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7);this.dropdownId=`dropdown-${h++}`;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.didLoad=false;this.autoOpen=true;this.open=false;this.closeOnSelect=true;this.tetherTo=null;this.placement="bottom-start";this.distance=2;this.skidding=0;this.hoist=false;this.togglePanel=()=>{if(!this.autoOpen)return;this.open?this.hide():this.show()};this.handleTriggerKeyDown=t=>{if(["ArrowDown","ArrowUp"," "].includes(t.key)){this.show();t.preventDefault();t.stopPropagation();if(this.menu)this.menu.setFocus()}};this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()}}get menu(){return this.host.querySelector("nano-menu")}handleOpenChange(){if(this.ignoreOpenWatcher)return;this.open?this.show():this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}secondaryOpen(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(t){if(!t.detail.secondaryMenu)return;t.stopPropagation();if(!t.target.parentElement)return;this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"}handlePanelSelect(t){const i=t.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}}focusEleInDropDwn(t){var i;const s=n();if(t&&((i=t.composedPath())===null||i===void 0?void 0:i.length)){const i=t.composedPath().includes(this.containingElement);return!t.composedPath().includes(this.accessibleTrigger)&&i}return s&&s.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&s!==this.accessibleTrigger}updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));t=i.map(r)[0]}else{t=r(this.tetherTo)}if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=t}}handleDocumentKeyDown(t){if(t.key==="Escape"){this.hide();return}if(t.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(t.key)){if(!this.open||this.focusEleInDropDwn(t))return;t.preventDefault();this.menu.setFocus();return}const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(t.type,t));return}}handleDocumentMouseDown(t){if(!this.focusEleInDropDwn(t)){this.hide();return}}createPopover(){if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new o(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.hide();if(this.popover)this.popover.destroy()}render(){return s("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},s("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},s("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),s("div",{ref:t=>this.positioner=t,class:"dropdown__positioner"},s("div",{ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&s("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),s("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};d.style=a;export{d as nano_dropdown};
+//# sourceMappingURL=p-73985eda.entry.js.map

package/dist/nano-components/{p-58d7f10f.entry.js → p-76c903db.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as e,e as s,g as n}from"./p-ab5813a7.js";import{c as o,r}from"./p-289aa03f.js";import{d as h}from"./p-1da5f8df.js";function a(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const o=s.left+n.pageXOffset;const r=s.top+n.pageYOffset;const h=e.pageX-o;const a=e.pageY-r;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const d=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';let l=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();a(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);r((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);r((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);r((()=>this.shouldAnimate=true))}};this.handlePositionChange=h(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let o=s;let h=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const d=()=>{h+=1/e;o=a(h,s,n,t);if(i>s&&o>=i||i<s&&o<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=o;r(d)};this.shouldAnimate=false;this.isAnimating=true;r(d)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){r((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const o="auto";if(this.primary==="end"){i[t]=`${o} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${o}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
-//# sourceMappingURL=p-58d7f10f.entry.js.map
+import{r as i,c as t,h as e,e as s,g as n}from"./p-b5c33aff.js";import{c as o,r}from"./p-289aa03f.js";import{d as h}from"./p-1da5f8df.js";function a(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const o=s.left+n.pageXOffset;const r=s.top+n.pageYOffset;const h=e.pageX-o;const a=e.pageY-r;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const d=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';let l=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();a(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);r((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);r((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);r((()=>this.shouldAnimate=true))}};this.handlePositionChange=h(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let o=s;let h=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const d=()=>{h+=1/e;o=a(h,s,n,t);if(i>s&&o>=i||i<s&&o<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=o;r(d)};this.shouldAnimate=false;this.isAnimating=true;r(d)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){r((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const o="auto";if(this.primary==="end"){i[t]=`${o} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${o}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
+//# sourceMappingURL=p-76c903db.entry.js.map