@nanoporetech-digital/components 2.10.0 → 2.12.0

package/dist/nano-components/p-97b13ad2.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as a,h as o,e as i,g as r}from"./p-b5c33aff.js";import{i as n}from"./p-debd9efc.js";import{s}from"./p-1805d59a.js";import{f as e}from"./p-f8f89998.js";import{d,r as b}from"./p-289aa03f.js";import{C as l}from"./p-32f4516e.js";import{g as c,a as h}from"./p-b619500f.js";import{c as p}from"./p-d99437a6.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const g=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--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(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}: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;top:0;bottom: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{left:0}.nano-tab-group__scroll-button--right{right: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;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom: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% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(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{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.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{bottom:-2px;border-bottom: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))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right: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-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';let u=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.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.isLegacy=!document.head.attachShadow;this.placement="top";this.noScrollControls=false;this.storeMethod="session";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)){s(o[i],this.nav,"horizontal","center")}t.preventDefault()}}};this.handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}let t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;let 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(i){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 r=70;var n=this.initialTouchX-a.clientX;var s=this.initialTouchY-a.clientY;const e=Math.abs(o)>=r&&Math.abs(i)<=r;const d=this.getAllActiveTabs;const b=d.findIndex((t=>t.active));if(e){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(d[b+t]){this.setActiveTab(d[b+t]);if(Math.abs(n)>Math.abs(s)){if(n>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})}}))}}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 c(this.host,"nano-tab")}get getAllPanels(){return c(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)){s(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(){var t;this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const a=this.getActiveTab;const o=((t=a.shadowRoot.querySelector(".nanotab"))===null||t===void 0?void 0:t.clientWidth)||0;const i=a.clientHeight;const r=h(a,this.tabs);const n=r.top+this.nav.scrollTop;const s=r.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${o}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${i}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){var a;let o=this.getAllActiveTabs.indexOf(t.target);const i=t.target;if(o<0)return;const r=this.getAllPanels.find((t=>t.name===i.panel));if(!r)return;t.stopImmediatePropagation();const n=this.nanoTabWillClose.emit({name:i.panel});if(n.defaultPrevented)return;if(i.active){o=o===0?1:o-1;const t=(a=this.getAllActiveTabs[o])===null||a===void 0?void 0:a.panel;if(t)this.host.show(t)}i.remove();r.remove();this.nanoTabClose.emit({name:i.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)l.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 n((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();s(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);b((()=>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:Object.assign(Object.assign({},p(this.color)),{legacy:this.isLegacy}),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 r(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};u.style=g;export{u as nano_tab_group};
-//# sourceMappingURL=p-97b13ad2.entry.js.map

package/dist/nano-components/p-97b13ad2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","[object Object]","hostRef","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","raf","dir","ownerDocument","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{map.get($colors, lightblue)};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgba(0, 0, 0, var(--fade-transparency)) 0,\n          rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      bottom: -2px;\n      border-bottom: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n  getDirectChildren,\n  raf,\n} from '../../utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n      // active tab can be changed on init - this won't be ready. No big thing\n      this.syncActiveTabIndicator();\n      if (['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedNodes({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n\n    raf(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color), legacy: this.isLegacy }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as n,h as i,e as a,g as e}from"./p-b5c33aff.js";import{r as o}from"./p-289aa03f.js";import{F as r,a as s}from"./p-71e9fa33.js";import{d as l,a as p}from"./p-1da5f8df.js";import{c}from"./p-b619500f.js";import{c as h}from"./p-d99437a6.js";const d='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left: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}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}';let u=0;let f=class{constructor(i){t(this,i);this.nanoInput=n(this,"nanoInput",7);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoValidate=n(this,"nanoValidate",7);this.inputId=`nano-input-${u++}`;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=t=>{if(this.validateOn==="submitThenDirty")this.validateOn="dirty";if(!this.nativeInput.validity.valid){if(this.showInlineError){if(t)t.preventDefault();this.errorMessage=this.nativeInput.validationMessage}this._invalid=true}else this._invalid=false;this.nanoValidate.emit({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage,originalEvent:t})};this.onInput=t=>{const n=t.target;this.value=(n===null||n===void 0?void 0:n.value)||"";this.nanoInput.emit(t)};this.onBlur=()=>{this.hasFocus=false;this.focusChanged();if(this.validateOn==="dirty")this.validate();this.nanoBlur.emit()};this.onFocus=()=>{this.hasFocus=true;this.focusChanged();this.nanoFocus.emit()};this.onKeydown=()=>{if(this.shouldClearOnEdit()){if(this.didBlurAfterEdit&&this.hasValue()){this.clearTextInput()}this.didBlurAfterEdit=false}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation()}this.value="";this.nativeInput.value="";const n=new window.Event("change");this.nativeInput.dispatchEvent(n)};this.validate=l(this.validate,50)}get nativeInputWrap(){return this._nativeInputWrap}set nativeInputWrap(t){if(this._nativeInputWrap===t)return;this._nativeInputWrap=t;this.setDataListOpts()}setDataListOpts(){if(!this.datalist)return;const t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},t),{skidding:-1,tetherTo:this.nativeInputWrap})}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeInput)return"";return this.nativeInput.validationMessage}shouldValidate(){if(!this.hasRendered)return;requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}valueChanged(){this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}requestAnimationFrame((()=>{if(this.validateOn==="dirty")this.validate()}))}debounceChanged(){this.nanoChange=p(this.nanoChange,this.debounce)}async reportValidity(t){return new Promise((n=>{if(t)this.validate();setTimeout((()=>{n({isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage})}),50)}))}async setFocus(){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}}getInputElement(){return Promise.resolve(this.nativeInput)}async showError(t){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}}onReset(t){const n=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!n||t.target!==this.el.closest("form"))return;this.value=""}handleBlur(t){if(!this.hasFocus)return;const n=t;let i;o((()=>{if(n.key){if(n.key!=="Tab")return;i=document.activeElement}else i=t.target;if(c(this.el.tagName.toLowerCase(),i)!==this.el){this.onBlur()}}))}shouldClearOnEdit(){const{type:t,clearOnEdit:n}=this;return n===undefined?t==="password":n}getValue(){return this.value||""}focusChanged(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}}hasValue(){return this.getValue().length>0}slotChangeObserver(){if(this.mo)this.mo.disconnect();const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}}connectedCallback(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}}disconnectedCallback(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((t=>this.setFocus()),300)}componentWillLoad(){this.processSlottedContent()}render(){const t=this.getValue();const n=this.inputId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";const o=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";const l=(({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u,hasHelperEndSlot:f})=>({el:t,floatLabel:n,label:i,errorMessage:a,type:e,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:p,maxlength:c,charCount:h,showCharCount:d,rtl:u,hasHelperEndSlot:f}))(this);const p=Object.assign(Object.assign({},l),{labelId:n,moreId:e,helperEndId:o,hasValue:this.hasValue(),controlId:this.inputId});const c=(({clearInput:t,readonly:n,disabled:i})=>({clearInput:t,readonly:n,disabled:i,clearControl:this.clearInput}))(this);return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},h(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i(r,Object.assign({},p),i(s,Object.assign({},c,{onClearText:this.clearTextInput,control:this.el,ref:t=>this.nativeInputWrap=t}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e+" "+o,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:t=>this.nativeInput=t,"aria-labelledby":n+" "+e+" "+o,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:t,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate})),i("slot",null)))}get el(){return e(this)}static get watchers(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}}};f.style=d;export{f as nano_input};
-//# sourceMappingURL=p-a81db037.entry.js.map

package/dist/nano-components/p-b430a9b6.system.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-System.register([],(function(t){"use strict";return{execute:function(){var e=function(){if(typeof Map!=="undefined"){return Map}function t(t,e){var n=-1;t.some((function(t,r){if(t[0]===e){n=r;return true}return false}));return n}return function(){function e(){this.__entries__=[]}Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:true,configurable:true});e.prototype.get=function(e){var n=t(this.__entries__,e);var r=this.__entries__[n];return r&&r[1]};e.prototype.set=function(e,n){var r=t(this.__entries__,e);if(~r){this.__entries__[r][1]=n}else{this.__entries__.push([e,n])}};e.prototype.delete=function(e){var n=this.__entries__;var r=t(n,e);if(~r){n.splice(r,1)}};e.prototype.has=function(e){return!!~t(this.__entries__,e)};e.prototype.clear=function(){this.__entries__.splice(0)};e.prototype.forEach=function(t,e){if(e===void 0){e=null}for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}};return e}()}();var n=typeof window!=="undefined"&&typeof document!=="undefined"&&window.document===document;var r=function(){if(typeof global!=="undefined"&&global.Math===Math){return global}if(typeof self!=="undefined"&&self.Math===Math){return self}if(typeof window!=="undefined"&&window.Math===Math){return window}return Function("return this")()}();var i=function(){if(typeof requestAnimationFrame==="function"){return requestAnimationFrame.bind(r)}return function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)}}();var o=2;function s(t,e){var n=false,r=false,s=0;function a(){if(n){n=false;t()}if(r){c()}}function u(){i(a)}function c(){var t=Date.now();if(n){if(t-s<o){return}r=true}else{n=true;r=false;setTimeout(u,e)}s=t}return c}var a=20;var u=["top","right","bottom","left","width","height","size","weight"];var c=typeof MutationObserver!=="undefined";var f=function(){function t(){this.connected_=false;this.mutationEventsAdded_=false;this.mutationsObserver_=null;this.observers_=[];this.onTransitionEnd_=this.onTransitionEnd_.bind(this);this.refresh=s(this.refresh.bind(this),a)}t.prototype.addObserver=function(t){if(!~this.observers_.indexOf(t)){this.observers_.push(t)}if(!this.connected_){this.connect_()}};t.prototype.removeObserver=function(t){var e=this.observers_;var n=e.indexOf(t);if(~n){e.splice(n,1)}if(!e.length&&this.connected_){this.disconnect_()}};t.prototype.refresh=function(){var t=this.updateObservers_();if(t){this.refresh()}};t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));t.forEach((function(t){return t.broadcastActive()}));return t.length>0};t.prototype.connect_=function(){if(!n||this.connected_){return}document.addEventListener("transitionend",this.onTransitionEnd_);window.addEventListener("resize",this.refresh);if(c){this.mutationsObserver_=new MutationObserver(this.refresh);this.mutationsObserver_.observe(document,{attributes:true,childList:true,characterData:true,subtree:true})}else{document.addEventListener("DOMSubtreeModified",this.refresh);this.mutationEventsAdded_=true}this.connected_=true};t.prototype.disconnect_=function(){if(!n||!this.connected_){return}document.removeEventListener("transitionend",this.onTransitionEnd_);window.removeEventListener("resize",this.refresh);if(this.mutationsObserver_){this.mutationsObserver_.disconnect()}if(this.mutationEventsAdded_){document.removeEventListener("DOMSubtreeModified",this.refresh)}this.mutationsObserver_=null;this.mutationEventsAdded_=false;this.connected_=false};t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=e===void 0?"":e;var r=u.some((function(t){return!!~n.indexOf(t)}));if(r){this.refresh()}};t.getInstance=function(){if(!this.instance_){this.instance_=new t}return this.instance_};t.instance_=null;return t}();var h=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:false,writable:false,configurable:true})}return t};var d=function(t){var e=t&&t.ownerDocument&&t.ownerDocument.defaultView;return e||r};var v=O(0,0,0,0);function l(t){return parseFloat(t)||0}function p(t){var e=[];for(var n=1;n<arguments.length;n++){e[n-1]=arguments[n]}return e.reduce((function(e,n){var r=t["border-"+n+"-width"];return e+l(r)}),0)}function _(t){var e=["top","right","bottom","left"];var n={};for(var r=0,i=e;r<i.length;r++){var o=i[r];var s=t["padding-"+o];n[o]=l(s)}return n}function b(t){var e=t.getBBox();return O(0,0,e.width,e.height)}function m(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n){return v}var r=d(t).getComputedStyle(t);var i=_(r);var o=i.left+i.right;var s=i.top+i.bottom;var a=l(r.width),u=l(r.height);if(r.boxSizing==="border-box"){if(Math.round(a+o)!==e){a-=p(r,"left","right")+o}if(Math.round(u+s)!==n){u-=p(r,"top","bottom")+s}}if(!g(t)){var c=Math.round(a+o)-e;var f=Math.round(u+s)-n;if(Math.abs(c)!==1){a-=c}if(Math.abs(f)!==1){u-=f}}return O(i.left,i.top,a,u)}var y=function(){if(typeof SVGGraphicsElement!=="undefined"){return function(t){return t instanceof d(t).SVGGraphicsElement}}return function(t){return t instanceof d(t).SVGElement&&typeof t.getBBox==="function"}}();function g(t){return t===d(t).document.documentElement}function w(t){if(!n){return v}if(y(t)){return b(t)}return m(t)}function E(t){var e=t.x,n=t.y,r=t.width,i=t.height;var o=typeof DOMRectReadOnly!=="undefined"?DOMRectReadOnly:Object;var s=Object.create(o.prototype);h(s,{x:e,y:n,width:r,height:i,top:n,right:e+r,bottom:i+n,left:e});return s}function O(t,e,n,r){return{x:t,y:e,width:n,height:r}}var M=function(){function t(t){this.broadcastWidth=0;this.broadcastHeight=0;this.contentRect_=O(0,0,0,0);this.target=t}t.prototype.isActive=function(){var t=w(this.target);this.contentRect_=t;return t.width!==this.broadcastWidth||t.height!==this.broadcastHeight};t.prototype.broadcastRect=function(){var t=this.contentRect_;this.broadcastWidth=t.width;this.broadcastHeight=t.height;return t};return t}();var A=function(){function t(t,e){var n=E(e);h(this,{target:t,contentRect:n})}return t}();var T=function(){function t(t,n,r){this.activeObservations_=[];this.observations_=new e;if(typeof t!=="function"){throw new TypeError("The callback provided as parameter 1 is not a function.")}this.callback_=t;this.controller_=n;this.callbackCtx_=r}t.prototype.observe=function(t){if(!arguments.length){throw new TypeError("1 argument required, but only 0 present.")}if(typeof Element==="undefined"||!(Element instanceof Object)){return}if(!(t instanceof d(t).Element)){throw new TypeError('parameter 1 is not of type "Element".')}var e=this.observations_;if(e.has(t)){return}e.set(t,new M(t));this.controller_.addObserver(this);this.controller_.refresh()};t.prototype.unobserve=function(t){if(!arguments.length){throw new TypeError("1 argument required, but only 0 present.")}if(typeof Element==="undefined"||!(Element instanceof Object)){return}if(!(t instanceof d(t).Element)){throw new TypeError('parameter 1 is not of type "Element".')}var e=this.observations_;if(!e.has(t)){return}e.delete(t);if(!e.size){this.controller_.removeObserver(this)}};t.prototype.disconnect=function(){this.clearActive();this.observations_.clear();this.controller_.removeObserver(this)};t.prototype.gatherActive=function(){var t=this;this.clearActive();this.observations_.forEach((function(e){if(e.isActive()){t.activeObservations_.push(e)}}))};t.prototype.broadcastActive=function(){if(!this.hasActive()){return}var t=this.callbackCtx_;var e=this.activeObservations_.map((function(t){return new A(t.target,t.broadcastRect())}));this.callback_.call(t,e,t);this.clearActive()};t.prototype.clearActive=function(){this.activeObservations_.splice(0)};t.prototype.hasActive=function(){return this.activeObservations_.length>0};return t}();var x=typeof WeakMap!=="undefined"?new WeakMap:new e;var R=function(){function t(e){if(!(this instanceof t)){throw new TypeError("Cannot call a class as a function.")}if(!arguments.length){throw new TypeError("1 argument required, but only 0 present.")}var n=f.getInstance();var r=new T(e,n,this);x.set(this,r)}return t}();["observe","unobserve","disconnect"].forEach((function(t){R.prototype[t]=function(){var e;return(e=x.get(this))[t].apply(e,arguments)}}));var D=t("i",function(){if(typeof r.ResizeObserver!=="undefined"){return r.ResizeObserver}return R}())}}}));
-//# sourceMappingURL=p-b430a9b6.system.js.map

package/dist/nano-components/p-b430a9b6.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js"],"names":["MapShim","Map","getIndex","arr","key","result","some","entry","index","class_1","this","__entries__","Object","defineProperty","prototype","get","length","enumerable","configurable","set","value","push","delete","entries","splice","has","clear","forEach","callback","ctx","_i","_a","call","isBrowser","window","document","global$1","global","Math","self","Function","requestAnimationFrame$1","requestAnimationFrame","bind","setTimeout","Date","now","trailingTimeout","throttle","delay","leadingCall","trailingCall","lastCallTime","resolvePending","proxy","timeoutCallback","timeStamp","REFRESH_DELAY","transitionKeys","mutationObserverSupported","MutationObserver","ResizeObserverController","connected_","mutationEventsAdded_","mutationsObserver_","observers_","onTransitionEnd_","refresh","addObserver","observer","indexOf","connect_","removeObserver","observers","disconnect_","changesDetected","updateObservers_","activeObservers","filter","gatherActive","hasActive","broadcastActive","addEventListener","observe","attributes","childList","characterData","subtree","removeEventListener","disconnect","_b","propertyName","isReflowProperty","getInstance","instance_","defineConfigurable","target","props","keys","writable","getWindowOf","ownerGlobal","ownerDocument","defaultView","emptyRect","createRectInit","toFloat","parseFloat","getBordersSize","styles","positions","arguments","reduce","size","position","getPaddings","paddings","positions_1","getSVGContentRect","bbox","getBBox","width","height","getHTMLElementContentRect","clientWidth","clientHeight","getComputedStyle","horizPad","left","right","vertPad","top","bottom","boxSizing","round","isDocumentElement","vertScrollbar","horizScrollbar","abs","isSVGGraphicsElement","SVGGraphicsElement","SVGElement","documentElement","getContentRect","createReadOnlyRect","x","y","Constr","DOMRectReadOnly","rect","create","ResizeObservation","broadcastWidth","broadcastHeight","contentRect_","isActive","broadcastRect","ResizeObserverEntry","rectInit","contentRect","ResizeObserverSPI","controller","callbackCtx","activeObservations_","observations_","TypeError","callback_","controller_","callbackCtx_","Element","observations","unobserve","clearActive","_this","observation","map","WeakMap","ResizeObserver","method","apply","exports"],"mappings":"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","sourcesContent":["/**\r\n * A collection of shims that provide minimal functionality of the ES6 collections.\r\n *\r\n * These implementations are not meant to be used outside of the ResizeObserver\r\n * modules as they cover only a limited range of use cases.\r\n */\r\n/* eslint-disable require-jsdoc, valid-jsdoc */\r\nvar MapShim = (function () {\r\n    if (typeof Map !== 'undefined') {\r\n        return Map;\r\n    }\r\n    /**\r\n     * Returns index in provided array that matches the specified key.\r\n     *\r\n     * @param {Array<Array>} arr\r\n     * @param {*} key\r\n     * @returns {number}\r\n     */\r\n    function getIndex(arr, key) {\r\n        var result = -1;\r\n        arr.some(function (entry, index) {\r\n            if (entry[0] === key) {\r\n                result = index;\r\n                return true;\r\n            }\r\n            return false;\r\n        });\r\n        return result;\r\n    }\r\n    return /** @class */ (function () {\r\n        function class_1() {\r\n            this.__entries__ = [];\r\n        }\r\n        Object.defineProperty(class_1.prototype, \"size\", {\r\n            /**\r\n             * @returns {boolean}\r\n             */\r\n            get: function () {\r\n                return this.__entries__.length;\r\n            },\r\n            enumerable: true,\r\n            configurable: true\r\n        });\r\n        /**\r\n         * @param {*} key\r\n         * @returns {*}\r\n         */\r\n        class_1.prototype.get = function (key) {\r\n            var index = getIndex(this.__entries__, key);\r\n            var entry = this.__entries__[index];\r\n            return entry && entry[1];\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @param {*} value\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.set = function (key, value) {\r\n            var index = getIndex(this.__entries__, key);\r\n            if (~index) {\r\n                this.__entries__[index][1] = value;\r\n            }\r\n            else {\r\n                this.__entries__.push([key, value]);\r\n            }\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.delete = function (key) {\r\n            var entries = this.__entries__;\r\n            var index = getIndex(entries, key);\r\n            if (~index) {\r\n                entries.splice(index, 1);\r\n            }\r\n        };\r\n        /**\r\n         * @param {*} key\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.has = function (key) {\r\n            return !!~getIndex(this.__entries__, key);\r\n        };\r\n        /**\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.clear = function () {\r\n            this.__entries__.splice(0);\r\n        };\r\n        /**\r\n         * @param {Function} callback\r\n         * @param {*} [ctx=null]\r\n         * @returns {void}\r\n         */\r\n        class_1.prototype.forEach = function (callback, ctx) {\r\n            if (ctx === void 0) { ctx = null; }\r\n            for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {\r\n                var entry = _a[_i];\r\n                callback.call(ctx, entry[1], entry[0]);\r\n            }\r\n        };\r\n        return class_1;\r\n    }());\r\n})();\n\n/**\r\n * Detects whether window and document objects are available in current environment.\r\n */\r\nvar isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;\n\n// Returns global object of a current environment.\r\nvar global$1 = (function () {\r\n    if (typeof global !== 'undefined' && global.Math === Math) {\r\n        return global;\r\n    }\r\n    if (typeof self !== 'undefined' && self.Math === Math) {\r\n        return self;\r\n    }\r\n    if (typeof window !== 'undefined' && window.Math === Math) {\r\n        return window;\r\n    }\r\n    // eslint-disable-next-line no-new-func\r\n    return Function('return this')();\r\n})();\n\n/**\r\n * A shim for the requestAnimationFrame which falls back to the setTimeout if\r\n * first one is not supported.\r\n *\r\n * @returns {number} Requests' identifier.\r\n */\r\nvar requestAnimationFrame$1 = (function () {\r\n    if (typeof requestAnimationFrame === 'function') {\r\n        // It's required to use a bounded function because IE sometimes throws\r\n        // an \"Invalid calling object\" error if rAF is invoked without the global\r\n        // object on the left hand side.\r\n        return requestAnimationFrame.bind(global$1);\r\n    }\r\n    return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };\r\n})();\n\n// Defines minimum timeout before adding a trailing call.\r\nvar trailingTimeout = 2;\r\n/**\r\n * Creates a wrapper function which ensures that provided callback will be\r\n * invoked only once during the specified delay period.\r\n *\r\n * @param {Function} callback - Function to be invoked after the delay period.\r\n * @param {number} delay - Delay after which to invoke callback.\r\n * @returns {Function}\r\n */\r\nfunction throttle (callback, delay) {\r\n    var leadingCall = false, trailingCall = false, lastCallTime = 0;\r\n    /**\r\n     * Invokes the original callback function and schedules new invocation if\r\n     * the \"proxy\" was called during current request.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function resolvePending() {\r\n        if (leadingCall) {\r\n            leadingCall = false;\r\n            callback();\r\n        }\r\n        if (trailingCall) {\r\n            proxy();\r\n        }\r\n    }\r\n    /**\r\n     * Callback invoked after the specified delay. It will further postpone\r\n     * invocation of the original function delegating it to the\r\n     * requestAnimationFrame.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function timeoutCallback() {\r\n        requestAnimationFrame$1(resolvePending);\r\n    }\r\n    /**\r\n     * Schedules invocation of the original function.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    function proxy() {\r\n        var timeStamp = Date.now();\r\n        if (leadingCall) {\r\n            // Reject immediately following calls.\r\n            if (timeStamp - lastCallTime < trailingTimeout) {\r\n                return;\r\n            }\r\n            // Schedule new call to be in invoked when the pending one is resolved.\r\n            // This is important for \"transitions\" which never actually start\r\n            // immediately so there is a chance that we might miss one if change\r\n            // happens amids the pending invocation.\r\n            trailingCall = true;\r\n        }\r\n        else {\r\n            leadingCall = true;\r\n            trailingCall = false;\r\n            setTimeout(timeoutCallback, delay);\r\n        }\r\n        lastCallTime = timeStamp;\r\n    }\r\n    return proxy;\r\n}\n\n// Minimum delay before invoking the update of observers.\r\nvar REFRESH_DELAY = 20;\r\n// A list of substrings of CSS properties used to find transition events that\r\n// might affect dimensions of observed elements.\r\nvar transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];\r\n// Check if MutationObserver is available.\r\nvar mutationObserverSupported = typeof MutationObserver !== 'undefined';\r\n/**\r\n * Singleton controller class which handles updates of ResizeObserver instances.\r\n */\r\nvar ResizeObserverController = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserverController.\r\n     *\r\n     * @private\r\n     */\r\n    function ResizeObserverController() {\r\n        /**\r\n         * Indicates whether DOM listeners have been added.\r\n         *\r\n         * @private {boolean}\r\n         */\r\n        this.connected_ = false;\r\n        /**\r\n         * Tells that controller has subscribed for Mutation Events.\r\n         *\r\n         * @private {boolean}\r\n         */\r\n        this.mutationEventsAdded_ = false;\r\n        /**\r\n         * Keeps reference to the instance of MutationObserver.\r\n         *\r\n         * @private {MutationObserver}\r\n         */\r\n        this.mutationsObserver_ = null;\r\n        /**\r\n         * A list of connected observers.\r\n         *\r\n         * @private {Array<ResizeObserverSPI>}\r\n         */\r\n        this.observers_ = [];\r\n        this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);\r\n        this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);\r\n    }\r\n    /**\r\n     * Adds observer to observers list.\r\n     *\r\n     * @param {ResizeObserverSPI} observer - Observer to be added.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.addObserver = function (observer) {\r\n        if (!~this.observers_.indexOf(observer)) {\r\n            this.observers_.push(observer);\r\n        }\r\n        // Add listeners if they haven't been added yet.\r\n        if (!this.connected_) {\r\n            this.connect_();\r\n        }\r\n    };\r\n    /**\r\n     * Removes observer from observers list.\r\n     *\r\n     * @param {ResizeObserverSPI} observer - Observer to be removed.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.removeObserver = function (observer) {\r\n        var observers = this.observers_;\r\n        var index = observers.indexOf(observer);\r\n        // Remove observer if it's present in registry.\r\n        if (~index) {\r\n            observers.splice(index, 1);\r\n        }\r\n        // Remove listeners if controller has no connected observers.\r\n        if (!observers.length && this.connected_) {\r\n            this.disconnect_();\r\n        }\r\n    };\r\n    /**\r\n     * Invokes the update of observers. It will continue running updates insofar\r\n     * it detects changes.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.refresh = function () {\r\n        var changesDetected = this.updateObservers_();\r\n        // Continue running updates if changes have been detected as there might\r\n        // be future ones caused by CSS transitions.\r\n        if (changesDetected) {\r\n            this.refresh();\r\n        }\r\n    };\r\n    /**\r\n     * Updates every observer from observers list and notifies them of queued\r\n     * entries.\r\n     *\r\n     * @private\r\n     * @returns {boolean} Returns \"true\" if any observer has detected changes in\r\n     *      dimensions of it's elements.\r\n     */\r\n    ResizeObserverController.prototype.updateObservers_ = function () {\r\n        // Collect observers that have active observations.\r\n        var activeObservers = this.observers_.filter(function (observer) {\r\n            return observer.gatherActive(), observer.hasActive();\r\n        });\r\n        // Deliver notifications in a separate cycle in order to avoid any\r\n        // collisions between observers, e.g. when multiple instances of\r\n        // ResizeObserver are tracking the same element and the callback of one\r\n        // of them changes content dimensions of the observed target. Sometimes\r\n        // this may result in notifications being blocked for the rest of observers.\r\n        activeObservers.forEach(function (observer) { return observer.broadcastActive(); });\r\n        return activeObservers.length > 0;\r\n    };\r\n    /**\r\n     * Initializes DOM listeners.\r\n     *\r\n     * @private\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.connect_ = function () {\r\n        // Do nothing if running in a non-browser environment or if listeners\r\n        // have been already added.\r\n        if (!isBrowser || this.connected_) {\r\n            return;\r\n        }\r\n        // Subscription to the \"Transitionend\" event is used as a workaround for\r\n        // delayed transitions. This way it's possible to capture at least the\r\n        // final state of an element.\r\n        document.addEventListener('transitionend', this.onTransitionEnd_);\r\n        window.addEventListener('resize', this.refresh);\r\n        if (mutationObserverSupported) {\r\n            this.mutationsObserver_ = new MutationObserver(this.refresh);\r\n            this.mutationsObserver_.observe(document, {\r\n                attributes: true,\r\n                childList: true,\r\n                characterData: true,\r\n                subtree: true\r\n            });\r\n        }\r\n        else {\r\n            document.addEventListener('DOMSubtreeModified', this.refresh);\r\n            this.mutationEventsAdded_ = true;\r\n        }\r\n        this.connected_ = true;\r\n    };\r\n    /**\r\n     * Removes DOM listeners.\r\n     *\r\n     * @private\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.disconnect_ = function () {\r\n        // Do nothing if running in a non-browser environment or if listeners\r\n        // have been already removed.\r\n        if (!isBrowser || !this.connected_) {\r\n            return;\r\n        }\r\n        document.removeEventListener('transitionend', this.onTransitionEnd_);\r\n        window.removeEventListener('resize', this.refresh);\r\n        if (this.mutationsObserver_) {\r\n            this.mutationsObserver_.disconnect();\r\n        }\r\n        if (this.mutationEventsAdded_) {\r\n            document.removeEventListener('DOMSubtreeModified', this.refresh);\r\n        }\r\n        this.mutationsObserver_ = null;\r\n        this.mutationEventsAdded_ = false;\r\n        this.connected_ = false;\r\n    };\r\n    /**\r\n     * \"Transitionend\" event handler.\r\n     *\r\n     * @private\r\n     * @param {TransitionEvent} event\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {\r\n        var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;\r\n        // Detect whether transition may affect dimensions of an element.\r\n        var isReflowProperty = transitionKeys.some(function (key) {\r\n            return !!~propertyName.indexOf(key);\r\n        });\r\n        if (isReflowProperty) {\r\n            this.refresh();\r\n        }\r\n    };\r\n    /**\r\n     * Returns instance of the ResizeObserverController.\r\n     *\r\n     * @returns {ResizeObserverController}\r\n     */\r\n    ResizeObserverController.getInstance = function () {\r\n        if (!this.instance_) {\r\n            this.instance_ = new ResizeObserverController();\r\n        }\r\n        return this.instance_;\r\n    };\r\n    /**\r\n     * Holds reference to the controller's instance.\r\n     *\r\n     * @private {ResizeObserverController}\r\n     */\r\n    ResizeObserverController.instance_ = null;\r\n    return ResizeObserverController;\r\n}());\n\n/**\r\n * Defines non-writable/enumerable properties of the provided target object.\r\n *\r\n * @param {Object} target - Object for which to define properties.\r\n * @param {Object} props - Properties to be defined.\r\n * @returns {Object} Target object.\r\n */\r\nvar defineConfigurable = (function (target, props) {\r\n    for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {\r\n        var key = _a[_i];\r\n        Object.defineProperty(target, key, {\r\n            value: props[key],\r\n            enumerable: false,\r\n            writable: false,\r\n            configurable: true\r\n        });\r\n    }\r\n    return target;\r\n});\n\n/**\r\n * Returns the global object associated with provided element.\r\n *\r\n * @param {Object} target\r\n * @returns {Object}\r\n */\r\nvar getWindowOf = (function (target) {\r\n    // Assume that the element is an instance of Node, which means that it\r\n    // has the \"ownerDocument\" property from which we can retrieve a\r\n    // corresponding global object.\r\n    var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;\r\n    // Return the local global object if it's not possible extract one from\r\n    // provided element.\r\n    return ownerGlobal || global$1;\r\n});\n\n// Placeholder of an empty content rectangle.\r\nvar emptyRect = createRectInit(0, 0, 0, 0);\r\n/**\r\n * Converts provided string to a number.\r\n *\r\n * @param {number|string} value\r\n * @returns {number}\r\n */\r\nfunction toFloat(value) {\r\n    return parseFloat(value) || 0;\r\n}\r\n/**\r\n * Extracts borders size from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @param {...string} positions - Borders positions (top, right, ...)\r\n * @returns {number}\r\n */\r\nfunction getBordersSize(styles) {\r\n    var positions = [];\r\n    for (var _i = 1; _i < arguments.length; _i++) {\r\n        positions[_i - 1] = arguments[_i];\r\n    }\r\n    return positions.reduce(function (size, position) {\r\n        var value = styles['border-' + position + '-width'];\r\n        return size + toFloat(value);\r\n    }, 0);\r\n}\r\n/**\r\n * Extracts paddings sizes from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @returns {Object} Paddings box.\r\n */\r\nfunction getPaddings(styles) {\r\n    var positions = ['top', 'right', 'bottom', 'left'];\r\n    var paddings = {};\r\n    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {\r\n        var position = positions_1[_i];\r\n        var value = styles['padding-' + position];\r\n        paddings[position] = toFloat(value);\r\n    }\r\n    return paddings;\r\n}\r\n/**\r\n * Calculates content rectangle of provided SVG element.\r\n *\r\n * @param {SVGGraphicsElement} target - Element content rectangle of which needs\r\n *      to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getSVGContentRect(target) {\r\n    var bbox = target.getBBox();\r\n    return createRectInit(0, 0, bbox.width, bbox.height);\r\n}\r\n/**\r\n * Calculates content rectangle of provided HTMLElement.\r\n *\r\n * @param {HTMLElement} target - Element for which to calculate the content rectangle.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getHTMLElementContentRect(target) {\r\n    // Client width & height properties can't be\r\n    // used exclusively as they provide rounded values.\r\n    var clientWidth = target.clientWidth, clientHeight = target.clientHeight;\r\n    // By this condition we can catch all non-replaced inline, hidden and\r\n    // detached elements. Though elements with width & height properties less\r\n    // than 0.5 will be discarded as well.\r\n    //\r\n    // Without it we would need to implement separate methods for each of\r\n    // those cases and it's not possible to perform a precise and performance\r\n    // effective test for hidden elements. E.g. even jQuery's ':visible' filter\r\n    // gives wrong results for elements with width & height less than 0.5.\r\n    if (!clientWidth && !clientHeight) {\r\n        return emptyRect;\r\n    }\r\n    var styles = getWindowOf(target).getComputedStyle(target);\r\n    var paddings = getPaddings(styles);\r\n    var horizPad = paddings.left + paddings.right;\r\n    var vertPad = paddings.top + paddings.bottom;\r\n    // Computed styles of width & height are being used because they are the\r\n    // only dimensions available to JS that contain non-rounded values. It could\r\n    // be possible to utilize the getBoundingClientRect if only it's data wasn't\r\n    // affected by CSS transformations let alone paddings, borders and scroll bars.\r\n    var width = toFloat(styles.width), height = toFloat(styles.height);\r\n    // Width & height include paddings and borders when the 'border-box' box\r\n    // model is applied (except for IE).\r\n    if (styles.boxSizing === 'border-box') {\r\n        // Following conditions are required to handle Internet Explorer which\r\n        // doesn't include paddings and borders to computed CSS dimensions.\r\n        //\r\n        // We can say that if CSS dimensions + paddings are equal to the \"client\"\r\n        // properties then it's either IE, and thus we don't need to subtract\r\n        // anything, or an element merely doesn't have paddings/borders styles.\r\n        if (Math.round(width + horizPad) !== clientWidth) {\r\n            width -= getBordersSize(styles, 'left', 'right') + horizPad;\r\n        }\r\n        if (Math.round(height + vertPad) !== clientHeight) {\r\n            height -= getBordersSize(styles, 'top', 'bottom') + vertPad;\r\n        }\r\n    }\r\n    // Following steps can't be applied to the document's root element as its\r\n    // client[Width/Height] properties represent viewport area of the window.\r\n    // Besides, it's as well not necessary as the <html> itself neither has\r\n    // rendered scroll bars nor it can be clipped.\r\n    if (!isDocumentElement(target)) {\r\n        // In some browsers (only in Firefox, actually) CSS width & height\r\n        // include scroll bars size which can be removed at this step as scroll\r\n        // bars are the only difference between rounded dimensions + paddings\r\n        // and \"client\" properties, though that is not always true in Chrome.\r\n        var vertScrollbar = Math.round(width + horizPad) - clientWidth;\r\n        var horizScrollbar = Math.round(height + vertPad) - clientHeight;\r\n        // Chrome has a rather weird rounding of \"client\" properties.\r\n        // E.g. for an element with content width of 314.2px it sometimes gives\r\n        // the client width of 315px and for the width of 314.7px it may give\r\n        // 314px. And it doesn't happen all the time. So just ignore this delta\r\n        // as a non-relevant.\r\n        if (Math.abs(vertScrollbar) !== 1) {\r\n            width -= vertScrollbar;\r\n        }\r\n        if (Math.abs(horizScrollbar) !== 1) {\r\n            height -= horizScrollbar;\r\n        }\r\n    }\r\n    return createRectInit(paddings.left, paddings.top, width, height);\r\n}\r\n/**\r\n * Checks whether provided element is an instance of the SVGGraphicsElement.\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nvar isSVGGraphicsElement = (function () {\r\n    // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement\r\n    // interface.\r\n    if (typeof SVGGraphicsElement !== 'undefined') {\r\n        return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };\r\n    }\r\n    // If it's so, then check that element is at least an instance of the\r\n    // SVGElement and that it has the \"getBBox\" method.\r\n    // eslint-disable-next-line no-extra-parens\r\n    return function (target) { return (target instanceof getWindowOf(target).SVGElement &&\r\n        typeof target.getBBox === 'function'); };\r\n})();\r\n/**\r\n * Checks whether provided element is a document element (<html>).\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nfunction isDocumentElement(target) {\r\n    return target === getWindowOf(target).document.documentElement;\r\n}\r\n/**\r\n * Calculates an appropriate content rectangle for provided html or svg element.\r\n *\r\n * @param {Element} target - Element content rectangle of which needs to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getContentRect(target) {\r\n    if (!isBrowser) {\r\n        return emptyRect;\r\n    }\r\n    if (isSVGGraphicsElement(target)) {\r\n        return getSVGContentRect(target);\r\n    }\r\n    return getHTMLElementContentRect(target);\r\n}\r\n/**\r\n * Creates rectangle with an interface of the DOMRectReadOnly.\r\n * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly\r\n *\r\n * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.\r\n * @returns {DOMRectReadOnly}\r\n */\r\nfunction createReadOnlyRect(_a) {\r\n    var x = _a.x, y = _a.y, width = _a.width, height = _a.height;\r\n    // If DOMRectReadOnly is available use it as a prototype for the rectangle.\r\n    var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;\r\n    var rect = Object.create(Constr.prototype);\r\n    // Rectangle's properties are not writable and non-enumerable.\r\n    defineConfigurable(rect, {\r\n        x: x, y: y, width: width, height: height,\r\n        top: y,\r\n        right: x + width,\r\n        bottom: height + y,\r\n        left: x\r\n    });\r\n    return rect;\r\n}\r\n/**\r\n * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.\r\n * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit\r\n *\r\n * @param {number} x - X coordinate.\r\n * @param {number} y - Y coordinate.\r\n * @param {number} width - Rectangle's width.\r\n * @param {number} height - Rectangle's height.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction createRectInit(x, y, width, height) {\r\n    return { x: x, y: y, width: width, height: height };\r\n}\n\n/**\r\n * Class that is responsible for computations of the content rectangle of\r\n * provided DOM element and for keeping track of it's changes.\r\n */\r\nvar ResizeObservation = /** @class */ (function () {\r\n    /**\r\n     * Creates an instance of ResizeObservation.\r\n     *\r\n     * @param {Element} target - Element to be observed.\r\n     */\r\n    function ResizeObservation(target) {\r\n        /**\r\n         * Broadcasted width of content rectangle.\r\n         *\r\n         * @type {number}\r\n         */\r\n        this.broadcastWidth = 0;\r\n        /**\r\n         * Broadcasted height of content rectangle.\r\n         *\r\n         * @type {number}\r\n         */\r\n        this.broadcastHeight = 0;\r\n        /**\r\n         * Reference to the last observed content rectangle.\r\n         *\r\n         * @private {DOMRectInit}\r\n         */\r\n        this.contentRect_ = createRectInit(0, 0, 0, 0);\r\n        this.target = target;\r\n    }\r\n    /**\r\n     * Updates content rectangle and tells whether it's width or height properties\r\n     * have changed since the last broadcast.\r\n     *\r\n     * @returns {boolean}\r\n     */\r\n    ResizeObservation.prototype.isActive = function () {\r\n        var rect = getContentRect(this.target);\r\n        this.contentRect_ = rect;\r\n        return (rect.width !== this.broadcastWidth ||\r\n            rect.height !== this.broadcastHeight);\r\n    };\r\n    /**\r\n     * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data\r\n     * from the corresponding properties of the last observed content rectangle.\r\n     *\r\n     * @returns {DOMRectInit} Last observed content rectangle.\r\n     */\r\n    ResizeObservation.prototype.broadcastRect = function () {\r\n        var rect = this.contentRect_;\r\n        this.broadcastWidth = rect.width;\r\n        this.broadcastHeight = rect.height;\r\n        return rect;\r\n    };\r\n    return ResizeObservation;\r\n}());\n\nvar ResizeObserverEntry = /** @class */ (function () {\r\n    /**\r\n     * Creates an instance of ResizeObserverEntry.\r\n     *\r\n     * @param {Element} target - Element that is being observed.\r\n     * @param {DOMRectInit} rectInit - Data of the element's content rectangle.\r\n     */\r\n    function ResizeObserverEntry(target, rectInit) {\r\n        var contentRect = createReadOnlyRect(rectInit);\r\n        // According to the specification following properties are not writable\r\n        // and are also not enumerable in the native implementation.\r\n        //\r\n        // Property accessors are not being used as they'd require to define a\r\n        // private WeakMap storage which may cause memory leaks in browsers that\r\n        // don't support this type of collections.\r\n        defineConfigurable(this, { target: target, contentRect: contentRect });\r\n    }\r\n    return ResizeObserverEntry;\r\n}());\n\nvar ResizeObserverSPI = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserver.\r\n     *\r\n     * @param {ResizeObserverCallback} callback - Callback function that is invoked\r\n     *      when one of the observed elements changes it's content dimensions.\r\n     * @param {ResizeObserverController} controller - Controller instance which\r\n     *      is responsible for the updates of observer.\r\n     * @param {ResizeObserver} callbackCtx - Reference to the public\r\n     *      ResizeObserver instance which will be passed to callback function.\r\n     */\r\n    function ResizeObserverSPI(callback, controller, callbackCtx) {\r\n        /**\r\n         * Collection of resize observations that have detected changes in dimensions\r\n         * of elements.\r\n         *\r\n         * @private {Array<ResizeObservation>}\r\n         */\r\n        this.activeObservations_ = [];\r\n        /**\r\n         * Registry of the ResizeObservation instances.\r\n         *\r\n         * @private {Map<Element, ResizeObservation>}\r\n         */\r\n        this.observations_ = new MapShim();\r\n        if (typeof callback !== 'function') {\r\n            throw new TypeError('The callback provided as parameter 1 is not a function.');\r\n        }\r\n        this.callback_ = callback;\r\n        this.controller_ = controller;\r\n        this.callbackCtx_ = callbackCtx;\r\n    }\r\n    /**\r\n     * Starts observing provided element.\r\n     *\r\n     * @param {Element} target - Element to be observed.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.observe = function (target) {\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        // Do nothing if current environment doesn't have the Element interface.\r\n        if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n            return;\r\n        }\r\n        if (!(target instanceof getWindowOf(target).Element)) {\r\n            throw new TypeError('parameter 1 is not of type \"Element\".');\r\n        }\r\n        var observations = this.observations_;\r\n        // Do nothing if element is already being observed.\r\n        if (observations.has(target)) {\r\n            return;\r\n        }\r\n        observations.set(target, new ResizeObservation(target));\r\n        this.controller_.addObserver(this);\r\n        // Force the update of observations.\r\n        this.controller_.refresh();\r\n    };\r\n    /**\r\n     * Stops observing provided element.\r\n     *\r\n     * @param {Element} target - Element to stop observing.\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.unobserve = function (target) {\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        // Do nothing if current environment doesn't have the Element interface.\r\n        if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n            return;\r\n        }\r\n        if (!(target instanceof getWindowOf(target).Element)) {\r\n            throw new TypeError('parameter 1 is not of type \"Element\".');\r\n        }\r\n        var observations = this.observations_;\r\n        // Do nothing if element is not being observed.\r\n        if (!observations.has(target)) {\r\n            return;\r\n        }\r\n        observations.delete(target);\r\n        if (!observations.size) {\r\n            this.controller_.removeObserver(this);\r\n        }\r\n    };\r\n    /**\r\n     * Stops observing all elements.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.disconnect = function () {\r\n        this.clearActive();\r\n        this.observations_.clear();\r\n        this.controller_.removeObserver(this);\r\n    };\r\n    /**\r\n     * Collects observation instances the associated element of which has changed\r\n     * it's content rectangle.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.gatherActive = function () {\r\n        var _this = this;\r\n        this.clearActive();\r\n        this.observations_.forEach(function (observation) {\r\n            if (observation.isActive()) {\r\n                _this.activeObservations_.push(observation);\r\n            }\r\n        });\r\n    };\r\n    /**\r\n     * Invokes initial callback function with a list of ResizeObserverEntry\r\n     * instances collected from active resize observations.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.broadcastActive = function () {\r\n        // Do nothing if observer doesn't have active observations.\r\n        if (!this.hasActive()) {\r\n            return;\r\n        }\r\n        var ctx = this.callbackCtx_;\r\n        // Create ResizeObserverEntry instance for every active observation.\r\n        var entries = this.activeObservations_.map(function (observation) {\r\n            return new ResizeObserverEntry(observation.target, observation.broadcastRect());\r\n        });\r\n        this.callback_.call(ctx, entries, ctx);\r\n        this.clearActive();\r\n    };\r\n    /**\r\n     * Clears the collection of active observations.\r\n     *\r\n     * @returns {void}\r\n     */\r\n    ResizeObserverSPI.prototype.clearActive = function () {\r\n        this.activeObservations_.splice(0);\r\n    };\r\n    /**\r\n     * Tells whether observer has active observations.\r\n     *\r\n     * @returns {boolean}\r\n     */\r\n    ResizeObserverSPI.prototype.hasActive = function () {\r\n        return this.activeObservations_.length > 0;\r\n    };\r\n    return ResizeObserverSPI;\r\n}());\n\n// Registry of internal observers. If WeakMap is not available use current shim\r\n// for the Map collection as it has all required methods and because WeakMap\r\n// can't be fully polyfilled anyway.\r\nvar observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();\r\n/**\r\n * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation\r\n * exposing only those methods and properties that are defined in the spec.\r\n */\r\nvar ResizeObserver = /** @class */ (function () {\r\n    /**\r\n     * Creates a new instance of ResizeObserver.\r\n     *\r\n     * @param {ResizeObserverCallback} callback - Callback that is invoked when\r\n     *      dimensions of the observed elements change.\r\n     */\r\n    function ResizeObserver(callback) {\r\n        if (!(this instanceof ResizeObserver)) {\r\n            throw new TypeError('Cannot call a class as a function.');\r\n        }\r\n        if (!arguments.length) {\r\n            throw new TypeError('1 argument required, but only 0 present.');\r\n        }\r\n        var controller = ResizeObserverController.getInstance();\r\n        var observer = new ResizeObserverSPI(callback, controller, this);\r\n        observers.set(this, observer);\r\n    }\r\n    return ResizeObserver;\r\n}());\r\n// Expose public methods of ResizeObserver.\r\n[\r\n    'observe',\r\n    'unobserve',\r\n    'disconnect'\r\n].forEach(function (method) {\r\n    ResizeObserver.prototype[method] = function () {\r\n        var _a;\r\n        return (_a = observers.get(this))[method].apply(_a, arguments);\r\n    };\r\n});\n\nvar index = (function () {\r\n    // Export existing implementation if available.\r\n    if (typeof global$1.ResizeObserver !== 'undefined') {\r\n        return global$1.ResizeObserver;\r\n    }\r\n    return ResizeObserver;\r\n})();\n\nexport default index;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","exports","class_1","hostRef","_this","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","showInlineValidation","nanoBlur","emit","onFocus","nanoFocus","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","onInvalid","ev","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","form","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","prototype","fileListChange","arrToFileList","setTimeout","shouldValidate","requestAnimationFrame","Object","defineProperty","Array","from","objectURL","URL","createObjectURL","val","reportValidity","validateFirst","isValid","invalid","setFocus","focus","getInputElement","Promise","resolve","showError","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","document","querySelector","i","len","items","add","match","nanoValidate","originalEvent","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","newFiles","findFile","__spreadArray","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":";;;qKAAA,IAAMA,EAAgB,i1dCsBtB,IAAIC,EAAe,EAEnB,IAAIC,EAAkB,WAAM,OAAA,IAAIC,cAChC,IACED,IACA,MAAAE,GACA,IACEF,EAAkB,WAAM,OAAA,IAAIG,eAAe,IAAIC,eAC/CJ,IACA,MAAAK,GACAL,EAAkB,UAsBTM,EAAUC,EAAA,mBAAA,WALvB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,yKASUA,KAAAC,YAAc,oBAAoBb,IAClCY,KAAAE,oBAAsBb,EACtBW,KAAAG,YAAgC,GAI/BH,KAAAI,aAAuB,GACvBJ,KAAAK,WAAa,MACbL,KAAAM,SAA6B,GAgC9BN,KAAAO,YAAsB,EAGtBP,KAAAQ,SAAmB,EAMnBR,KAAAS,YAAsB,mBAGtBT,KAAAU,UAAsB,MAGtBV,KAAAW,SAAW,MAGMX,KAAAY,SAAW,MAI5BZ,KAAAa,WAAa,MAGIb,KAAAc,gBAAkB,KAGlBd,KAAAe,WACvB,SAqBOf,KAAAgB,SAAW,MA+HZhB,KAAAiB,aAAe,WACrBlB,EAAKmB,MAAQ,IAGPlB,KAAAmB,OAAS,WACfpB,EAAKqB,SAAW,MAChBrB,EAAKsB,WACL,GAAItB,EAAKgB,aAAe,QAAShB,EAAKuB,uBACtCvB,EAAKwB,SAASC,QAGRxB,KAAAyB,QAAU,WAChB1B,EAAKqB,SAAW,KAChBrB,EAAK2B,UAAUF,QAmBTxB,KAAAqB,SAAW,WACjBtB,EAAKK,aAAe,GACpBL,EAAK4B,QAAQC,kBAAkB,IAC/B,IAAIC,EAEJ,IAAK9B,EAAK4B,QAAQG,SAASC,MAAO,CAChCF,EAAQ9B,EAAK4B,QAAQK,sBAChB,CACLjC,EAAKO,SAAS2B,SAAQ,SAACC,GACrBL,EAAQ,KACR,IAAK9B,EAAKoC,cAAcD,EAASE,KAAKC,MAAO,CAC3CR,EACE,gDACA9B,EAAKQ,YACL,UACG,IAAKR,EAAKuC,cAAcJ,EAASE,KAAKG,MAC3CV,EAAQ,6BAA6B9B,EAAKyC,OAAM,IAElDN,EAASF,kBAAoBH,EAC7BK,EAASH,OAASF,KAEpB,GAAI9B,EAAKO,SAASmC,OAAS1C,EAAKS,SAC9BqB,EAAQ,qCAAqC9B,EAAKS,SAAQ,IAG9D,KAAMqB,EAAO9B,EAAK4B,QAAQC,kBAAkBC,IA0DtC7B,KAAA0C,UAAY,SAACC,GACnB,GAAI5C,EAAKe,gBAAiB6B,EAAGC,iBAC7B7C,EAAKsB,WACLtB,EAAKuB,qBAAqBqB,IAGpB3C,KAAA6C,aAAe,SAACC,GACtB,IAAMC,EAASD,EAAEE,OAA4BD,MAC7C,GAAIA,GAASA,EAAMN,OACjB1C,EAAKkD,YAAaH,EAAEE,OAA4BD,QAG5C/C,KAAAkD,sBAAwB,SAACJ,EAAUV,GACzC,IAAKrC,EAAKG,kBAAmB,OAC7BH,EAAKI,YAAYgD,KAAKf,GAErBU,EAAEE,OACAI,QAAQ,mCACRC,UAAUC,OAAO,mCAGdtD,KAAAuD,iBAAmB,WACzB,IAAKxD,EAAKG,oBAAsBH,EAAKI,YAAYsC,OAAQ,OACzD1C,EAAKO,SAAWP,EAAKO,SAASkD,QAC5B,SAACtB,GAAa,OAACnC,EAAKI,YAAYsD,MAAK,SAACC,GAAW,OAAAA,IAAWxB,QAE9DnC,EAAKI,YAAc,IAGbH,KAAA2D,cAAgB,WACtB5D,EAAK6D,WAAWpC,KAAK,CAAEN,MAAOnB,EAAKmB,MAAO6B,MAAOhD,EAAKgD,SAGhD/C,KAAA6D,WAAa,SAACf,GACpBA,EAAEF,iBACFE,EAAEgB,kBACF/D,EAAKM,WAAa,OAGZL,KAAA+D,YAAc,SAACjB,GACrBA,EAAEF,iBACFE,EAAEgB,kBACF/D,EAAKM,WAAa,MAGZL,KAAAgE,OAAS,SAAClB,GAChB/C,EAAK8D,WAAWf,GAChB,GAAIA,EAAEmB,aAAalB,OAASD,EAAEmB,aAAalB,MAAMN,OAC/C1C,EAAKkD,YAAYH,EAAEmB,aAAalB,QAiB5B/C,KAAAkE,gBAAkB,SACxBC,EACAC,GAEA,IAAMC,EAAUtE,EAAKE,YAAc,OACnC,IAAMqE,EACJvE,EAAKe,iBAAmBf,EAAKwE,cACzBxE,EAAKE,YAAc,QACnB,GAEN,MAAO,CACLuE,EAAA,MAAA,CAAKC,MAAO,gBAAkBN,EAAU,SACtCK,EAAA,QAAA,CACEC,MAAO,gBAAkBN,EACzBO,QAAS3E,EAAKE,YACd0E,GAAIN,EACJL,OAAQ,SAAClB,GACP/C,EAAKiE,OAAOlB,GACZ/C,EAAK8D,WAAWf,IAElB8B,UAAW7E,EAAK8D,WAChBgB,YAAa9E,EAAK8D,WAClBiB,YAAa/E,EAAKgE,YAClBgB,WAAYhF,EAAKgE,gBAEbhE,EAAKiF,OAAUjF,EAAKkF,cAAgBd,IAAY,SAClDK,EAAA,MAAA,CACEC,MAAO,uBACL1E,EAAKW,UAAY,gBAAkB,OAGlCX,EAAKiF,SAAWjF,EAAKiF,MAAMvC,OAAS1C,EAAKiF,MAAQ,IAClDjF,EAAKiF,OAASjF,EAAKkF,cAAgBd,IAAY,QAC/CK,EAAA,OAAA,CAAMU,KAAK,WAIhBf,IAAY,QACXK,EAAA,MAAA,CAAKC,MAAM,0BACTD,EAAA,MAAA,KAAMzE,EAAKkF,cAAgBT,EAAA,OAAA,CAAMU,KAAK,WACtCV,EAAA,MAAA,KAAA,oBACwBA,EAAA,OAAA,KAAA,YAI3BL,IAAY,OACXK,EAAA,MAAA,CACEC,MAAO,2DACL1E,EAAKqB,SAAW,gBAAkB,KAGpCoD,EAAA,MAAA,CAAKC,MAAO,4BACVD,EAAA,YAAA,CAAWU,KAAK,yBAChBV,EAAA,OAAA,OACKzE,EAAKO,SAASmC,OACb1C,EAAKO,SAAS,GAAG8B,KAAK8C,KACtBnF,EAAKU,eAERV,EAAKmB,OAASnB,EAAKc,aAAed,EAAKa,UACxC4D,EAAA,SAAA,CACEjC,KAAK,SACLkC,MAAM,8BACNU,SAAS,KACTC,QAASrF,EAAKkB,cAEduD,EAAA,YAAA,CAAWU,KAAK,mBAM1BV,EAAA,QAAA,CAAAa,kBACmBhB,EAAU,IAAMC,EAAS,IAAMF,EAChD7B,KAAK,OACLoC,GAAI5E,EAAKE,YACTuC,OAAQzC,EAAKyC,OACbiC,MAAM,qBACNa,SAAUvF,EAAKS,SAAW,EAC1BI,SAAUb,EAAKa,SACfsE,KAAMnF,EAAKG,kBAAoBqF,UAAYxF,EAAKmF,KAChDM,KAAMzF,EAAKyF,KACXC,IAAK,SAACC,GACJ,GAAI3F,EAAKG,kBAAmB,CAC1BH,EAAK4F,cAAgBD,EACrB,OAEF3F,EAAK4B,QAAU+D,GAEjBE,SAAU7F,EAAK8C,aACfpB,QAAS1B,EAAK0B,QACdoE,QAAS9F,EAAK4D,iBAGlBa,EAAA,QAAA,CACEU,MAAOnF,EAAKG,kBAAoBqF,UAAYxF,EAAKmF,KACjDM,KAAMzF,EAAKyF,KACXC,IAAK,SAACC,GACJ,IAAK3F,EAAKG,kBAAmB,OAC7BH,EAAK4B,QAAU+D,GAEjBnD,KAAK,OACLoC,GAAI5E,EAAKE,YAAc,UACvB6F,UAAW,EACXR,SAAU,KACVb,MAAM,qBACN7D,SAAUb,EAAKa,SACfD,SAAUZ,EAAKY,SACf6B,OAAQzC,EAAKyC,OACbE,UAAW3C,EAAK2C,UAChBkD,SAAU7F,EAAK4D,iBAGnB5D,EAAKe,iBAAmBf,EAAKwE,cAC3BC,EAAA,MAAA,CAAKC,MAAM,oBAAoBE,GAAIL,GAChCvE,EAAKe,mBAAqBf,EAAKK,aAAaqC,OAC3C+B,EAAA,MAAA,CAAKC,MAAM,sBAAsB1E,EAAKK,cAAmB,GAI3DoE,EAAA,MAAA,CAAKC,MAAM,qBACTD,EAAA,OAAA,CAAMU,KAAK,aAET,KAOJlF,KAAA+F,OAAS,WACf,OAAOhG,EAAKmE,gBAAgB,QAGtBlE,KAAAgG,SAAW,WACjB,IAAM5B,EAASrE,EAAKE,YAAc,QAClC,MAAO,CACLF,EAAKmE,gBAAgB,OAAQE,GAC7BI,EAAA,SAAA,CAAQC,MAAM,yBAAyBE,GAAIP,KACtCrE,EAAKO,UAAYP,EAAKO,SAASmC,OAAS,GACzC+B,EAAA,KAAA,CAAIC,MAAM,0BACP1E,EAAKO,SAAS2F,KAAI,SAAC7D,GAClB,OACEoC,EAAA,KAAA,CACE0B,IAAK9D,EAAKA,KAAK8C,KACfT,MAAM,kEACN0B,eAAgB,SAACC,GAAM,OAAArG,EAAKwD,qBAE5BiB,EAAA,OAAA,CAAMC,MAAM,cAAcrC,EAAKA,KAAK8C,OAClC9C,EAAKL,OACLyC,EAAA,eAAA,CACE6B,QAASjE,EAAKJ,kBACdsE,UAAU,QAEV9B,EAAA,mBAAA,CACEC,MAAM,yBACN8B,SAAS,6BACTvB,MAAM,gBAIXjF,EAAKG,mBACJsE,EAAA,mBAAA,CACEC,MAAM,gCACNlC,KAAK,SACLgE,SAAS,YACTvB,MAAM,YACNhC,OAAO,SACPwD,KAAMpE,EAAKqE,WAGd1G,EAAKG,mBACJsE,EAAA,mBAAA,CACEY,QAAS,SAACtC,GAAM,OAAA/C,EAAKmD,sBAAsBJ,EAAGV,IAC9CqC,MAAM,kCACN8B,SAAS,cACTvB,MAAM,wBAljB1BnF,EAAA6G,UAAAC,eAAA,WAAA,IAAA5G,EAAAC,KACE,GAAIA,KAAKE,kBAAmB,CAC1BF,KAAK2F,cAAczE,MAAQ,GAC3BlB,KAAK2B,QAAQoB,MAAQ/C,KAAK4G,cACxB5G,KAAKM,SAAS2F,KAAI,SAAC7D,GAAS,OAAAA,EAAKA,SAEnCyE,YAAW,WACT9G,EAAK6D,WAAWpC,KAAK,CAAEN,MAAOnB,EAAKmB,MAAO6B,MAAOhD,EAAKgD,UACrD,MA+DGlD,EAAA6G,UAAAI,eAAA,WAAA,IAAA/G,EAAAC,KACR,IAAKA,KAAK2B,QAAS,OAEnB3B,KAAKqB,WACL0F,uBAAsB,WACpB,GAAIhH,EAAKgB,aAAe,QAAShB,EAAKuB,2BAO1C0F,OAAAC,eACIpH,EAAA6G,UAAA,UAAO,KADX,WAEE,OAAO1G,KAAKgB,+CAMdgG,OAAAC,eACIpH,EAAA6G,UAAA,kBAAe,KADnB,WAEE,IAAK1G,KAAK2B,QAAS,MAAO,GAC1B,OAAO3B,KAAK2B,QAAQK,wDAOtBgF,OAAAC,eACIpH,EAAA6G,UAAA,QAAK,KADT,WAEE,OAAO1G,KAAK2B,QACRuF,MAAMC,KAAKnH,KAAK2B,QAAQoB,OAAOkD,KAAI,SAAC7D,GAClCA,EAAKgF,UAAYC,IAAIC,gBAAgBlF,GACrC,OAAOA,KAET,yCAMN4E,OAAAC,eACIpH,EAAA6G,UAAA,QAAK,KADT,WAEE,OAAO1G,KAAK2B,QAAU3B,KAAK2B,QAAQT,MAAQ,QAE7C,SAAUqG,GACR,GAAIA,IAAQ,IAAMvH,KAAK2B,QAAS,CAC9B3B,KAAKM,SAAW,GAChBN,KAAK2B,QAAQT,MAAQ,0CAyBnBrB,EAAA6G,UAAAc,eAAN,SAAqBC,wFACnB,GAAIA,EAAe,CACjBzH,KAAKqB,WACLrB,KAAKsB,uBAEP,MAAA,CAAA,EAAO,CACLoG,SAAU1H,KAAK2H,QACfvH,aAAcJ,KAAK2B,QAAQK,2BAOzBnC,EAAA6G,UAAAkB,SAAN,gGACE,GAAI5H,KAAK2B,QAAS3B,KAAK2B,QAAQkG,yBAKjChI,EAAA6G,UAAAoB,gBAAA,WACE,OAAOC,QAAQC,QAAQhI,KAAK2B,UAMxB9B,EAAA6G,UAAAuB,UAAN,SAAgBC,wFACd,GAAIlI,KAAK2B,QAAS,CAChB3B,KAAK2B,QAAQC,kBAAkBsG,GAC/BlI,KAAKqB,WACLrB,KAAKsB,wCAOTzB,EAAA6G,UAAAyB,mBAAA,SAAmBrF,GAAnB,IAAA/C,EAAAC,KACE,IAAKA,KAAKoB,SAAU,OACpB,GAAI0B,EAAEsF,eAAeC,OAAM,SAACC,GAAS,OAAAA,IAASvI,EAAKwI,QAAOvI,KAAKmB,UAIjEtB,EAAA6G,UAAA8B,qBAAA,SAAqB1F,GACnB,IAAK9C,KAAKoB,UAAY0B,EAAEoD,MAAQ,MAAO,OACvC,GAAIpD,EAAEE,SAAWhD,KAAK2B,QAAS3B,KAAKmB,UAItCtB,EAAA6G,UAAAb,QAAA,SAAQ/C,GACN,IAAM0C,EAAOxF,KAAKwF,KACdiD,SAASC,cAAc,IAAM1I,KAAKwF,MAClCxF,KAAKuI,KAAKnF,QAAQ,QACtB,IAAKoC,GAAQ1C,EAAEE,SAAWhD,KAAKuI,KAAKnF,QAAQ,QAAS,OAErDpD,KAAKkB,MAAQ,IAqBPrB,EAAA6G,UAAAE,cAAA,SAAc7D,GACpB,IAAMzC,EAAWjB,IACjB,IAAK,IAAIsJ,EAAI,EAAGC,EAAM7F,EAAMN,OAAQkG,EAAIC,EAAKD,IAC3CrI,EAASuI,MAAMC,IAAI/F,EAAM4F,IAC3B,OAAOrI,EAASyC,OAGVlD,EAAA6G,UAAAvE,cAAA,SAAcE,GACpB,OAAOA,EAAO,KAAWrC,KAAKO,aAGxBV,EAAA6G,UAAApE,cAAA,SAAcC,GACpB,IAAKvC,KAAKwC,OAAQ,OAAO,KACzB,OAAOxC,KAAKwC,OAAOuG,MAAMxG,IAASvC,KAAKwC,OAAOuG,MAAMxG,GAAME,OAAS,GA+B7D5C,EAAA6G,UAAApF,qBAAA,SAAqBqB,GAC3B,GAAI3C,KAAKe,aAAe,kBAAmBf,KAAKe,WAAa,QAE7Df,KAAKgB,SAAW,MAChBhB,KAAKI,aAAe,GAEpB,IAAKJ,KAAK2B,QAAQG,SAASC,MAAO,CAChC/B,KAAKI,aAAeJ,KAAK2B,QAAQK,kBACjChC,KAAKgB,SAAW,KAGlBhB,KAAKgJ,aAAaxH,KAAK,CACrBkG,SAAU1H,KAAKgB,SACfZ,aAAcJ,KAAK2B,QAAQK,kBAC3BiH,cAAetG,KAIX9C,EAAA6G,UAAAwC,mBAAA,WAAA,IAAAnJ,EAAAC,KACN,GAAIA,KAAKmJ,GAAInJ,KAAKmJ,GAAGC,aACrB,IAAMD,EAAMnJ,KAAKmJ,GAAK,IAAIE,kBAAiB,WACzC,OAAAtJ,EAAKuJ,2BAEPH,EAAGI,QAAQvJ,KAAKuI,KAAM,CAAEiB,UAAW,KAAMC,QAAS,QAG5C5J,EAAA6G,UAAA4C,sBAAA,WAENtJ,KAAKiF,eAAiBjF,KAAKuI,KAAKmB,iBAAiB,kBACjD1J,KAAKuE,gBAAkBvE,KAAKuI,KAAKG,cAAc,oBAGzC7I,EAAA6G,UAAAzD,YAAA,SAAYF,GAAZ,IAAAhD,EAAAC,KACN,IAAMM,EAA6B4G,MAAMC,KAAKpE,GAAOkD,KAAI,SAAC7D,GACxD,MAAO,CACLA,KAAMA,EACNqE,SAAUY,IAAIC,gBAAgBlF,GAC9BL,MAAO,KACPC,kBAAmB,SAMvB,GAAIhC,KAAKE,mBAAqBF,KAAKQ,SAAW,EAAG,CAC/C,IAAMmJ,EAAWrJ,EAASkD,QACxB,SAACoG,GACC,OAAC7J,EAAKO,SAASmD,MAAK,SAACrB,GAAS,OAAAA,EAAKA,KAAK8C,OAAS0E,EAASxH,KAAK8C,WAEnElF,KAAKM,SAAQuJ,cAAAA,cAAA,GAAO7J,KAAKM,UAAaqJ,QACjC3J,KAAKM,SAAWA,GA0DzBT,EAAA6G,UAAAoD,qBAAA,WACE,GAAI9J,KAAKmJ,GAAInJ,KAAKmJ,GAAGC,cAGvBvJ,EAAA6G,UAAAqD,iBAAA,WACE/J,KAAKkJ,sBAGPrJ,EAAA6G,UAAAsD,kBAAA,WACEhK,KAAKsJ,yBA8LPzJ,EAAA6G,UAAAuD,OAAA,WACE,OACEzF,EAAC0F,EAAI,KACH1F,EAAA,MAAA,CACEC,MAAO,CACL0F,cAAe,KACfC,wBAAyBpK,KAAKK,WAC9BgK,qBAAsBrK,KAAKoB,SAC3BkJ,uBAAwBtK,KAAKgB,WAG9BhB,KAAKQ,SAAW,EAAIgE,EAACxE,KAAKgG,SAAQ,MAAMxB,EAACxE,KAAK+F,OAAM,sbAvlBxC","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{$input-help-color};\n\n   * @prop --label-color: Default value #{$label-color};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n   * @prop --label-font-size: Default value #{$label-font-size};\n   * @prop --label-padding: Default value #{$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{nano-color(primary, base)};\n   * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-height: 1rem;\n  display: block;\n\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-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n  --label-color--invalid: #{$label-color-invalid};\n  --drop-bg: #{map.get($colors, blue--faded)};\n  --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{$input-background-color--invalid};\n  --drop-border--invalid: #{nano-color(danger, base, null, true)};\n  --btn-bg: #{nano-color(primary, base)};\n  --btn-text: #{nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 1em);\n  --btn-padding-end: var(--nano-btn-padding-end, 1em);\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n.file-upload {\n  $self: &;\n\n  /* Common */\n\n  &__label {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid='false'])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__input {\n    @include visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    height: 1em;\n\n    @include margin(\n      calc(var(--label-padding) / 2),\n      0,\n      var(--label-padding),\n      3px\n    );\n\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    top: 0;\n    left: 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    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    width: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-height: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{map.get($colors, white)};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: rgba(var(--drop-border-tint), 0.5);\n      border-style: dashed;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      transition:\n        top 0.1s ease-in-out,\n        bottom 0.1s ease-in-out,\n        left 0.1s ease-in-out,\n        right 0.1s ease-in-out;\n\n      .file-upload--invalid & {\n        border-color: rgba(var(--drop-border--invalid), 1);\n      }\n\n      .file-upload--dragging & {\n        top: 5px;\n        bottom: 5px;\n        left: 5px;\n        right: 5px;\n      }\n    }\n\n    span {\n      color: rgba(var(--drop-border-tint), 1);\n      text-decoration: underline;\n      border-radius: 2px;\n      z-index: 1;\n      cursor: pointer;\n      position: relative;\n\n      .file-upload--focus & {\n        box-shadow: #{$control-focus-style};\n      }\n    }\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    &-wrap {\n      position: relative;\n      top: -4px;\n    }\n\n    &-item {\n      width: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px 5px;\n      margin-right: 2px;\n      display: block;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgba(var(--drop-border--invalid), 1);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include button-base;\n    @include button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-width: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      @include margin(0);\n\n      font-size: inherit;\n      padding: 0;\n      border: 0;\n      outline: none;\n      background-color: transparent;\n      display: flex;\n      align-items: stretch;\n      width: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      nano-icon {\n        @include margin(0, 0, 0, 0.4rem);\n      }\n    }\n    #{$self}__btn-content {\n      display: flex;\n      align-items: center;\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        min-width: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport {\n  ControlValidity,\n  ControlValidityEventDetail,\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = '';\n  @State() isDragging = false;\n  @State() fileList: FileValidation[] = [];\n  @Watch('fileList')\n  fileListChange() {\n    if (this.canChangeFileList) {\n      this.publicInputEl.value = '';\n      this.inputEl.files = this.arrToFileList(\n        this.fileList.map((file) => file.file)\n      );\n      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\n    }\n  }\n  @State() hasFocus: boolean;\n\n  @Element() host: HTMLNanoFileUploadElement;\n\n  // public props\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair. */\n  @Prop() name!: string;\n\n  /** The accept attribute value is a string that defines the file types the file input should accept.\n   * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */\n  @Prop() accept?: string;\n\n  /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n   * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n   * the user agent may fall back to its preferred default mode. */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** The maximum file size allowed per file (Megabytes) */\n  @Prop() maxFileSize: number = 1;\n\n  /** The maximum file size allowed per file (bytes).  */\n  @Prop() maxFiles: number = 1;\n\n  /** String to place within a label element. */\n  @Prop() label!: string;\n\n  /** Placeholder only used within single file uploads. */\n  @Prop() placeholder: string = 'Choose a file...';\n\n  /** Visually hide the label - but make it accessible. */\n  @Prop() hideLabel?: boolean = false;\n\n  /** If `true`, the user must select a file to upload before submitting a form. */\n  @Prop() required = false;\n\n  /** If `true`, the user cannot interact with the select. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If `true`, a clear icon will appear in the input when there is a value.\n   * Clicking it clears the input. Only used within single file uploads. */\n  @Prop() clearInput = false;\n\n  /** Whether to show validation errors underneath input */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /** When should the field perform validation */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\n  }\n\n  @State() _invalid = false;\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  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\n  }\n\n  /** A File array that lists every selected file.\n   * Has an added `objectURL` property returning a `DOMString`\n   * containing an object URL that can be used to reference the contents of the specified source\n   * This list has no more than one member unless the multiple attribute is specified. @readonly */\n  @Prop()\n  get files(): FileWithUrl[] {\n    return this.inputEl\n      ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n          file.objectURL = URL.createObjectURL(file);\n          return file;\n        })\n      : [];\n  }\n\n  /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n   * If the user selected multiple files, the value represents the first file in the list of files they selected.\n   * You can reset the file-upload control by setting the value to an emptry string e.g. `var input.value = ''` */\n  @Prop()\n  get value() {\n    return this.inputEl ? this.inputEl.value : '';\n  }\n  set value(val: string) {\n    if (val === '' && this.inputEl) {\n      this.fileList = [];\n      this.inputEl.value = '';\n    }\n  }\n\n  // Events\n\n  /** Emitted when the value has changed. */\n  @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n  /** Emited when the checkbox is focused */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emited when the checkbox is blurred */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public methods\n\n  /** Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }` */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.validate();\n      this.showInlineValidation();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.inputEl.validationMessage,\n    };\n  }\n\n  /** Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`. */\n  @Method()\n  async setFocus() {\n    if (this.inputEl) this.inputEl.focus();\n  }\n\n  /** Returns the native `<input>` element used under the hood */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.inputEl!);\n  }\n\n  /** Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   * @param message */\n  @Method()\n  async showError(message: string) {\n    if (this.inputEl) {\n      this.inputEl.setCustomValidity(message);\n      this.validate();\n      this.showInlineValidation();\n    }\n  }\n\n  // Listeners\n\n  @Listen('click', { target: 'window' })\n  globalClickHandler(e: Event) {\n    if (!this.hasFocus) return;\n    if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n  }\n\n  @Listen('keydown', { target: 'window' })\n  globalKeydownHandler(e: KeyboardEvent) {\n    if (!this.hasFocus || e.key !== 'Tab') return;\n    if (e.target !== this.inputEl) this.onBlur();\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private arrToFileList(files: File[]): FileList {\n    const fileList = getDataTransfer();\n    for (var i = 0, len = files.length; i < len; i++)\n      fileList.items.add(files[i]);\n    return fileList.files;\n  }\n\n  private checkFileSize(size: number): boolean {\n    return size / 1000000 <= this.maxFileSize;\n  }\n\n  private checkFileType(type: string): boolean {\n    if (!this.accept) return true;\n    return this.accept.match(type) && this.accept.match(type).length > 0;\n  }\n\n  private validate = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = this.inputEl.validationMessage;\n    } else {\n      this.fileList.forEach((fileItem) => {\n        error = null;\n        if (!this.checkFileSize(fileItem.file.size)) {\n          error =\n            'Maximum file size exceeded. Max file size is ' +\n            this.maxFileSize +\n            'Mb';\n        } else if (!this.checkFileType(fileItem.file.type))\n          error = `File type is not allowed (${this.accept})`;\n\n        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (!!error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\n    }\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.inputEl.validationMessage,\n      originalEvent: ev,\n    });\n  }\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have slot content\n    this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n  }\n\n  private addNewFiles(files: FileList) {\n    const fileList: FileValidation[] = Array.from(files).map((file) => {\n      return {\n        file: file,\n        location: URL.createObjectURL(file),\n        valid: true,\n        validationMessage: null,\n      };\n    });\n\n    // if we have a list and we're in a browser that can amend files\n    // append files to the list, otherwise replace\n    if (this.canChangeFileList && this.maxFiles > 1) {\n      const newFiles = fileList.filter(\n        (findFile) =>\n          !this.fileList.find((file) => file.file.name === findFile.file.name)\n      );\n      this.fileList = [...this.fileList, ...newFiles];\n    } else this.fileList = fileList;\n  }\n\n  // event handlers & hooks\n\n  private onInvalid = (ev: Event) => {\n    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\n  };\n\n  private onFileChoose = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    if (files && files.length)\n      this.addNewFiles((e.target as HTMLInputElement).files);\n  };\n\n  private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n    if (!this.canChangeFileList) return;\n    this.removeFiles.push(file);\n\n    (e.target as HTMLElement)\n      .closest('.file-upload__list-item--active')\n      .classList.remove('file-upload__list-item--active');\n  };\n\n  private onFileRemoveAnim = () => {\n    if (!this.canChangeFileList || !this.removeFiles.length) return;\n    this.fileList = this.fileList.filter(\n      (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n    );\n    this.removeFiles = [];\n  };\n\n  private onInputChange = () => {\n    this.nanoChange.emit({ value: this.value, files: this.files });\n  };\n\n  private onDragStop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private onDragStart = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n  };\n\n  private onDrop = (e: DragEvent) => {\n    this.onDragStop(e);\n    if (e.dataTransfer.files && e.dataTransfer.files.length)\n      this.addNewFiles(e.dataTransfer.files);\n  };\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private FileUploadInput = (\n    eleType: 'drop' | 'btn',\n    listId?: string\n  ): VNode[] => {\n    const labelId = this.fileInputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.fileInputId + '-more'\n        : '';\n\n    return [\n      <div class={'file-upload__' + eleType + '-wrap'}>\n        <label\n          class={`file-upload__` + eleType}\n          htmlFor={this.fileInputId}\n          id={labelId}\n          onDrop={(e) => {\n            this.onDrop(e);\n            this.onDragStop(e);\n          }}\n          onDragEnd={this.onDragStop}\n          onDragLeave={this.onDragStop}\n          onDragEnter={this.onDragStart}\n          onDragOver={this.onDragStart}\n        >\n          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\n            </div>\n          )}\n          {eleType === 'btn' && (\n            <div\n              class={`file-upload__button button--keyline button--icon-start ${\n                this.hasFocus ? 'button--focus' : ''\n              }`}\n            >\n              <div class={`file-upload__btn-content`}>\n                <nano-icon name=\"regular/cloud-upload\" />\n                <span>\n                  {!!this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/times\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            form={this.form}\n            ref={(input) => {\n              if (this.canChangeFileList) {\n                this.publicInputEl = input;\n                return;\n              }\n              this.inputEl = input;\n            }}\n            onChange={this.onFileChoose}\n            onFocus={this.onFocus}\n            onReset={this.onInputChange}\n          />\n        </label>\n        <input\n          name={!this.canChangeFileList ? undefined : this.name}\n          form={this.form}\n          ref={(input) => {\n            if (!this.canChangeFileList) return;\n            this.inputEl = input;\n          }}\n          type=\"file\"\n          id={this.fileInputId + '-hidden'}\n          tabIndex={-1}\n          multiple={true}\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError && !!this.errorMessage.length ? (\n            <div class=\"file-upload__error\">{this.errorMessage}</div>\n          ) : (\n            ''\n          )}\n          <div class=\"file-upload__help\">\n            <slot name=\"helper\" />\n          </div>\n        </div>\n      ) : (\n        ''\n      ),\n    ];\n  };\n\n  private button = (): VNode[] => {\n    return this.FileUploadInput('btn');\n  };\n\n  private dropArea = (): VNode[] => {\n    const listId = this.fileInputId + '-list';\n    return [\n      this.FileUploadInput('drop', listId),\n      <output class=\"file-upload__list-wrap\" id={listId}>\n        {!!this.fileList && this.fileList.length > 0 && (\n          <ul class=\"file-upload__list list\">\n            {this.fileList.map((file) => {\n              return (\n                <li\n                  key={file.file.name}\n                  class=\"file-upload__list-item file-upload__list-item--active list-item\"\n                  onAnimationEnd={(_) => this.onFileRemoveAnim()}\n                >\n                  <span class=\"list-title\">{file.file.name}</span>\n                  {!file.valid && (\n                    <nano-tooltip\n                      content={file.validationMessage}\n                      placement=\"left\"\n                    >\n                      <nano-icon-button\n                        class=\"list-button list-error\"\n                        iconName=\"light/exclamation-triangle\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/times\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}