@nanoporetech-digital/components 7.4.4 → 7.5.0

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as o,B as r,h as i}from"./index-815d3f98.js";import{d as s}from"./transitions-c09bd7f6.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=a;const d=class{constructor(o){t(this,o);this.nanoOpened=e(this,"nanoOpened",7);this.nanoClosed=e(this,"nanoClosed",7);this.nanoAfterOpened=e(this,"nanoAfterOpened",7);this.nanoAfterClosed=e(this,"nanoAfterClosed",7)}hasStartSlot;hasEndSlot;mo;stateChanging=false;bodyEl;detailsEl;headerEl;contentEl;cacheHeight;get host(){return o(this)}label="";open=false;disabled=false;noHandle=false;iconRotation=90;useCacheHeight=false;nanoOpened;nanoClosed;nanoAfterOpened;nanoAfterClosed;toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));setTimeout((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!r.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const e of t){if(e.type==="attributes"&&e.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{key:"d029baacc6b25b275585fd110244292df8565113",part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{key:"b89dd13ee05417c6e6d10d74b0657908d0219032",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{key:"4f61a025fb297cb9211c7b2c34658b6cd696a12d",part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{key:"c1febecba9cfe36955454d98e7b29449c7cf0324",part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{key:"3fbfde1832791ad82d1992671f7abb7506e88d6c",part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",{key:"1f21df1c212294735004d2e34abc19c554b617a1"}))))}static get watchers(){return{open:["toggleClick"]}}};d.style=n;export{d as nano_details};
+import{r as t,c as e,g as o,B as r,h as i}from"./index-3118109b.js";import{d as s}from"./transitions-c09bd7f6.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=a;const d=class{constructor(o){t(this,o);this.nanoOpened=e(this,"nanoOpened",7);this.nanoClosed=e(this,"nanoClosed",7);this.nanoAfterOpened=e(this,"nanoAfterOpened",7);this.nanoAfterClosed=e(this,"nanoAfterClosed",7)}hasStartSlot;hasEndSlot;mo;stateChanging=false;bodyEl;detailsEl;headerEl;contentEl;cacheHeight;get host(){return o(this)}label="";open=false;disabled=false;noHandle=false;iconRotation=90;useCacheHeight=false;nanoOpened;nanoClosed;nanoAfterOpened;nanoAfterClosed;toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));setTimeout((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!r.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const e of t){if(e.type==="attributes"&&e.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{key:"d029baacc6b25b275585fd110244292df8565113",part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{key:"b89dd13ee05417c6e6d10d74b0657908d0219032",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{key:"4f61a025fb297cb9211c7b2c34658b6cd696a12d",part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{key:"c1febecba9cfe36955454d98e7b29449c7cf0324",part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{key:"3fbfde1832791ad82d1992671f7abb7506e88d6c",part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",{key:"1f21df1c212294735004d2e34abc19c554b617a1"}))))}static get watchers(){return{open:["toggleClick"]}}};d.style=n;export{d as nano_details};
 //# sourceMappingURL=nano-details.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as a,c as o,g as i,h as e,a as t}from"./index-815d3f98.js";import{M as n}from"./modal-02828a39.js";import{l as s,u as r}from"./scroll-913c51a0.js";import{h as d}from"./slot-1cd90e53.js";import{C as l}from"./component-store-a0eb3fb6.js";import"./tabbable-44932eb7.js";import"./dom-3db2202b.js";import"./throttle-df960210.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--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, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--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:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);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-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end: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);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;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;inset:0 !important;background-color:var(--scrim-color);opacity:0;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}";const c=h;let b=0;const f=class{constructor(i){a(this,i);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)}componentId=`dialog-${++b}`;modal;willShow=false;willHide=false;originalTrigger;overlay;dialog;get panel(){return this._panel}set panel(a){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}a.addEventListener("transitionend",this.handleTransitionEnd);this._panel=a}_panel;get host(){return i(this)}noDismiss=false;hasFooter=false;hidden=true;showRibbon=true;open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}label;noHeader=false;noFooter=false;noUserDismiss=false;storeId;storeMethod="url-hash";hoist=false;handleHoistChange(){if("popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow){return}const a=this.nanoShow.emit();if(a.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.hidden=false;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const a=this.nanoHide.emit();if(a.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}r(this.host)}),300)}handleKeyDown=a=>{if(a.key==="Escape"){this.requestClose()}};requestClose=()=>{const a=this.nanoRequestClose.emit();if(!a.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};handleTransitionEnd=a=>{if(a.propertyName==="opacity"&&a.composedPath().find((a=>a===this.panel||a===this.overlay))){this.willShow=false;this.willHide=false;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit();if(!this.open){this.dialog.hidden=true;this.hidden=true}}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};stopVideos(){const a=Array.from(this.host.querySelectorAll("iframe,video"));a.forEach((a=>{if(a.tagName.toLowerCase()==="video")a.pause();else{const o=a.src;a.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"327adc7c947fac99e0a00e079ec558251d80a266"},e("div",{key:"4e782b64be0681b785e589f5ae5b52a9e9bd2897",part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},e("div",{key:"4cfa8d6ff444bc20e42a0946bd5a516db2fa43d2",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),e("div",{key:"8e9593b9dcaa64414a6d1d9427e10c41015a5dcf",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":!this.hidden?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},e("div",{key:"562360b58859223f106716867976375b4b6b957c",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"d6087985bfded2e52ab6338735863db986ffe385"},e("header",{key:"efa2a403e7fb7b1c2a57a9dd898238b4429f7c84",part:"header",class:"dialog__header"},e("span",{key:"6c9a2d665dfecb5ae3fc9093e6cb699201449fac",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"c5f6c366e8484f30dca2939cc0fc2febd9bfb752",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"8bd420a022b705e6d1edbf612aba9b29d8f32ce6",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"4dd4fb74f41493039cf35d75fb1d972d8499265c",part:"body",class:"dialog__body"},e("slot",{key:"b30cab20e47d601ea6263816efd9046300959ccd"})),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&e("nano-sticker",{key:"b20eea7258ea5fdb63e3dc6f35dc696bd497774c",position:"bottom"},e("footer",{key:"0bdbc42b440abf68fdb01630795bd869b804f71e",part:"footer",class:"dialog__footer"},e("slot",{key:"1c4cdb096b7010830a35a166edf6844b732d36bb",name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&e("button",{key:"83e320d838a48a6c4bd38f55d8d367ea1a9bbf40",class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=c;export{f as nano_dialog};
+import{r as a,c as o,g as i,h as e,a as t}from"./index-3118109b.js";import{M as n}from"./modal-02828a39.js";import{l as s,u as r}from"./scroll-f373a189.js";import{h as d}from"./slot-1cd90e53.js";import{C as l}from"./component-store-b798181b.js";import"./tabbable-44932eb7.js";import"./dom-d7f9f24c.js";import"./throttle-df960210.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--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, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--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:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);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-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end: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);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;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;inset:0 !important;background-color:var(--scrim-color);opacity:0;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}";const c=h;let b=0;const f=class{constructor(i){a(this,i);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)}componentId=`dialog-${++b}`;modal;willShow=false;willHide=false;originalTrigger;overlay;dialog;get panel(){return this._panel}set panel(a){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}a.addEventListener("transitionend",this.handleTransitionEnd);this._panel=a}_panel;get host(){return i(this)}noDismiss=false;hasFooter=false;hidden=true;showRibbon=true;open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}label;noHeader=false;noFooter=false;noUserDismiss=false;storeId;storeMethod="url-hash";hoist=false;handleHoistChange(){if("popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow){return}const a=this.nanoShow.emit();if(a.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.hidden=false;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const a=this.nanoHide.emit();if(a.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}r(this.host)}),300)}handleKeyDown=a=>{if(a.key==="Escape"){this.requestClose()}};requestClose=()=>{const a=this.nanoRequestClose.emit();if(!a.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};handleTransitionEnd=a=>{if(a.propertyName==="opacity"&&a.composedPath().find((a=>a===this.panel||a===this.overlay))){this.willShow=false;this.willHide=false;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit();if(!this.open){this.dialog.hidden=true;this.hidden=true}}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};stopVideos(){const a=Array.from(this.host.querySelectorAll("iframe,video"));a.forEach((a=>{if(a.tagName.toLowerCase()==="video")a.pause();else{const o=a.src;a.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"327adc7c947fac99e0a00e079ec558251d80a266"},e("div",{key:"4e782b64be0681b785e589f5ae5b52a9e9bd2897",part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},e("div",{key:"4cfa8d6ff444bc20e42a0946bd5a516db2fa43d2",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),e("div",{key:"8e9593b9dcaa64414a6d1d9427e10c41015a5dcf",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":!this.hidden?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},e("div",{key:"562360b58859223f106716867976375b4b6b957c",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"d6087985bfded2e52ab6338735863db986ffe385"},e("header",{key:"efa2a403e7fb7b1c2a57a9dd898238b4429f7c84",part:"header",class:"dialog__header"},e("span",{key:"6c9a2d665dfecb5ae3fc9093e6cb699201449fac",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"c5f6c366e8484f30dca2939cc0fc2febd9bfb752",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"8bd420a022b705e6d1edbf612aba9b29d8f32ce6",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"4dd4fb74f41493039cf35d75fb1d972d8499265c",part:"body",class:"dialog__body"},e("slot",{key:"b30cab20e47d601ea6263816efd9046300959ccd"})),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&e("nano-sticker",{key:"b20eea7258ea5fdb63e3dc6f35dc696bd497774c",position:"bottom"},e("footer",{key:"0bdbc42b440abf68fdb01630795bd869b804f71e",part:"footer",class:"dialog__footer"},e("slot",{key:"1c4cdb096b7010830a35a166edf6844b732d36bb",name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&e("button",{key:"83e320d838a48a6c4bd38f55d8d367ea1a9bbf40",class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=c;export{f as nano_dialog};
 //# sourceMappingURL=nano-dialog.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as a,g as r,h as t}from"./index-815d3f98.js";import{M as i}from"./modal-02828a39.js";import{l as n,u as o}from"./scroll-913c51a0.js";import{h as s}from"./slot-1cd90e53.js";import{w as d}from"./events-f38f3e59.js";import{C as l}from"./component-store-a0eb3fb6.js";import"./tabbable-44932eb7.js";import"./dom-3db2202b.js";import"./throttle-df960210.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel,.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const h=c;const f=class{constructor(r){e(this,r);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7)}get host(){return r(this)}originalTrigger;drawer;overlay;modal;get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}_panel;noDismiss=false;hasFooter;open=false;label;placement="end";contained=false;noHeader=false;storeId;storeMethod="url-hash";noUserDismiss=false;hoist=false;handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoHide;nanoAfterHide;nanoAfterShow;nanoInitialFocus;nanoRquestClose;async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();n(this.host)}if(this.open&&this.contained){this.modal.deactivate();o(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();n(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();o(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit()}};handleSlotChange=()=>{this.hasFooter=s(this.host,"footer")};connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){o(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();n(this.host)}}}render(){return t("div",{key:"db40a45412e0888b086030ff8401100acd1401d6",ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":s(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{key:"e4397f16c37768976c6397bf33d90a377ce71d13",ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{key:"43f932f004d2dd345654340cac30a02e6c766942",ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{key:"c98cd059190bc7fd97efd20456efaaced0a841b1",class:"drawer__main"},!this.noHeader&&t("nano-sticker",{key:"e14090df14f93c24a29d7f39f28d43f64906233b"},t("div",{key:"139e666f2f4010720536406c39ed5aa9ddcf3039",part:"header",class:"drawer__header"},t("h2",{key:"287eb7a12b2fb15fb025776cb06c400625c8ebef",part:"title",class:"drawer__title",id:"title"},t("slot",{key:"9b94e2f6e2db3790a72f8140b96ed0d58962bb3b",name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{key:"08d2c72a3ca0de60993f10d33c4b80fc7403a38b",part:"header-actions",class:"drawer__header-actions"},t("slot",{key:"139147108174ce790215e0d054891ea11b33b598",name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{key:"dfe7251a9123202701d63d88df25b33e8d3527e5",part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/xmark",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{key:"b18eaaff9d9ade8ad6326b092ceff45dedfece6e",part:"body",class:"drawer__body"},t("slot",{key:"444b9e8cfb60e0ea9a16e3fef50d1928aa7b716b"})),t("nano-sticker",{key:"817e9faa988eb7a86a3b59ca25e5bf4d7708b207",position:"bottom"},t("footer",{key:"7ffc8ceb33058570e9988e4e328665931ac5a305",part:"footer",class:"drawer__footer"},t("slot",{key:"0cc206a8cf95ce756a0633e53c5d8478a51fad53",name:"footer",onSlotchange:this.handleSlotChange}))))))}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};f.style=h;export{f as nano_drawer};
+import{r as e,c as a,g as r,h as t}from"./index-3118109b.js";import{M as i}from"./modal-02828a39.js";import{l as n,u as o}from"./scroll-f373a189.js";import{h as s}from"./slot-1cd90e53.js";import{w as d}from"./events-f38f3e59.js";import{C as l}from"./component-store-b798181b.js";import"./tabbable-44932eb7.js";import"./dom-d7f9f24c.js";import"./throttle-df960210.js";const c=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(calc(var(--nano-scroll-lock-size) * -1))}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const h=c;const f=class{constructor(r){e(this,r);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7)}get host(){return r(this)}originalTrigger;drawer;overlay;modal;get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}_panel;noDismiss=false;hasFooter;open=false;label;placement="end";contained=false;noHeader=false;storeId;storeMethod="url-hash";noUserDismiss=false;hoist=false;handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoHide;nanoAfterHide;nanoAfterShow;nanoInitialFocus;nanoRquestClose;async show(){if(this.open)return undefined;this.open=true;return d(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return d(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();n(this.host)}if(this.open&&this.contained){this.modal.deactivate();o(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();n(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();o(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit()}};handleSlotChange=()=>{this.hasFooter=s(this.host,"footer")};connectedCallback(){this.handleHoistChange();this.modal=new i(this.host)}disconnectedCallback(){o(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();n(this.host)}}}render(){return t("div",{key:"db40a45412e0888b086030ff8401100acd1401d6",ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":s(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},t("div",{key:"e4397f16c37768976c6397bf33d90a377ce71d13",ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),t("div",{key:"43f932f004d2dd345654340cac30a02e6c766942",ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},t("div",{key:"c98cd059190bc7fd97efd20456efaaced0a841b1",class:"drawer__main"},!this.noHeader&&t("nano-sticker",{key:"e14090df14f93c24a29d7f39f28d43f64906233b"},t("div",{key:"139e666f2f4010720536406c39ed5aa9ddcf3039",part:"header",class:"drawer__header"},t("h2",{key:"287eb7a12b2fb15fb025776cb06c400625c8ebef",part:"title",class:"drawer__title",id:"title"},t("slot",{key:"9b94e2f6e2db3790a72f8140b96ed0d58962bb3b",name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),t("div",{key:"08d2c72a3ca0de60993f10d33c4b80fc7403a38b",part:"header-actions",class:"drawer__header-actions"},t("slot",{key:"139147108174ce790215e0d054891ea11b33b598",name:"header-actions"}),!this.noUserDismiss&&t("nano-icon-button",{key:"dfe7251a9123202701d63d88df25b33e8d3527e5",part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/xmark",label:"Close",onClick:()=>this.requestClose("close-button")})))),t("div",{key:"b18eaaff9d9ade8ad6326b092ceff45dedfece6e",part:"body",class:"drawer__body"},t("slot",{key:"444b9e8cfb60e0ea9a16e3fef50d1928aa7b716b"})),t("nano-sticker",{key:"817e9faa988eb7a86a3b59ca25e5bf4d7708b207",position:"bottom"},t("footer",{key:"7ffc8ceb33058570e9988e4e328665931ac5a305",part:"footer",class:"drawer__footer"},t("slot",{key:"0cc206a8cf95ce756a0633e53c5d8478a51fad53",name:"footer",onSlotchange:this.handleSlotChange}))))))}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};f.style=h;export{f as nano_drawer};
 //# sourceMappingURL=nano-drawer.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["drawerCss","NanoDrawerStyle0","Drawer","originalTrigger","drawer","overlay","modal","panel","this","_panel","ele","removeEventListener","handleTransitionEnd","addEventListener","noDismiss","hasFooter","open","label","placement","contained","noHeader","storeId","storeMethod","noUserDismiss","hoist","handleHoistChange","Array","from","document","body","children","includes","host","prepend","nanoShow","nanoHide","nanoAfterHide","nanoAfterShow","nanoInitialFocus","nanoRquestClose","show","undefined","waitForEvent","hide","requestClose","source","nanoRequestClose","emit","defaultPrevented","setTimeout","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","handleOpenChange","addOpenListeners","activeElement","autoFocusTarget","querySelector","removeAttribute","hidden","requestAnimationFrame","focus","preventScroll","setAttribute","removeOpenListeners","trigger","handleDocumentKeyDown","event","key","isActive","stopImmediatePropagation","propertyName","composedPath","find","node","handleSlotChange","hasSlot","connectedCallback","Modal","disconnectedCallback","componentWillLoad","ComponentStore","init","componentDidLoad","render","h","ref","part","class","onClick","tabindex","role","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{tokens.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{tokens.$spacing-medium} #{tokens.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{tokens.$layer-shadow-xlarge};\n  --scrim-color: #{tokens.$layer-overlay-dark};\n  --header-button-color: #{map.get(tokens.$colors, palegrey)};\n  --footer-background: #{map.get(tokens.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{tokens.$spacing-large};\n  --body-spacing: #{tokens.$spacing-large};\n  --footer-spacing: #{tokens.$spacing-medium} #{tokens.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{tokens.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(tokens.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--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  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline: auto 0;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * 100%));\n  }\n\n  .drawer--start.drawer--open &,\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{tokens.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{tokens.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{tokens.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{tokens.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{tokens.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{tokens.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n  Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = 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  /** 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  /** 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 || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /**\n   * Shows the drawer.\n   * @returns a promise that resolves when the drawer has finished opening\n   */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /**\n   * Hides the drawer\n   * @returns a promise that resolves when the drawer has finished closing\n   */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\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      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      if (this.open) this.nanoAfterShow.emit();\n      else this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\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    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(ele) => (this.drawer = ele)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          [`drawer--${this.placement}`]: true,\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': hasSlot(this.host, 'footer'),\n          'drawer--has-header': !this.noHeader,\n          'drawer--nodismiss': this.noDismiss,\n        }}\n      >\n        <div\n          ref={(ele) => (this.overlay = ele)}\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          onClick={() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        />\n\n        <div\n          ref={(ele) => (this.panel = ele)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : undefined}\n          aria-labelledby={!this.noHeader ? 'title' : undefined}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer__main\">\n            {!this.noHeader && (\n              <nano-sticker>\n                <div part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                    <slot name=\"label\">\n                      {this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\" />\n\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        part=\"close-button\"\n                        exportparts=\"base:close-button__base\"\n                        class=\"drawer__close\"\n                        iconName=\"light/xmark\"\n                        label=\"Close\"\n                        onClick={() => this.requestClose('close-button')}\n                      />\n                    )}\n                  </div>\n                </div>\n              </nano-sticker>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <nano-sticker position=\"bottom\">\n              <footer part=\"footer\" class=\"drawer__footer\">\n                <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n              </footer>\n            </nano-sticker>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["drawerCss","NanoDrawerStyle0","Drawer","originalTrigger","drawer","overlay","modal","panel","this","_panel","ele","removeEventListener","handleTransitionEnd","addEventListener","noDismiss","hasFooter","open","label","placement","contained","noHeader","storeId","storeMethod","noUserDismiss","hoist","handleHoistChange","Array","from","document","body","children","includes","host","prepend","nanoShow","nanoHide","nanoAfterHide","nanoAfterShow","nanoInitialFocus","nanoRquestClose","show","undefined","waitForEvent","hide","requestClose","source","nanoRequestClose","emit","defaultPrevented","setTimeout","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","handleOpenChange","addOpenListeners","activeElement","autoFocusTarget","querySelector","removeAttribute","hidden","requestAnimationFrame","focus","preventScroll","setAttribute","removeOpenListeners","trigger","handleDocumentKeyDown","event","key","isActive","stopImmediatePropagation","propertyName","composedPath","find","node","handleSlotChange","hasSlot","connectedCallback","Modal","disconnectedCallback","componentWillLoad","ComponentStore","init","componentDidLoad","render","h","ref","part","class","onClick","tabindex","role","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{tokens.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{tokens.$spacing-medium} #{tokens.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{tokens.$layer-shadow-xlarge};\n  --scrim-color: #{tokens.$layer-overlay-dark};\n  --header-button-color: #{map.get(tokens.$colors, palegrey)};\n  --footer-background: #{map.get(tokens.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{tokens.$spacing-large};\n  --body-spacing: #{tokens.$spacing-large};\n  --footer-spacing: #{tokens.$spacing-medium} #{tokens.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{tokens.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(tokens.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--nodismiss & {\n    animation: cannotClose 0.25s ease-in-out 1;\n    // transform-origin: center center;\n\n    @keyframes cannotClose {\n      0% {\n        scale: 1;\n      }\n\n      50% {\n        scale: 1.08;\n      }\n\n      100% {\n        scale: 1;\n      }\n    }\n  }\n\n  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline: auto 0;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc((var(--dir) * 100%)));\n  }\n\n  .drawer--start.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(calc(var(--nano-scroll-lock-size) * -1));\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{tokens.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{tokens.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{tokens.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{tokens.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{tokens.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{tokens.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n  Method,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = 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  /** 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  /** 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 || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /**\n   * Shows the drawer.\n   * @returns a promise that resolves when the drawer has finished opening\n   */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /**\n   * Hides the drawer\n   * @returns a promise that resolves when the drawer has finished closing\n   */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\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      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      if (this.open) this.nanoAfterShow.emit();\n      else this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\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    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={(ele) => (this.drawer = ele)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          [`drawer--${this.placement}`]: true,\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': hasSlot(this.host, 'footer'),\n          'drawer--has-header': !this.noHeader,\n          'drawer--nodismiss': this.noDismiss,\n        }}\n      >\n        <div\n          ref={(ele) => (this.overlay = ele)}\n          part=\"overlay\"\n          class=\"drawer__overlay\"\n          onClick={() => this.requestClose('overlay')}\n          tabindex=\"-1\"\n        />\n\n        <div\n          ref={(ele) => (this.panel = ele)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : undefined}\n          aria-labelledby={!this.noHeader ? 'title' : undefined}\n          tabindex=\"0\"\n        >\n          <div class=\"drawer__main\">\n            {!this.noHeader && (\n              <nano-sticker>\n                <div part=\"header\" class=\"drawer__header\">\n                  <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                    {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                    <slot name=\"label\">\n                      {this.label.length > 0\n                        ? this.label\n                        : String.fromCharCode(65279)}\n                    </slot>\n                  </h2>\n                  <div part=\"header-actions\" class=\"drawer__header-actions\">\n                    <slot name=\"header-actions\" />\n\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        part=\"close-button\"\n                        exportparts=\"base:close-button__base\"\n                        class=\"drawer__close\"\n                        iconName=\"light/xmark\"\n                        label=\"Close\"\n                        onClick={() => this.requestClose('close-button')}\n                      />\n                    )}\n                  </div>\n                </div>\n              </nano-sticker>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <nano-sticker position=\"bottom\">\n              <footer part=\"footer\" class=\"drawer__footer\">\n                <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n              </footer>\n            </nano-sticker>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as i,g as t,h as o}from"./index-815d3f98.js";import{g as s}from"./active-element-a2502948.js";import{P as n}from"./popover-30ce6cac.js";import{a as r}from"./tabbable-44932eb7.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--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:auto;--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));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const h=a;let d=0;const l=class{constructor(t){e(this,t);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId=`dropdown-${d++}`;labelId=this.dropdownId+"-title";ignoreOpenWatcher=false;panel;popover;trigger;positioner;accessibleTrigger;didLoad=false;get menu(){return this.host.querySelector("nano-menu")}get host(){return t(this)}autoOpen=true;open=false;handleOpenChange(){if(this.ignoreOpenWatcher)return;if(this.open)this.show();else this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}closeOnSelect=true;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}placement="bottom-start";distance=2;skidding=0;hoist=false;handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"}handlePanelSelect(e){const i=e.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof this.positioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{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 e=this.nanoHide.emit();if(e.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()}setTimeout((()=>{if(!this.open&&typeof this.positioner?.hidePopover==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(e){const i=s();if(e&&e.composedPath()?.length){const i=e.composedPath().includes(this.containingElement);if(i)return i;return e.composedPath().includes(this.accessibleTrigger)}return i&&i.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&i!==this.accessibleTrigger}togglePanel=()=>{if(!this.autoOpen)return;if(this.open)this.hide();else this.show()};updateAccessibleTrigger(){if(!this.didLoad)return;let e;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=i.map(r)[0]}else{e=r(this.tetherTo)}if(e){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}}handleDocumentKeyDown(e){if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}const i=e.composedPath();if(this.menu&&i.length&&!i.find((e=>e!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}}handleDocumentMouseDown(e){if(!this.focusEleInDropDwn(e)){this.hide();return}}handleTriggerKeyDown=e=>{if(["ArrowDown","ArrowUp"," "].includes(e.key)){this.show();e.preventDefault();e.stopPropagation();if(this.menu)this.menu.setFocus()}};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(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(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return o("div",{key:"f0dcf88640005b4d22a9fe6fd3ca018f50318385",part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},o("span",{key:"2866728ece1140922bf0f8e53064a9e88e08fda9",part:"trigger",class:"dropdown__trigger",ref:e=>this.trigger=e,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},o("slot",{key:"7d8fa8199fbc5b56d9fc5c849499380a547f6c2c",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),o("div",{key:"99de891c3739835d718d9578396a0ec71a378c21",ref:e=>this.positioner=e,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},o("div",{key:"b41900de7cb4d4e759fad92c461c729a19398287",ref:e=>this.panel=e,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&o("span",{key:"71629df1e80ea0913cf842997e4fc2561ed1cf79",id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),o("slot",{key:"a6274c638813237b5202b7c29a9704c5e7ecb360"}))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};l.style=h;export{l as nano_dropdown};
+import{r as e,c as i,g as t,h as o}from"./index-3118109b.js";import{g as s}from"./active-element-a2502948.js";import{P as n}from"./popover-30ce6cac.js";import{a as r}from"./tabbable-44932eb7.js";const a=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--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:auto;--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));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const h=a;let d=0;const l=class{constructor(t){e(this,t);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId=`dropdown-${d++}`;labelId=this.dropdownId+"-title";ignoreOpenWatcher=false;panel;popover;trigger;positioner;accessibleTrigger;didLoad=false;get menu(){return this.host.querySelector("nano-menu")}get host(){return t(this)}autoOpen=true;open=false;handleOpenChange(){if(this.ignoreOpenWatcher)return;if(this.open)this.show();else this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}closeOnSelect=true;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}placement="bottom-start";distance=2;skidding=0;hoist=false;handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"}handlePanelSelect(e){const i=e.target;if(this.closeOnSelect&&i.tagName.toLowerCase()==="nano-menu")this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof this.positioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{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 e=this.nanoHide.emit();if(e.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()}setTimeout((()=>{if(!this.open&&typeof this.positioner?.hidePopover==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(e){const i=s();if(e&&e.composedPath()?.length){const i=e.composedPath().includes(this.containingElement);if(i)return i;return e.composedPath().includes(this.accessibleTrigger)}return i&&i.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&i!==this.accessibleTrigger}togglePanel=()=>{if(!this.autoOpen)return;if(this.open)this.hide();else this.show()};updateAccessibleTrigger(){if(!this.didLoad)return;let e;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=i.map(r)[0]}else{e=r(this.tetherTo)}if(e&&!e.getAttribute("aria-haspopup")){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}}handleDocumentKeyDown(e){if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}const i=e.composedPath();if(this.menu&&i.length&&!i.find((e=>e!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}}handleDocumentMouseDown(e){if(!this.focusEleInDropDwn(e)){this.hide();return}}handleTriggerKeyDown=e=>{if(["ArrowDown","ArrowUp"," "].includes(e.key)){this.show();e.preventDefault();e.stopPropagation();if(this.menu)this.menu.setFocus()}};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(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(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return o("div",{key:"12df84c2c810b737883ecade606afc7f2a668499",part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},o("span",{key:"8c7d099792ed9675b1968872a4241cb4a53882bd",part:"trigger",class:"dropdown__trigger",ref:e=>this.trigger=e,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},o("slot",{key:"4f2dcd66413968a15197421e077179b1c1467273",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),o("div",{key:"f9d8416faf7122a8003f7617c8002df15ff6d9d6",ref:e=>this.positioner=e,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},o("div",{key:"64e8f983b70e61cbab84f3f9ce812cda085ae2cd",ref:e=>this.panel=e,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&o("span",{key:"f6ac2f293047e43bb92940b93ddb58bffae07823",id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),o("slot",{key:"e4a3e354465a78c6c8645c8552dff8e81b413e2a"}))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};l.style=h;export{l as nano_dropdown};
 //# sourceMappingURL=nano-dropdown.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["dropdownCss","NanoDropdownStyle0","dropDownIds","Dropdown","dropdownId","labelId","this","ignoreOpenWatcher","panel","popover","trigger","positioner","accessibleTrigger","didLoad","menu","host","querySelector","autoOpen","open","handleOpenChange","show","hide","setAttribute","toString","updateAccessibleTrigger","closeOnSelect","containingElement","tetherTo","handleTetherToChange","createPopover","placement","distance","skidding","hoist","handlePopoverOptionsChange","setOptions","strategy","dialogTitle","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","eventType","secondaryOpen","ev","detail","secondaryMenu","stopPropagation","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","event","tagName","toLowerCase","emit","defaultPrevented","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","includes","closest","togglePanel","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","key","preventDefault","setFocus","ePath","find","el","dispatchEvent","KeyboardEvent","type","handleTriggerKeyDown","handleTriggerSlotChange","destroy","Popover","transitionElement","onAfterHide","onAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","getAttribute","undefined"],"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/layers' as tokens;\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{tokens.$layer-border-style}\n   * @prop --border-radius: Defaults to #{tokens.$layer-bg-color};\n   * @prop --background: Defaults to #{tokens.$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{tokens.$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{tokens.$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{tokens.$layer-border-style};\n  --border-radius: #{tokens.$layer-border-radius};\n  --background: #{tokens.$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{tokens.$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{tokens.$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (width <= 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include mx.visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../nav-item/nav-item-interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu');\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown 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    if (this.ignoreOpenWatcher) return;\n\n    if (this.open) this.show();\n    else this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      if (ddInPath) return ddInPath;\n      return e.composedPath().includes(this.accessibleTrigger);\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    if (this.open) this.hide();\n    else this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["dropdownCss","NanoDropdownStyle0","dropDownIds","Dropdown","dropdownId","labelId","this","ignoreOpenWatcher","panel","popover","trigger","positioner","accessibleTrigger","didLoad","menu","host","querySelector","autoOpen","open","handleOpenChange","show","hide","setAttribute","toString","updateAccessibleTrigger","closeOnSelect","containingElement","tetherTo","handleTetherToChange","createPopover","placement","distance","skidding","hoist","handlePopoverOptionsChange","setOptions","strategy","dialogTitle","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","eventType","secondaryOpen","ev","detail","secondaryMenu","stopPropagation","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","event","tagName","toLowerCase","emit","defaultPrevented","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","includes","closest","togglePanel","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","getAttribute","key","preventDefault","setFocus","ePath","find","el","dispatchEvent","KeyboardEvent","type","handleTriggerKeyDown","handleTriggerSlotChange","destroy","Popover","transitionElement","onAfterHide","onAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","part","id","class","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","undefined"],"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/layers' as tokens;\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{tokens.$layer-border-style}\n   * @prop --border-radius: Defaults to #{tokens.$layer-bg-color};\n   * @prop --background: Defaults to #{tokens.$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{tokens.$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{tokens.$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{tokens.$layer-border-style};\n  --border-radius: #{tokens.$layer-border-radius};\n  --background: #{tokens.$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{tokens.$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{tokens.$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (width <= 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include mx.visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport type { NavItemEventDetail } from '../nav-item/nav-item-interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector('nano-menu');\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown 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    if (this.ignoreOpenWatcher) return;\n\n    if (this.open) this.show();\n    else this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      if (ddInPath) return ddInPath;\n      return e.composedPath().includes(this.accessibleTrigger);\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    if (this.open) this.hide();\n    else this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger && !accessibleTrigger.getAttribute('aria-haspopup')) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div\n          ref={(el) => (this.positioner = el)}\n          class=\"dropdown__positioner\"\n          popover=\"manual\"\n          id={this.dropdownId + '-positioner'}\n        >\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role={\n              this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n            }\n            aria-modal={\n              this.host.getAttribute('role') === 'group' ? undefined : 'true'\n            }\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <span\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live={\n                  this.host.getAttribute('role') === 'group'\n                    ? undefined\n                    : 'polite'\n                }\n              >\n                {this.dialogTitle}\n              </span>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-field-validator.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,g as s,h as e,a as h}from"./index-815d3f98.js";import{c as a}from"./index-32d24a05.js";const r=class{constructor(s){t(this,s);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7)}get host(){return s(this)}submitted=false;userForm;userFormChange(){if(this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}_activeForm;mo;allFields=[];nanoFields;plainFields;nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;hasSetStore=false;internalValidate=false;validateOn="submitThenDirty";validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const i=t.closest("nano-checkbox-group");if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}scrollToInvalid=true;get dirty(){return this._dirty}_dirty=false;get valid(){return this._valid}_valid;get store(){return this._store}_store;get payload(){return this._store?.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let h;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){h=i;s.validityMessage=h.validityMessage.length?h.validityMessage:h.validityMessage;if(s.valid&&h.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let a;let r;if(i.checkValidity){e=i;this.internalValidate=true;a=e.checkValidity();this.internalValidate=false;r=e.validationMessage}else{h=i;a=!h.invalid;r=h.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:a,validityMessage:r})}));return t}extraFieldSelector="input, select, textarea";validation;async setStore(t){this.hasSetStore=true;Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t,i){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s)await this.setFieldError(s,i)}))).finally((()=>{this.scrollToFirstInvalid(i)}))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}async scrollToFirstInvalid(t=true){if(!t&&!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}nanoPayloadChange;nanoSubmit;nanoInvalid;attachSlotObserver(){if(this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields,true);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{const i=this.getName(t);if(!i.length||typeof this._store.state[i]==="undefined")return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const s=this.allFields.filter((i=>this.getName(t)===this.getName(i)));if(s[0].type==="radio"||s[0].type==="segment"||s[0].type==="segment-pill"){s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}else if(Array.isArray(this._store.state[i])){s.forEach((t=>{if(this._store.state[i]?.includes(t.value))t.checked=true;else t.checked=false}))}else{s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}return}if(t.tagName==="NANO-FILE-UPLOAD"){const s=t;if(!s.files?.length)s.files=this._store.state[i];return}t.value=this._store.state[i]}))}getValidityTarget(t){let i=t;if(t.tagName==="NANO-CHECKBOX"){const s=t.closest("nano-checkbox-group");i=s||t}return i}fieldsToStore(t,i=false){t.forEach((t=>{const s=this.getName(t);if(!s.length)return;if(!!this._store.state[s]&&this.hasSetStore&&i){return}if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this._store.state[s]=i.value}else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName==="NANO-CHECKBOX"||t.type==="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{if(i.checked)this._store.state[s]=i.value;else this._store.state[s]=""}return}if(t.tagName==="NANO-FILE-UPLOAD"){const i=t;if(!this.fileStateEqual(s,i))this._store.state[s]=i.files;return}this._store.state[s]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s));const h=this.getValidityTarget(e);if((h.validityMessage||h.validationMessage)===t&&i.valid){await this.setFieldError(h,"")}else if(!i.valid){await this.setFieldError(h,t)}})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){const s=this.getValidityTarget(t);if(s["showError"]){await s.showError(i)}else if(s["setError"])await s.setError(i);else s.setCustomValidity(i)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(s.type))){this.storeToFields([s])}else if(s&&(s.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(t,s)||s.tagName!=="NANO-FILE-UPLOAD"&&s.value!==i)){this.storeToFields([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)};handleFieldChange(t){if(!this.nanoFields?.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])}handlePlainFieldChange(t){if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])}handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;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.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid(false);this.nanoInvalid.emit()};async handleSubmit(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(false);return}this.submitForm()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=a({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return e(h,{key:"ccaa19e009870cacff9581f70c88883c55656549"},this.userForm&&e("slot",{key:"bee67c4db80dcc1575d201b98e0fddcb3717ba3c"}),!this.userForm&&e("form",{key:"0ec8b6448b2c15142fe0a3c6278c32761bccbc09",ref:t=>this.activeForm=t},e("slot",{key:"59076ca975855dbcc9d313be45329dac1323c177"})))}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{r as nano_field_validator};
+import{r as t,c as i,g as s,h as e,a as h}from"./index-3118109b.js";import{c as a}from"./index-d7a4a150.js";const r=class{constructor(s){t(this,s);this.nanoPayloadChange=i(this,"nanoPayloadChange",7);this.nanoSubmit=i(this,"nanoSubmit",7);this.nanoInvalid=i(this,"nanoInvalid",7)}get host(){return s(this)}submitted=false;userForm;userFormChange(){if(this.userForm)this.activeForm=this.userForm}get activeForm(){return this._activeForm}set activeForm(t){if(!t)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}t.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=t}_activeForm;mo;allFields=[];nanoFields;plainFields;nanoFieldSelector=`\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;hasSetStore=false;internalValidate=false;validateOn="submitThenDirty";validateOnChange(){this.nanoFields.forEach((t=>{if(t.tagName==="NANO-CHECKBOX"){const i=t.closest("nano-checkbox-group");if(i)i.validateOn=this.validateOn}else{t.validateOn=this.validateOn}}))}scrollToInvalid=true;get dirty(){return this._dirty}_dirty=false;get valid(){return this._valid}_valid;get store(){return this._store}_store;get payload(){return this._store?.state}get showValidation(){return this.validateOn==="dirty"&&this.dirty||this.submitted}get validationState(){const t=[];this.allFields.forEach((async i=>{const s=t.find((t=>t.name===this.getName(i)));let e;let h;if(s){if(i.validationMessage){e=i;s.validityMessage=e.validationMessage.length?e.validationMessage:s.validityMessage;this.internalValidate=true;if(s.valid&&!e.checkValidity())s.valid=false;this.internalValidate=false}else if(i.validityMessage){h=i;s.validityMessage=h.validityMessage.length?h.validityMessage:h.validityMessage;if(s.valid&&h.invalid)s.valid=false}if(!s.fields.find((t=>t===i)))s.fields.push(i)}let a;let r;if(i.checkValidity){e=i;this.internalValidate=true;a=e.checkValidity();this.internalValidate=false;r=e.validationMessage}else{h=i;a=!h.invalid;r=h.validityMessage}t.push({fields:[i],name:this.getName(i),value:this._store.state[this.getName(i)],dirty:false,valid:a,validityMessage:r})}));return t}extraFieldSelector="input, select, textarea";validation;async setStore(t){this.hasSetStore=true;Object.entries(t).forEach((([t,i])=>{this.store.state[t]=i}))}async setCustomValidity(t,i){return await Promise.all(Object.entries(t).map((async([t,i])=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s)await this.setFieldError(s,i)}))).finally((()=>{this.scrollToFirstInvalid(i)}))}async resetValidity(){return await Promise.all(this.allFields.map((async t=>await this.setFieldError(t,""))))}async scrollToFirstInvalid(t=true){if(!t&&!this.scrollToInvalid)return;setTimeout((()=>{const t=this.validationState.find((t=>!t.valid));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)}nanoPayloadChange;nanoSubmit;nanoInvalid;attachSlotObserver(){if(this.mo)return;const t=this.mo=new MutationObserver((t=>{const i=this.host.querySelector("form");if(i&&i!==this.activeForm)this.activeForm=i;this.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})}getName(t){return t.name||t.getAttribute("name")}setupFields(){let t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));let i=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((t=>!t.closest(this.nanoFieldSelector)));t=t.filter((t=>!!this.getName(t)&&!!this.getName(t).length));i=i.filter((t=>!!this.getName(t)&&!!this.getName(t).length));if(![...t,...i].filter((t=>!this.allFields.includes(t))).length)return;this.nanoFields=t;this.plainFields=i;this.allFields=[...t,...i];this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields,true);this.nanoPayloadChange.emit(this._store.state)}storeToFields(t){t.forEach((t=>{const i=this.getName(t);if(!i.length||typeof this._store.state[i]==="undefined")return;if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const s=this.allFields.filter((i=>this.getName(t)===this.getName(i)));if(s[0].type==="radio"||s[0].type==="segment"||s[0].type==="segment-pill"){s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}else if(Array.isArray(this._store.state[i])){s.forEach((t=>{if(this._store.state[i]?.includes(t.value))t.checked=true;else t.checked=false}))}else{s.forEach((t=>{if(this._store.state[i]===t.value)t.checked=true;else t.checked=false}))}return}if(t.tagName==="NANO-FILE-UPLOAD"){const s=t;if(!s.files?.length)s.files=this._store.state[i];return}t.value=this._store.state[i]}))}getValidityTarget(t){let i=t;if(t.tagName==="NANO-CHECKBOX"){const s=t.closest("nano-checkbox-group");i=s||t}return i}fieldsToStore(t,i=false){t.forEach((t=>{const s=this.getName(t);if(!s.length)return;if(!!this._store.state[s]&&this.hasSetStore&&i){return}if(t.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(t.type)){const i=t;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)this._store.state[s]=i.value}else if(this.allFields.filter((t=>this.getName(t)===s&&(t.tagName==="NANO-CHECKBOX"||t.type==="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{if(i.checked)this._store.state[s]=i.value;else this._store.state[s]=""}return}if(t.tagName==="NANO-FILE-UPLOAD"){const i=t;if(!this.fileStateEqual(s,i))this._store.state[s]=i.files;return}this._store.state[s]=t.value}))}fileStateEqual(t,i){return JSON.stringify(this._store.state[t])===JSON.stringify(i.files)||this._store.state[t]==i.files}async validate(t,i){if(!this.validation)return;const s=this.validation(t,i,this._store.state);if(!s)return;await Promise.all(Object.entries(s).map((async([t,i])=>i.fields.map((async s=>{const e=this.allFields.find((t=>this.getName(t)===s));const h=this.getValidityTarget(e);if((h.validityMessage||h.validationMessage)===t&&i.valid){await this.setFieldError(h,"")}else if(!i.valid){await this.setFieldError(h,t)}})))))}async validateAllFields(){await Object.entries(this._store.state).reduce((async(t,[i,s])=>{await t;await this.validate(i,s)}),undefined)}async setFieldError(t,i){const s=this.getValidityTarget(t);if(s["showError"]){await s.showError(i)}else if(s["setError"])await s.setError(i);else s.setCustomValidity(i)}submitForm(){const t=this.nanoSubmit.emit();if(t.defaultPrevented)return;this.activeForm.submit()}handleStoreChange=async(t,i)=>{const s=this.allFields.find((i=>this.getName(i)===t));if(s&&(s.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(s.type))){this.storeToFields([s])}else if(s&&(s.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(t,s)||s.tagName!=="NANO-FILE-UPLOAD"&&s.value!==i)){this.storeToFields([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)};handleFieldChange(t){if(!this.nanoFields?.includes(t.target))return;this._dirty=true;this.fieldsToStore([t.target])}handlePlainFieldChange(t){if(!this.plainFields.includes(t.target))return;this.fieldsToStore([t.target])}handleFormInvalid=async t=>{if(!this.plainFields.includes(t.target)){t.preventDefault()}this._valid=false;if(this.internalValidate)return;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.validateOn==="submit"){if(this._valid){this.submitForm();return}}this.scrollToFirstInvalid(false);this.nanoInvalid.emit()};async handleSubmit(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(false);return}this.submitForm()}connectedCallback(){this.userForm=this.host.querySelector("form");this._store=a({})}componentDidLoad(){requestAnimationFrame((()=>{this.setupFields();this.attachSlotObserver();this._store.on("set",this.handleStoreChange)}))}disconnectedCallback(){if(this.mo)this.mo.disconnect();this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}render(){return e(h,{key:"ccaa19e009870cacff9581f70c88883c55656549"},this.userForm&&e("slot",{key:"bee67c4db80dcc1575d201b98e0fddcb3717ba3c"}),!this.userForm&&e("form",{key:"0ec8b6448b2c15142fe0a3c6278c32761bccbc09",ref:t=>this.activeForm=t},e("slot",{key:"59076ca975855dbcc9d313be45329dac1323c177"})))}static get watchers(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}}};export{r as nano_field_validator};
 //# sourceMappingURL=nano-field-validator.entry.js.map