@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/nano-components/{p-8ef2363b.entry.js → p-6cd59e58.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,h as o,a as i,g as n}from"./p-1fe12320.js";import{g as r,a as s}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as l}from"./p-885b6950.js";import{C as b}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-4c6ef60b.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home"){i=0}else if(t.key==="End"){i=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}o[i].setFocus();if(["top"].includes(this.placement)){l(o[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const l=this.getAllActiveTabs;const b=l.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(l[b+t]){this.setActiveTab(l[b+t]);if(Math.abs(r)>Math.abs(s)){if(r>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){l(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const i=s(t,this.tabs);const n=i.top+this.nav.scrollTop;const r=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${n}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===o.panel));if(!i)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:o.panel});if(n.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();i.remove();this.nanoTabClose.emit({name:o.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();l(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=h;export{p as nano_tab_group};
-//# sourceMappingURL=p-8ef2363b.entry.js.map
+import{r as t,c as a,h as o,a as i,g as n}from"./p-1fe12320.js";import{g as r,a as s}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as l}from"./p-885b6950.js";import{C as b}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-167b9165.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:"transparent";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, var(--fade-transparency))), color-stop(rgba(0, 0, 0, var(--fade-transparency))), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, var(--fade-transparency))), to(rgba(0, 0, 0, var(--fade-transparency))));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + var(--tabs-padding-end) * 4);-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 2);mask-size:calc(100% + var(--tabs-padding-end) * 2)}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;-webkit-border-after:solid var(--indicator-size) var(--indicator-color);border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));-webkit-border-start:solid var(--indicator-size) var(--indicator-track-color);border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;-webkit-border-start:solid var(--indicator-size) var(--indicator-color);border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const o=this.getAllActiveTabs;let i=o.indexOf(a);if(t.key==="Home"){i=0}else if(t.key==="End"){i=o.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){i=Math.max(0,i-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){i=Math.min(o.length-1,i+1)}o[i].setFocus();if(["top"].includes(this.placement)){l(o[i],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const i=a.pageY-this.initialTouchY;const n=70;const r=this.initialTouchX-a.clientX;const s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=n&&Math.abs(i)<=n;const l=this.getAllActiveTabs;const b=l.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(l[b+t]){this.setActiveTab(l[b+t]);if(Math.abs(r)>Math.abs(s)){if(r>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(["top"].includes(this.placement)){l(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const o=a.find((a=>a.name===t.panel));if(o){t.setAttribute("aria-controls",o.getAttribute("id"));o.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const i=s(t,this.tabs);const n=i.top+this.nav.scrollTop;const r=i.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${n}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const i=this.getAllPanels.find((t=>t.name===o.panel));if(!i)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:o.panel});if(n.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();i.remove();this.nanoTabClose.emit({name:o.panel})}componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();l(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return o(i,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":true,"nano-tab-group--top":this.placement==="top","nano-tab-group--start":this.placement==="start","nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&o("button",{class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return n(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=h;export{p as nano_tab_group};
+//# sourceMappingURL=p-6cd59e58.entry.js.map

package/dist/nano-components/{p-687350a5.entry.js → p-701e8ebf.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as o,c as n,f as t,h as i,a as r,g as e}from"./p-1fe12320.js";import{g as s}from"./p-7b3638b7.js";import{d as a}from"./p-9746b0a5.js";const c='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach((o=>{o.setError("");if(this.min&&t.length<this.min){o.setError(`You must select a minimum of ${this.min} values.`,this.showErrorMsg);r=true}if(this.max&&t.length>this.max){o.setError(`Only up to ${this.max} values are allowed.`,this.showErrorMsg);r=true}}));return r}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){if(!!this.mo)return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return i(r,{...this.checkboxTypes},i("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},i("legend",{class:"nanogroupcb__legend",id:o},this.legend),i("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},i("slot",null)),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?i("div",{class:"nanogroupcb__error"},this.errorMessage):"",i("div",{class:"nanogroupcb__help"},i("slot",{name:"helper"})))))}get host(){return e(this)}static get watchers(){return{min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
-//# sourceMappingURL=p-687350a5.entry.js.map
+import{r as o,c as n,f as t,h as i,a as r,g as s}from"./p-1fe12320.js";import{g as e}from"./p-7b3638b7.js";import{d as a}from"./p-9746b0a5.js";const c='.sc-nano-checkbox-group-h{box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{box-sizing:border-box}[hidden].sc-nano-checkbox-group{display:none !important}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:6px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:6px;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1.5;white-space:normal;display:block;width:100%}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;-webkit-margin-before:calc(var(--label-padding) - var(--control-margin-bottom));margin-block-start:calc(var(--label-padding) - var(--control-margin-bottom));-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--label-padding);margin-block-end:var(--label-padding);-webkit-margin-start:3px;margin-inline-start:3px;position:relative}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{inset-block-start:0;inset-inline-start:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-inline:var(--control-margin-start) var(--control-margin-end);margin-block:var(--control-margin-top) var(--control-margin-bottom)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';const h=class{constructor(t){o(this,t);this.nanoValidate=n(this,"nanoValidate",7);this.grpId=`nano-checkbox-group-${l++}`;this.handleInvalid=o=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(!!this.showInlineError)o.preventDefault();this.showInlineValidation(o)};this.showInlineValidation=o=>{if(!this.nativeCbs||!this.nativeCbs.length)return;if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.showErrorMsg=false;this._invalid=false;this.nativeCbs.forEach(((o,n)=>{if(!o.validity.valid){this.errorMessage=o.validationMessage;this.showErrorMsg=true;this._invalid=true}}));this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o})};this.checkboxes=undefined;this.nativeCbs=undefined;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this._invalid=false}get invalid(){return this._invalid}get validityMessage(){return this.errorMessage}async reportValidity(o){return new Promise((n=>{if(o){this.customValidate();this.showInlineValidation()}setTimeout((()=>{n({isValid:!this.invalid,errorMessage:this.errorMessage})}),50)}))}async showError(o,n){let t;if(n)t=this.checkboxes.find((o=>o.value===n));if(!t)t=this.checkboxes[0];if(!t)return;this.errorMessage=o;await t.setError(o);if(!!this.showInlineError)this.showInlineValidation()}handleCbChange(){if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;const o=this.nativeCbs.filter((o=>o.type==="radio"));if(o&&o.length&&(this.showErrorMsg||this.validateOn==="dirty")){const n=o.find((o=>o.required));const t=o.filter((o=>o.checked));if(n&&t){this.checkboxes.forEach((o=>o.reportValidity(false)));return false}else if(n&&!t)return true}const n=this.nativeCbs.filter((o=>o.type==="checkbox"));if(!n||!n.length)return;const t=n.filter((o=>o.checked));const i=n.find((o=>o.required));let r=false;if(i&&!t.find((o=>o===i)))return true;this.checkboxes.forEach(((o,n)=>{const i=this.nativeCbs[n];o.setError("");i.setCustomValidity("");if(this.min&&t.length<this.min){this.errorMessage=`You must select a minimum of ${this.min} values.`;r=true}if(this.max&&t.length>this.max){this.errorMessage=`Only up to ${this.max} values are allowed.`;r=true}if(r){o.setError(this.errorMessage,this.showErrorMsg);i.setCustomValidity(this.errorMessage)}}));return r}handleComponentChange(){this.checkboxTypes=e(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){if(this.disabled===null)return;this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){if(!!this.mo)return;const o=this.mo=new MutationObserver((()=>this.handleSlotChange()));o.observe(this.host,{childList:true})}async handleSlotChange(){t(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>{o.push(n.getInputElement());return o}),[]));this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=a(this.showInlineValidation,50);this.customValidate=this.customValidate.bind(this);this.handleDisabledChange()}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){if(this.mo)this.mo.disconnect()}componentDidLoad(){this.handleComponentChange()}render(){const o=this.grpId+"-lbl";const n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return i(r,{...this.checkboxTypes},i("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},i("legend",{class:"nanogroupcb__legend",id:o},this.legend),i("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},i("slot",null)),(this.showInlineError||this.hasHelperSlot)&&i("div",{class:"nanogroupcb__more",id:n},!!this.showInlineError?i("div",{class:"nanogroupcb__error"},this.errorMessage):"",i("div",{class:"nanogroupcb__help"},i("slot",{name:"helper"})))))}get host(){return s(this)}static get watchers(){return{min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let l=0;h.style=c;export{h as nano_checkbox_group};
+//# sourceMappingURL=p-701e8ebf.entry.js.map

package/dist/nano-components/p-701e8ebf.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"names":["checkboxGroupCss","CheckboxGroup","this","grpId","grpIds","handleInvalid","ev","_invalid","validateOn","showErrorMsg","customValidate","showInlineError","preventDefault","showInlineValidation","nativeCbs","length","forEach","cb","_i","validity","valid","errorMessage","validationMessage","nanoValidate","emit","isValid","invalid","originalEvent","validityMessage","[object Object]","validateFirst","Promise","resolve","setTimeout","message","optVal","checkboxes","find","c","value","setError","onlyRadios","filter","type","required","checked","rd","reportValidity","onlyCbs","i","nativeCb","setCustomValidity","min","max","checkboxTypes","getClassMap","map","disabled","mo","MutationObserver","handleSlotChange","observe","host","childList","forceUpdate","Array","from","querySelectorAll","hasHelperSlot","querySelector","all","reduce","acc","push","getInputElement","addEventListener","debounce","bind","handleDisabledChange","attachSlotObserver","disconnect","handleComponentChange","legendId","moreId","h","Host","class","nanogroupcb","show-error","id","legend","role","aria-labelledby","name"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0;\n  --control-margin-end: 0;\n  --control-margin-bottom: 0;\n  --control-margin-start: 0;\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n  --help-msg-color: #{$input-help-color};\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 6px;\n  --control-margin-start: 0;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__error,\n  &__help,\n  &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1.5;\n    white-space: normal;\n    display: block;\n    width: 100%;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n    margin-block-start: calc(var(--label-padding) - var(--control-margin-bottom));\n    margin-inline-end: 0;\n    margin-block-end: var(--label-padding);\n    margin-inline-start: 3px;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n      --check-base-size: 1.2em;\n\n      font-size: 0.85em;\n    }\n\n    ::slotted(*) {\n      margin-inline: var(--control-margin-start) var(--control-margin-end);\n      margin-block: var(--control-margin-top) var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  h,\n  ComponentInterface,\n  State,\n  Listen,\n  Watch,\n  Host,\n  Method,\n  forceUpdate,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n  CssClassMap,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop() showInlineError = true;\n\n  /**\n   * The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    return this.errorMessage;\n  }\n\n  // Public methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) {\n        this.customValidate();\n        this.showInlineValidation();\n      }\n      setTimeout(() => {\n        resolve({\n          isValid: !this.invalid,\n          errorMessage: this.errorMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   * @param message - the error message to show\n   * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n   */\n  @Method()\n  async showError(message: string, optVal?: string) {\n    let cb: HTMLNanoCheckboxElement;\n    if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n    if (!cb) cb = this.checkboxes[0];\n    if (!cb) return;\n\n    this.errorMessage = message;\n    await cb.setError(message);\n    if (!!this.showInlineError) this.showInlineValidation();\n  }\n\n  // Events\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    const onlyRadios = this.nativeCbs.filter((cb) => cb.type === 'radio');\n\n    if (\n      onlyRadios &&\n      onlyRadios.length &&\n      (this.showErrorMsg || this.validateOn === 'dirty')\n    ) {\n      const required = onlyRadios.find((cb) => cb.required);\n      const checked = onlyRadios.filter((cb) => cb.checked);\n\n      if (required && checked) {\n        this.checkboxes.forEach((rd) => rd.reportValidity(false));\n        return false;\n      } else if (required && !checked) return true;\n    }\n\n    // we only care about checkbox controls.\n    const onlyCbs = this.nativeCbs.filter((cb) => cb.type === 'checkbox');\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    const checked = onlyCbs.filter((cb) => cb.checked);\n    const required = onlyCbs.find((cb) => cb.required);\n    let invalid = false;\n\n    if (required && !checked.find((cb) => cb === required)) return true;\n\n    this.checkboxes.forEach((cb, i) => {\n      const nativeCb = this.nativeCbs[i];\n      cb.setError('');\n      nativeCb.setCustomValidity('');\n\n      if (this.min && checked.length < this.min) {\n        this.errorMessage = `You must select a minimum of ${this.min} values.`;\n        invalid = true;\n      }\n      if (this.max && checked.length > this.max) {\n        this.errorMessage = `Only up to ${this.max} values are allowed.`;\n        invalid = true;\n      }\n\n      if (invalid) {\n        cb.setError(this.errorMessage, this.showErrorMsg);\n        // bit fugly. We're just doing this 'cos stencil\n        // methods are async and we want the validity message\n        // asap to keep things in sync\n        nativeCb.setCustomValidity(this.errorMessage);\n      }\n    });\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(\n      this.checkboxes.map((cb) => 'types-' + cb.type)\n    );\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(\n      this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n        acc.push(cb.getInputElement());\n        return acc;\n      }, [])\n    );\n\n    this.nativeCbs.forEach((cb) =>\n      cb.addEventListener('invalid', this.handleInvalid)\n    );\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this._invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    this.showInlineValidation(ev);\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this._invalid = false;\n\n    this.nativeCbs.forEach((cb, _i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this._invalid = true;\n      }\n    });\n\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 50);\n    this.customValidate = this.customValidate.bind(this);\n    this.handleDisabledChange();\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.handleComponentChange();\n  }\n\n  render() {\n    const legendId = this.grpId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host {...this.checkboxTypes}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class=\"nanogroupcb__legend\" id={legendId}>\n            {this.legend}\n          </legend>\n          <div\n            class=\"nanogroupcb__cbs\"\n            role=\"group\"\n            aria-labelledby={legendId + ' ' + moreId}\n          >\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) && (\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {!!this.showInlineError ? (\n                <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n              ) : (\n                ''\n              )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}

package/dist/nano-components/p-7ade1695.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{c as t}from"./p-b83a8320.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-1fd13775.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-7ade1695.js.map

package/dist/nano-components/p-8a52a411.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as i,w as t,h as e,a as n,g as o}from"./p-1fe12320.js";import{c as s}from"./p-845ae77e.js";const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, 0.8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, 0.8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{-webkit-padding-before:var(--global-nav-height);padding-block-start:var(--global-nav-height);-webkit-margin-before:calc(var(--global-nav-height) * -1);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;-webkit-box-flex:0;-ms-flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{-webkit-transition:inline-size 0.3s ease;transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-block-size:calc(100vh - 61px);min-block-size:calc(var(--vh, 1vh) * 100 - 61px);z-index:1}.content{inline-size:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);-webkit-margin-before:var(--padding-top);margin-block-start:var(--padding-top);-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-after:var(--padding-bottom);margin-block-end:var(--padding-bottom);-webkit-margin-start:calc(var(--padding-start) / 2);margin-inline-start:calc(var(--padding-start) / 2);border-radius:4px;padding-block:6px;padding-inline:5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;inline-size:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{-webkit-margin-before:auto;margin-block-start:auto}.measure-ele{block-size:1px}';const r=class{constructor(t){i(this,t);this.children=[];this.currHeight=window.innerHeight;this.onWindowResize=()=>{if(window.innerWidth>this.hideWidth)this.widthOk=true;else this.widthOk=false;const i=window.innerHeight*.01;this.el.style.setProperty("--vh",`${i}px`);if(window.innerHeight>this.currHeight&&this.widthOk&&!this.heightOk){this.moveItemsToDrawer()}this.currHeight=window.innerHeight};this.toggle=i=>{i.preventDefault();this.open=!this.open};this.onToggleKeyDown=i=>{switch(i.key){case"Enter":case" ":this.open=!this.open;break}};this.reset=false;this.widthOk=true;this.heightOk=true;this.isLoading=true;this.hide=false;this.open=true;this.saveState=true;this.hideWidth=576;this.hideHeight=true}cancelNavItemEvents(i){if(!i.detail.secondaryMenu)return;i.stopPropagation()}openChange(){if(this.saveState)localStorage.setItem("nanoMenuDrawerOpen",this.open.toString());if(this.containerDiv){if(this.open)t((()=>this.containerDiv.style.width=this.contentDiv.scrollWidth+"px"));else t((()=>this.containerDiv.style.width=null))}}widthChange(){if(this.widthOk)this.moveItemsToDrawer();else this.moveItemsToGlobalNav()}hideHeightChange(){if(this.hideHeight&&!this.io)this.attachIO();else if(!this.hideHeight&&this.io){this.io.disconnect();this.io=undefined}}moveItemsToGlobalNav(){const i=this.el.querySelectorAll("nano-nav-item");i.forEach((i=>{this.children.push({slot:i.getAttribute("slot"),element:i});i.setAttribute("slot","overflow");i.classList.add("nano-global-nav-menu");this.globalNav.appendChild(i)}));this.hide=true}moveItemsToDrawer(){if(!this.children||!this.children.length)return;this.children.forEach((i=>{i.element.removeAttribute("slot");i.element.classList.remove("nano-global-nav-menu");if(i.slot&&i.slot.length)i.element.setAttribute("slot",i.slot);this.el.appendChild(i.element)}));this.children=[];this.hide=false;if(!this.io)this.attachIO()}attachIO(){if(!this.hideHeight)return;const i=this.io=new window.IntersectionObserver((i=>{this.heightOk=i[0].intersectionRatio!==0;if(!this.heightOk){this.moveItemsToGlobalNav();this.io.disconnect();this.io=undefined}}),{threshold:1});i.observe(this.measureEle)}handleGlobalNavReady(i){if(i.target.tagName!=="NANO-GLOBAL-NAV")return;setTimeout((()=>{this.attachIO();this.openChange();this.onWindowResize();this.isLoading=false}),500)}componentWillLoad(){this.globalNav=s("nano-global-nav",this.el);this.widthOk=window.innerWidth>this.hideWidth;this.currHeight=window.innerHeight;if(this.saveState){const i=localStorage.getItem("nanoMenuDrawerOpen");this.open=i?i==="true":this.open}}componentDidLoad(){{window.addEventListener("resize",this.onWindowResize)}}disconnectedCallback(){window.removeEventListener("resize",this.debounceResize);if(this.io){this.io.disconnect();this.io=null}}render(){return e(n,{class:{open:this.open,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav},dir:this.el.ownerDocument.dir==="rtl"?"rtl":null},e("div",{ref:i=>this.containerDiv=i,class:"container"},e("div",{class:"content-wrap"},e("nav",{ref:i=>this.contentDiv=i,class:"content"},e("button",{onMouseDown:this.toggle,onKeyDown:this.onToggleKeyDown,class:"collapse-btn"},e("nano-icon",{name:"light/arrow-alt-to-right","aria-label":"collapse / expand"})),e("slot",null),e("div",{class:"foot"},e("div",{class:"measure-ele",ref:i=>this.measureEle=i}),e("slot",{name:"foot"}))))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],widthOk:["widthChange"],hideHeight:["hideHeightChange"]}}};r.style=a;export{r as nano_menu_drawer};
+//# sourceMappingURL=p-8a52a411.entry.js.map

package/dist/nano-components/{p-68b18b99.entry.js.map → p-8a52a411.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","MenuDrawer","this","children","currHeight","window","innerHeight","onWindowResize","innerWidth","hideWidth","widthOk","vh","el","style","setProperty","heightOk","moveItemsToDrawer","toggle","e","preventDefault","open","onToggleKeyDown","ev","key","[object Object]","detail","secondaryMenu","stopPropagation","saveState","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","moveItemsToGlobalNav","hideHeight","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","hide","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","target","tagName","setTimeout","openChange","isLoading","closestElement","localState","getItem","addEventListener","removeEventListener","debounceResize","h","Host","class","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{map.get($colors, white)};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get($colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 61px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block-start: var(--padding-top);\n  margin-inline-end: 0;\n  margin-block-end: var(--padding-bottom);\n  margin-inline-start: calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","MenuDrawer","this","children","currHeight","window","innerHeight","onWindowResize","innerWidth","hideWidth","widthOk","vh","el","style","setProperty","heightOk","moveItemsToDrawer","toggle","e","preventDefault","open","onToggleKeyDown","ev","key","[object Object]","detail","secondaryMenu","stopPropagation","saveState","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","moveItemsToGlobalNav","hideHeight","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","hide","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","target","tagName","setTimeout","openChange","isLoading","closestElement","localState","getItem","addEventListener","removeEventListener","debounceResize","h","Host","class","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, 0.8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, 0.8);\n  --focus-outline: none;\n  --content-color: #{map.get($colors, white)};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get($colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 61px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block-start: var(--padding-top);\n  margin-inline-end: 0;\n  margin-block-end: var(--padding-bottom);\n  margin-inline-start: calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport type { NavItemEventDetail } from '../../interface';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName !== 'NANO-GLOBAL-NAV') return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      'nano-global-nav',\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/arrow-alt-to-right\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-a2d0d7b9.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/field-validator/field-validator.tsx"],"names":["FieldValidator","this","allFields","nanoFieldSelector","hasSetStore","internalValidate","handleStoreChange","async","key","newVal","found","find","field","getName","tagName","includes","type","storeToFields","fileStateEqual","value","validateOn","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","state","handleFieldChange","ev","nanoFields","target","_dirty","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitted","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","[object Object]","userForm","_activeForm","form","removeEventListener","addEventListener","forEach","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","length","invalid","fields","f","push","Object","entries","val","validity","Promise","all","map","err","setFieldError","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","extraFieldSelector","filter","validateOnChange","fieldName","cbs","cb","checked","isArray","ff","files","init","currentArr","JSON","stringify","validation","res","msg","validityState","validityTarget","reduce","memo","validate","undefined","showError","setError","setCustomValidity","scrollToInvalid","setTimeout","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","createStore","requestAnimationFrame","attachSlotObserver","on","disconnect","reset","h","Host","ref"],"mappings":";;;0GAkCaA,EAAc,oKA8BjBC,KAAAC,UAAiD,GAGjDD,KAAAE,kBAAoB,0GAOpBF,KAAAG,YAAc,MAIdH,KAAAI,iBAAmB,MA6gBnBJ,KAAAK,kBAAoBC,MAAOC,EAAsBC,KACvD,MAAMC,EAAQT,KAAKC,UAAUS,MAAMC,GAAUX,KAAKY,QAAQD,KAAWJ,IAIrE,GACEE,IACCA,EAAMI,UAAY,iBACjB,CAAC,QAAS,YAAYC,SAAUL,EAA2BM,OAC7D,CAEAf,KAAKgB,cAAc,CAACP,SACf,GACLA,IACEA,EAAMI,UAAY,qBACjBb,KAAKiB,eAAeV,EAAKE,IACzBA,EAAMI,UAAY,oBAAsBJ,EAAMS,QAAUV,GAC3D,CAEAR,KAAKgB,cAAc,CAACP,IAGtB,GAAIT,KAAKmB,aAAe,SAAWnB,KAAKoB,MAAO,CAC7CpB,KAAKI,iBAAmB,WAClBJ,KAAKqB,oBACXrB,KAAKsB,OAAStB,KAAKuB,WAAWC,gBAC9BxB,KAAKI,iBAAmB,MAE1BJ,KAAKyB,kBAAkBC,KAAK1B,KAAK2B,OAAOC,QAOlC5B,KAAA6B,kBAAqBC,IAC3B,IAAK9B,KAAK+B,WAAWjB,SAASgB,EAAGE,QAAS,OAC1ChC,KAAKiC,OAAS,KACdjC,KAAKkC,cAAc,CAACJ,EAAGE,UAOjBhC,KAAAmC,uBAA0BL,IAChC,IAAK9B,KAAKoC,YAAYtB,SAASgB,EAAGE,QAAS,OAC3ChC,KAAKkC,cAAc,CAACJ,EAAGE,UAOjBhC,KAAAqC,kBAAoB/B,MAAOwB,IAEjC,IAAK9B,KAAKoC,YAAYtB,SAASgB,EAAGE,QAAS,CACzCF,EAAGQ,iBAGLtC,KAAKsB,OAAS,MAId,GAAItB,KAAKI,iBAAkB,OAG3B,GAAIJ,KAAKmB,aAAe,kBAAmBnB,KAAKmB,WAAa,QAC7DnB,KAAKuC,UAAY,WAEXvC,KAAKqB,oBACXrB,KAAKI,iBAAmB,KACxBJ,KAAKsB,OAAStB,KAAKuB,WAAWC,gBAC9BxB,KAAKI,iBAAmB,MAKxB,GAAIJ,KAAKmB,aAAe,SAAU,CAChC,GAAInB,KAAKsB,OAAQ,CACftB,KAAKwC,aACL,QAIJxC,KAAKyC,uBACLzC,KAAK0C,YAAYhB,QAOX1B,KAAA2C,aAAerC,MAAOsC,IAC5BA,EAAEN,iBACF,GAAItC,KAAKmB,aAAe,kBAAmBnB,KAAKmB,WAAa,QAC7DnB,KAAKuC,UAAY,WACXvC,KAAKqB,oBAEXrB,KAAKI,iBAAmB,KACxBJ,KAAKsB,OAAStB,KAAKuB,WAAWC,gBAC9BxB,KAAKI,iBAAmB,MAExB,IAAKJ,KAAKsB,OAAQ,CAChBtB,KAAKyC,uBACL,OAEFzC,KAAKwC,6BAhqBc,8CA8CnB,uCAiBwB,iBAOR,0EAwGmB,oDA3KrCK,iBACE,KAAM7C,KAAK8C,SAAU9C,KAAKuB,WAAavB,KAAK8C,SAG9CvB,iBACE,OAAOvB,KAAK+C,YAEdxB,eAAuByB,GAErB,IAAKA,EAAM,OAEX,GAAIhD,KAAK+C,YAAa,CACpB/C,KAAK+C,YAAYE,oBACf,UACAjD,KAAKqC,kBACL,MAGJW,EAAKE,iBAAiB,UAAWlD,KAAKqC,kBAAmB,MACzDrC,KAAK+C,YAAcC,EA4BrBH,mBACE7C,KAAK+B,WAAWoB,SAASxC,IACvB,GAAIA,EAAME,UAAY,gBAAiB,CACrC,MAAMuC,EAAMzC,EAAM0C,QAAQ,uBAC1B,GAAID,EAAKA,EAAIjC,WAAanB,KAAKmB,eAC1B,CACJR,EAAyDQ,WACxDnB,KAAKmB,eASbC,YAEE,OAAOpB,KAAKiC,OAKdqB,YAEE,OAAOtD,KAAKsB,OAKdiC,YACE,OAAOvD,KAAK2B,OAKd6B,cAEE,OAAOxD,KAAK2B,OAAOC,MAIrB6B,qBAEE,OAAQzD,KAAKmB,aAAe,SAAWnB,KAAKoB,OAAUpB,KAAKuC,UAe7DmB,sBAOE,MAAMA,EAAqC,GAE3C1D,KAAKC,UAAUkD,SAAQ7C,MAAOK,IAC5B,MAAMF,EAAQiD,EAAgBhD,MAAMiD,GAAMA,EAAEC,OAAS5D,KAAKY,QAAQD,KAClE,IAAIkD,EACJ,IAAIC,EAEJ,GAAIrD,EAAO,CACT,GAAKE,EAAwBoD,kBAAmB,CAC9CF,EAAKlD,EACLF,EAAMuD,gBAAkBH,EAAGE,kBAAkBE,OACzCJ,EAAGE,kBACHtD,EAAMuD,gBACVhE,KAAKI,iBAAmB,KACxB,GAAIK,EAAM6C,QAAUO,EAAGrC,gBAAiBf,EAAM6C,MAAQ,MACtDtD,KAAKI,iBAAmB,WACnB,GAAKO,EAAuBqD,gBAAiB,CAClDF,EAAKnD,EACLF,EAAMuD,gBAAkBF,EAAGE,gBAAgBC,OACvCH,EAAGE,gBACHF,EAAGE,gBACP,GAAIvD,EAAM6C,OAASQ,EAAGI,QAASzD,EAAM6C,MAAQ,MAE/C,IAAK7C,EAAM0D,OAAOzD,MAAM0D,GAAMA,IAAMzD,IAAQF,EAAM0D,OAAOE,KAAK1D,GAGhE,IAAI2C,EACJ,IAAIU,EAEJ,GAAKrD,EAAwBa,cAAe,CAC1CqC,EAAKlD,EACLX,KAAKI,iBAAmB,KACxBkD,EAAQO,EAAGrC,gBACXxB,KAAKI,iBAAmB,MACxB4D,EAAkBH,EAAGE,sBAChB,CACLD,EAAKnD,EACL2C,GAASQ,EAAGI,QACZF,EAAkBF,EAAGE,gBAGvBN,EAAgBW,KAAK,CACnBF,OAAQ,CAACxD,GACTiD,KAAM5D,KAAKY,QAAQD,GACnBO,MAAOlB,KAAK2B,OAAOC,MAAM5B,KAAKY,QAAQD,IACtCS,MAAO,MACPkC,MAAAA,EACAU,gBAAAA,OAIJ,OAAON,EA6BTb,eAAejB,GACb5B,KAAKG,YAAc,KACnBmE,OAAOC,QAAQ3C,GAAOuB,SAAQ,EAAE5C,EAAKiE,MACnCxE,KAAKuD,MAAM3B,MAAMrB,GAAOiE,KAS5B3B,wBAAwB4B,GACtB,aAAaC,QAAQC,IACnBL,OAAOC,QAAQE,GAAUG,KAAItE,OAAQC,EAAKsE,MACxC,MAAMlE,EAAQX,KAAKC,UAAUS,MAAM0D,GAAMpE,KAAKY,QAAQwD,KAAO7D,IAC7D,KAAMI,QAAaX,KAAK8E,cAAcnE,EAAOkE,OAUnDhC,sBACE,aAAa6B,QAAQC,IACnB3E,KAAKC,UAAU2E,KAAItE,MAAOK,SAAgBX,KAAK8E,cAAcnE,EAAO,OAyBxEkC,qBACE,KAAM7C,KAAK+E,GAAI,OACf,MAAMA,EAAM/E,KAAK+E,GAAK,IAAIC,kBAAkBC,IAC1C,MAAMjC,EAAOhD,KAAKkF,KAAKC,cAAc,QACrC,GAAInC,GAAQA,IAAShD,KAAKuB,WAAYvB,KAAKuB,WAAayB,EACxDhD,KAAKoF,iBAEPL,EAAGM,QAAQrF,KAAKkF,KAAM,CACpBI,UAAW,KACXC,WAAY,KACZC,gBAAiB,CAAC,QAClBC,QAAS,OAUL5C,QAAQlC,GACd,OAAOA,EAAMiD,MAAQjD,EAAM+E,aAAa,QAIlC7C,cACN,IAAId,EAAa4D,MAAMC,KACrB5F,KAAKkF,KAAKW,iBAA+B7F,KAAKE,oBAGhD,IAAIkC,EAAcuD,MAAMC,KACtB5F,KAAKkF,KAAKW,iBAAgC7F,KAAK8F,qBAC/CC,QAAQnD,IAAOA,EAAES,QAAQrD,KAAKE,qBAEhC6B,EAAaA,EAAWgE,QACrB3B,KAAQpE,KAAKY,QAAQwD,MAAQpE,KAAKY,QAAQwD,GAAGH,SAEhD7B,EAAcA,EAAY2D,QACvB3B,KAAQpE,KAAKY,QAAQwD,MAAQpE,KAAKY,QAAQwD,GAAGH,SAIhD,IACG,IAAIlC,KAAeK,GAAa2D,QAC9B3B,IAAOpE,KAAKC,UAAUa,SAASsD,KAChCH,OAEF,OAGFjE,KAAK+B,WAAaA,EAClB/B,KAAKoC,YAAcA,EACnBpC,KAAKC,UAAY,IAAI8B,KAAeK,GAEpCpC,KAAKgB,cAAchB,KAAKC,WAExBD,KAAKgG,mBACLhG,KAAKkC,cAAclC,KAAKC,UAAW,MACnCD,KAAKyB,kBAAkBC,KAAK1B,KAAK2B,OAAOC,OAGlCiB,cAAcsB,GACpBA,EAAOhB,SAASxC,IACd,MAAMsF,EAAYjG,KAAKY,QAAQD,GAC/B,IACGsF,EAAUhC,eACJjE,KAAK2B,OAAOC,MAAMqE,KAAe,YAExC,OAEF,GACEtF,EAAME,UAAY,iBAClB,CAAC,QAAS,YAAYC,SAAUH,EAA2BI,MAC3D,CACA,MAAMmF,EAAMlG,KAAKC,UAAU8F,QACxB3B,GAAMpE,KAAKY,QAAQD,KAAWX,KAAKY,QAAQwD,KAE9C,GACE8B,EAAI,GAAGnF,OAAS,SAChBmF,EAAI,GAAGnF,OAAS,WAChBmF,EAAI,GAAGnF,OAAS,eAChB,CAEAmF,EAAI/C,SAASgD,IACX,GAAInG,KAAK2B,OAAOC,MAAMqE,KAAeE,EAAGjF,MAAOiF,EAAGC,QAAU,UACvDD,EAAGC,QAAU,cAEf,GAAIT,MAAMU,QAAQrG,KAAK2B,OAAOC,MAAMqE,IAAa,CAEtDC,EAAI/C,SAASgD,IACX,GAAInG,KAAK2B,OAAOC,MAAMqE,GAAWnF,SAASqF,EAAGjF,OAC3CiF,EAAGC,QAAU,UACVD,EAAGC,QAAU,aAEf,CAELF,EAAI/C,SAASgD,IACX,GAAInG,KAAK2B,OAAOC,MAAMqE,KAAeE,EAAGjF,MAAOiF,EAAGC,QAAU,UACvDD,EAAGC,QAAU,SAGtB,OAGF,GAAIzF,EAAME,UAAY,mBAAoB,CACxC,MAAMyF,EAAK3F,EAEX,IAAK2F,EAAGC,OAAOtC,OAAQqC,EAAGC,MAAQvG,KAAK2B,OAAOC,MAAMqE,GACpD,OAIFtF,EAAMO,MAAQlB,KAAK2B,OAAOC,MAAMqE,MAK5BpD,cACNsB,EACAqC,EAAO,OAEPrC,EAAOhB,SAASxC,IACd,MAAMsF,EAAYjG,KAAKY,QAAQD,GAC/B,IAAKsF,EAAUhC,OAAQ,OAEvB,KAAMjE,KAAK2B,OAAOC,MAAMqE,IAAcjG,KAAKG,aAAeqG,EAAM,CAK9D,OAGF,GACE7F,EAAME,UAAY,iBAClB,CAAC,QAAS,YAAYC,SAAUH,EAA2BI,MAC3D,CACA,MAAMoF,EAAKxF,EAEX,GACEwF,EAAGpF,OAAS,SACZoF,EAAGpF,OAAS,WACZoF,EAAGpF,OAAS,eACZ,CAEA,GAAIoF,EAAGC,QAASpG,KAAK2B,OAAOC,MAAMqE,GAAaE,EAAGjF,WAC7C,GACLlB,KAAKC,UAAU8F,QACZ3B,GACCpE,KAAKY,QAAQwD,KAAO6B,IACnB7B,EAAEvD,UAAY,iBACZuD,EAAuBrD,OAAS,cACrCkD,OAAS,EACX,CAEA,MAAMwC,EAAad,MAAMU,QAAQrG,KAAK2B,OAAOC,MAAMqE,IAC/CjG,KAAK2B,OAAOC,MAAMqE,GAClB,GACJ,GAAIE,EAAGC,QAAS,CAEd,IAAKpG,KAAK2B,OAAOC,MAAMqE,GAAWnF,SAASqF,EAAGjF,OAAQ,CACpDlB,KAAK2B,OAAOC,MAAMqE,GAAa,IAAIQ,EAAYN,EAAGjF,YAE/C,CAELlB,KAAK2B,OAAOC,MAAMqE,GAAaQ,EAAWV,QACvCpC,GAAMA,IAAMwC,EAAGjF,aAGf,CAEL,GAAIiF,EAAGC,QAASpG,KAAK2B,OAAOC,MAAMqE,GAAaE,EAAGjF,WAC7ClB,KAAK2B,OAAOC,MAAMqE,GAAa,GAEtC,OAGF,GAAItF,EAAME,UAAY,mBAAoB,CACxC,MAAMyF,EAAK3F,EACX,IAAKX,KAAKiB,eAAegF,EAAWK,GAClCtG,KAAK2B,OAAOC,MAAMqE,GAAaK,EAAGC,MAEpC,OAIFvG,KAAK2B,OAAOC,MAAMqE,GAAatF,EAAMO,SAWjC2B,eACNoD,EACAtF,GAEA,OACE+F,KAAKC,UAAU3G,KAAK2B,OAAOC,MAAMqE,MAC/BS,KAAKC,UAAUhG,EAAM4F,QACvBvG,KAAK2B,OAAOC,MAAMqE,IAActF,EAAM4F,MASlC1D,eAAetC,EAAsBC,GAC3C,IAAKR,KAAK4G,WAAY,OAEtB,MAAMC,EAAM7G,KAAK4G,WAAWrG,EAAeC,EAAQR,KAAK2B,OAAOC,OAG/D,IAAKiF,EAAK,aAKJnC,QAAQC,IACZL,OAAOC,QAAQsC,GAAKjC,KAAItE,OAAQwG,EAAKC,KAC5BA,EAAc5C,OAAOS,KAAItE,MAAO2F,IAErC,MAAMtF,EAAQX,KAAKC,UAAUS,MAC1B0D,GAAMpE,KAAKY,QAAQwD,KAAO6B,IAE7B,IAAIe,EAG+BrG,EAEnC,GAAIA,EAAME,UAAY,gBAAiB,CAErC,MAAMuC,EAAMzC,EAAM0C,QAAQ,uBAC1B2D,EAAiB5D,GAAOzC,EAG1B,IACIqG,EAAgChD,iBAC/BgD,EAAiCjD,qBAAuB+C,GAC3DC,EAAczD,MACd,OAEMtD,KAAK8E,cAAckC,EAAgB,SACpC,IAAKD,EAAczD,MAAO,OAEzBtD,KAAK8E,cAAckC,EAAgBF,UAQ3CjE,gCAEAyB,OAAOC,QAAQvE,KAAK2B,OAAOC,OAAOqF,QACtC3G,MAAO4G,GAAO3G,EAAKW,YACXgG,QACAlH,KAAKmH,SAAS5G,EAAKW,KAE3BkG,WAUIvE,oBACNlC,EACAmG,GAEA,GAAInG,EAAM,aAAc,OACfA,EAAyD0G,UAC9DP,QAEG,GAAInG,EAAM,kBACRA,EAAkC2G,SAASR,QAC9CnG,EAAwB4G,kBAAkBT,GAG1CjE,uBACN,IAAK7C,KAAKwH,gBAAiB,OAE3BC,YAAW,KACT,MAAMC,EAAe1H,KAAK0D,gBAAgBhD,MAAM0D,IAAOA,EAAEd,QACzD,IAAKoE,EAAc,OACnBA,EAAavD,OAAO,GAAGwD,eAAe,CACpCC,SAAU,SACVC,MAAO,cAER,KAGGhF,aACN,MAAMiF,EAAa9H,KAAK8H,WAAWpG,OACnC,GAAIoG,EAAWC,iBAAkB,OACjC/H,KAAKuB,WAAWyG,SAwHlBnF,oBACE7C,KAAK8C,SAAW9C,KAAKkF,KAAKC,cAAc,QACxCnF,KAAK2B,OAASsG,EAAiC,IAGjDpF,mBACEqF,uBAAsB,KACpBlI,KAAKoF,cACLpF,KAAKmI,qBAELnI,KAAKkF,KAAKhC,iBAAiB,aAAclD,KAAK6B,mBAC9C7B,KAAKkF,KAAKhC,iBAAiB,QAASlD,KAAKmC,wBACzCnC,KAAKkF,KAAKhC,iBAAiB,SAAUlD,KAAKmC,wBAC1CnC,KAAKkF,KAAKhC,iBAAiB,SAAUlD,KAAK2C,cAC1C3C,KAAK2B,OAAOyG,GAAG,MAAOpI,KAAKK,sBAI/BwC,uBACE,GAAI7C,KAAK+E,GAAI/E,KAAK+E,GAAGsD,aAErBrI,KAAKkF,KAAKjC,oBAAoB,aAAcjD,KAAK6B,mBACjD7B,KAAKkF,KAAKjC,oBAAoB,QAASjD,KAAKmC,wBAC5CnC,KAAKkF,KAAKjC,oBAAoB,SAAUjD,KAAKmC,wBAC7CnC,KAAKkF,KAAKjC,oBAAoB,SAAUjD,KAAK2C,cAC7C3C,KAAK2B,OAAO2G,QAEZ,GAAItI,KAAKuB,WACPvB,KAAKuB,WAAW0B,oBACd,UACAjD,KAAKqC,kBACL,MAINQ,SACE,OACE0F,EAACC,EAAI,KACFxI,KAAK8C,UAAYyF,EAAA,OAAA,OAChBvI,KAAK8C,UACLyF,EAAA,OAAA,CAAME,IAAMrE,GAAOpE,KAAKuB,WAAa6C,GACnCmE,EAAA,OAAA","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport type {\n  NanoFormEles,\n  PlainFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n  PlainFormEvent,\n} from '../../interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n  private hasSetStore = false;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store(): ObservableMap<ValidatorValueStore> {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    this.hasSetStore = true;\n    Object.entries(state).forEach(([key, val]) => {\n      this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n   */\n  @Method()\n  async setCustomValidity(validity: { [key: string]: string }) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (!!field) await this.setFieldError(field, err);\n      })\n    );\n  }\n\n  /**\n   * Clear all custom validation.\n   * @returns a promise, resolved when all errors are cleared\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns the fields name prop or attr\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields, true);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cbs = this.allFields.filter(\n          (f) => this.getName(field) === this.getName(f)\n        ) as HTMLNanoCheckboxElement[];\n        if (\n          cbs[0].type === 'radio' ||\n          cbs[0].type === 'segment' ||\n          cbs[0].type === 'segment-pill'\n        ) {\n          // single radio type control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName].includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          });\n        } else {\n          // single checkbox like control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(\n    fields: Array<NanoFormEles | PlainFormEles>,\n    init = false\n  ) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n        // a new field is being added\n        // but we already have a value for it\n        // via a store that has been actively set\n        // so let's not overwrite it\n        return;\n      }\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName === 'NANO-CHECKBOX' ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName].includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([msg, validityState]) => {\n        return validityState.fields.map(async (fieldName) => {\n          // switch on/off validation messages\n          const field = this.allFields.find(\n            (f) => this.getName(f) === fieldName\n          );\n          let validityTarget:\n            | PlainFormEles\n            | NanoFormEles\n            | HTMLNanoCheckboxGroupElement = field;\n\n          if (field.tagName === 'NANO-CHECKBOX') {\n            // if we have a checkbox-group, set the validation message there\n            const cbg = field.closest('nano-checkbox-group');\n            validityTarget = cbg || field;\n          }\n\n          if (\n            ((validityTarget as NanoFormEles).validityMessage ||\n              (validityTarget as PlainFormEles).validationMessage) === msg &&\n            validityState.valid\n          ) {\n            // status is now valid - clear the error\n            await this.setFieldError(validityTarget, '');\n          } else if (!validityState.valid) {\n            // status is invalid. Set the error\n            await this.setFieldError(validityTarget, msg);\n          }\n        });\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    if (field['showError']) {\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    } else if (field['setError'])\n      await (field as HTMLNanoCheckboxElement).setError(msg);\n    else (field as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      (found.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n    ) {\n      // it's a cb - always change\n      this.storeToFields([found]);\n    } else if (\n      found &&\n      ((found.tagName === 'NANO-FILE-UPLOAD' &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n    ) {\n      // not a cb. Only change if value is different\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    if (!this.nanoFields.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handlePlainFieldChange = (ev: PlainFormEvent) => {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('input', this.handlePlainFieldChange);\n      this.host.addEventListener('change', this.handlePlainFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('input', this.handlePlainFieldChange);\n    this.host.removeEventListener('change', this.handlePlainFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/field-validator/field-validator.tsx"],"names":["FieldValidator","this","allFields","nanoFieldSelector","hasSetStore","internalValidate","handleStoreChange","async","key","newVal","found","find","field","getName","tagName","includes","type","storeToFields","fileStateEqual","value","validateOn","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","state","handleFieldChange","ev","nanoFields","target","_dirty","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitted","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","[object Object]","userForm","_activeForm","form","removeEventListener","addEventListener","forEach","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","length","invalid","fields","f","push","Object","entries","val","validity","Promise","all","map","err","setFieldError","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","extraFieldSelector","filter","validateOnChange","fieldName","cbs","cb","checked","isArray","ff","files","init","currentArr","JSON","stringify","validation","res","msg","validityState","validityTarget","reduce","memo","validate","undefined","showError","setError","setCustomValidity","scrollToInvalid","setTimeout","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","createStore","requestAnimationFrame","attachSlotObserver","on","disconnect","reset","h","Host","ref"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport type {\n  NanoFormEles,\n  PlainFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n  PlainFormEvent,\n} from '../../interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n  private hasSetStore = false;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store(): ObservableMap<ValidatorValueStore> {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          // non-nano fields\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          // nano-... fields\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    this.hasSetStore = true;\n    Object.entries(state).forEach(([key, val]) => {\n      this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n   */\n  @Method()\n  async setCustomValidity(validity: { [key: string]: string }) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (!!field) await this.setFieldError(field, err);\n      })\n    );\n  }\n\n  /**\n   * Clear all custom validation.\n   * @returns a promise, resolved when all errors are cleared\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns the fields name prop or attr\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields, true);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cbs = this.allFields.filter(\n          (f) => this.getName(field) === this.getName(f)\n        ) as HTMLNanoCheckboxElement[];\n        if (\n          cbs[0].type === 'radio' ||\n          cbs[0].type === 'segment' ||\n          cbs[0].type === 'segment-pill'\n        ) {\n          // single radio type control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName].includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          });\n        } else {\n          // single checkbox like control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(\n    fields: Array<NanoFormEles | PlainFormEles>,\n    init = false\n  ) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n        // a new field is being added\n        // but we already have a value for it\n        // via a store that has been actively set\n        // so let's not overwrite it\n        return;\n      }\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName === 'NANO-CHECKBOX' ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName].includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([msg, validityState]) => {\n        return validityState.fields.map(async (fieldName) => {\n          // switch on/off validation messages\n          const field = this.allFields.find(\n            (f) => this.getName(f) === fieldName\n          );\n          let validityTarget:\n            | PlainFormEles\n            | NanoFormEles\n            | HTMLNanoCheckboxGroupElement = field;\n\n          if (field.tagName === 'NANO-CHECKBOX') {\n            // if we have a checkbox-group, set the validation message there\n            const cbg = field.closest('nano-checkbox-group');\n            validityTarget = cbg || field;\n          }\n\n          if (\n            ((validityTarget as NanoFormEles).validityMessage ||\n              (validityTarget as PlainFormEles).validationMessage) === msg &&\n            validityState.valid\n          ) {\n            // status is now valid - clear the error\n            await this.setFieldError(validityTarget, '');\n          } else if (!validityState.valid) {\n            // status is invalid. Set the error\n            await this.setFieldError(validityTarget, msg);\n          }\n        });\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    if (field['showError']) {\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    } else if (field['setError'])\n      await (field as HTMLNanoCheckboxElement).setError(msg);\n    else (field as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      (found.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n    ) {\n      // it's a cb - always change\n      this.storeToFields([found]);\n    } else if (\n      found &&\n      ((found.tagName === 'NANO-FILE-UPLOAD' &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n    ) {\n      // not a cb. Only change if value is different\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    if (!this.nanoFields.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handlePlainFieldChange = (ev: PlainFormEvent) => {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('input', this.handlePlainFieldChange);\n      this.host.addEventListener('change', this.handlePlainFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('input', this.handlePlainFieldChange);\n    this.host.removeEventListener('change', this.handlePlainFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-b4a045a2.entry.js

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

package/dist/nano-components/p-b7901427.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,d as e,h as s,a as n,g as o}from"./p-1fe12320.js";import{d as r}from"./p-9746b0a5.js";const a=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((e=>{let s;if(e==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[e].forEach(((n,o)=>{if(s>=o&&n.applied===false){n.applied=true;t[e].set(o,n);i=true}else if(s<o&&n.applied===true){n.applied=false;t[e].set(o,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.states=undefined}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[e,...s]=i.split(" ");const{bp:n,dir:o}=t(e);this.appliedStates[o].set(n,{states:s,applied:false})}else{const{bp:e,dir:s}=t(i);this.appliedStates[s].set(e,{applied:false})}}))}applyChanges(t){let i=[...this.classNames];Object.keys(t).forEach((e=>{t[e].forEach((t=>{if(!t.states)return;t.states.map((e=>{if(t.applied)i.push(e);else i=i.filter((t=>t!==e))}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((e=>{t[e].forEach(((t,s)=>{i[s+e]=t.applied}))}));return i}attachRO(){this.ro=new ResizeObserver((t=>{for(const i of t){this.currentWidth=i.contentRect.width;this.currentHeight=i.contentRect.height}}));this.ro.observe(this.host)}connectedCallback(){this.assessChanges=r(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){e((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=t;this.currentHeight=i}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(n,{class:{[this.classNames.join(" ")]:true}},s("slot",null))}get host(){return o(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};a.style=":host { display: inline-block } div { height: 100%; }";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";const l=class{constructor(i){t(this,i);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}," "))}};l.style=h;export{a as nano_resize_observe,l as nano_skeleton};
+//# sourceMappingURL=p-b7901427.entry.js.map

package/dist/nano-components/p-b7901427.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","this","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","[object Object]","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","host","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","skeletonCss","Skeleton","skeleton","animate","animated"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = ['is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.host);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"]}