@nanoporetech-digital/components 3.3.1 → 3.3.2

package/dist/nano-components/{p-11d3a90b.js → p-79ed6247.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{j as t,h as n,F as i,g as e,e as o,r as s,c as r,d as a,a as l}from"./p-1fe12320.js";import{a as d}from"./p-ee045579.js";import{d as c}from"./p-9746b0a5.js";import{c as h}from"./p-651b3264.js";const p="nano-tbl";const b=(t,n)=>{const i=globalThis[n];return i!=null&&t instanceof i};const f=t=>{if(t!=null){if(b(t,"ArrayBuffer")||b(t,"MessagePort")||b(t,"ImageBitmap")||b(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(f)}return f(t.buffer)}}return[]};let u=0;let _=0;const g=new Map;const m=new Map;const w=(n,i,e)=>{const o=new Worker(n,{name:i});o.addEventListener("message",(({data:n})=>{if(n){const i=n[0];const o=n[1];const s=n[2];if(i===e){const i=n[3];const[e,r,a]=g.get(o);g.delete(o);if(i){const n=i.isError?Object.assign(new Error(i.value.message),i.value):i.value;t(n);r(n)}else{if(a){a.forEach((t=>m.delete(t)))}e(s)}}else if(i===e+".cb"){try{m.get(o)(...s)}catch(n){t(n)}}}}));return o};const x=(t,n,i)=>(...e)=>new Promise(((o,s)=>{let r=u++;let a=0;let l=e.length;let d=[o,s];g.set(r,d);for(;a<l;a++){if(typeof e[a]==="function"){const t=_++;m.set(t,e[a]);e[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,r,i,e],f(e));if(t.then){t.then(c)}else{c(t)}}));const y=import("./p-64200e25.js").then((t=>t.worker));const v=x(y,"stencil.table.worker","createWorkerStore");const k=x(y,"stencil.table.worker","syncConfigToWorker");const $=x(y,"stencil.table.worker","syncDataToWorker");const z=x(y,"stencil.table.worker","workerFilter");const C=x(y,"stencil.table.worker","workerSearch");const S=x(y,"stencil.table.worker","workerSort");function T(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!t.sortCompareFn){const i=n.find((n=>n.prop===t.prop));i.sortCompareFn=t.sortCompareFn.toString()}}));return n}const I=new WeakMap;async function R(t,n,i){const e={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:i,host:t})};const o=await v(e.data.state.rows,T(e.config.state.columns));e.general.state.workerId=o;I.set(t,e);e.data.use({reset:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)}});e.config.use({reset:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)}});return e}function O(t){return I.get(t)}function j(t,n){const i=I.get(t);if(!i)return;n=n.map(((t,n)=>({...t,__index:n,__uuid:d(Object.values(t).join())})));i.data.state.rows=n;if(i.general.state.workerId)return $(i.general.state.workerId,n)}function M(t,n){const i=I.get(t);if(!i)return;i.config.state.columns=n;if(i.general.state.workerId)return k(i.general.state.workerId,T(n))}async function F(t,n){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await C(i.general.state.workerId,n)}catch(t){console.log(t)}}async function A(t,n){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await z(i.general.state.workerId,n)}catch(t){console.log(t)}}async function B(t,n,i){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await S(e.general.state.workerId,n,i)}catch(t){console.log(t)}}function P(t,n){const i=q();const e=i.config.state.columns;const o=i.data.state.rows;const s=e[n];const r=s?.prop;const a=o[t];const l=a[e[n].prop];return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=q();const i=n.data.state.rows;const e=i[t];return{row:e,rowIndex:t}}function N(t,n){if(!n)return t;const i={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof i.class==="object"){i.class={...n.class,...i.class}}else if(typeof n.class==="string"&&typeof i.class==="object"){i.class[n.class]=true}else if(typeof i.class==="string"){i.class+=" "+n.class}}if(n.style){i.style={...n.style,...i.style}}return i}function q(){return O(e(o()))}function D(t,n,i){const e={...i};const o=q().config.state.columns[n]?.cellProperties;if(!o)return e;const s=P(t,n);const r=o(s);if(!r)return e;return N(e,r)}function J(t,e){const o=q();const s=o.config.state.columns;const r=s[e]?.cellTemplate;const a=P(t,e);return r?r(n,a):n(i,null,a.cellModel.toString())}function L(t){const e=t?.colTemplate;return e?e(n,t):n(i,null,t.title)}function E(t,n,i=false){const e={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(i){let t="";Object.entries(e).forEach((([n,i])=>{if(i)t+=n+" "}));return t}return e}const H=new WeakMap;const U=new WeakMap;function G(t,n,i){if(H.get(t))return;const e=q();const o=e.general.state.scrollParent;const s=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const s={};if(n==="start"){s.start=t.boundingClientRect.x-(e.x+o.scrollLeft)<0&&!t.isIntersecting}if(n==="end"){s.end=t.boundingClientRect.right>t.boundingClientRect.width&&!t.isIntersecting}i(s)}),{threshold:[1],rootMargin:"1px 0px 100px 0px",root:o===document.scrollingElement?null:o});H.set(t,s);setTimeout((()=>s.observe(t)),300)}function K(t,n,i){if(U.get(t))return;const e=q();const o=e.general.state.scrollParent;const s=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const s={};if(n==="top"){s.top=t.boundingClientRect.y-(e.y+o.scrollTop)<0&&!t.isIntersecting}if(n==="bottom")s.bottom=t.boundingClientRect.height>t.intersectionRect.height&&!t.isIntersecting;i(s)}),{threshold:[1],rootMargin:"0px 100px 0px 100px",root:o===document.scrollingElement?null:o});U.set(t,s);requestAnimationFrame((()=>s.observe(t)))}const Q=({rowRenderer:t,rowIndex:i,row:e},o)=>{let s={};if(!e){const t=W(i);e=t.row}if(t?.rowProperties){s=t.rowProperties({row:e,rowIndex:i})||s}let r;if(t?.pinned&&typeof t.pinned==="function"){r=t.pinned()}const a={class:E("tr",r)};const l=s?N(a,s):a;return n("tr",{...l,key:e.__uuid},o)};const V=({rowRenderer:t,onColumnPinned:i},e,o)=>{let s={};if(t.rowProperties){s=t.rowProperties()||{}}const r=t.pinned||null;const a={class:E("tr",null)};const l=s?N(a,s):a;const d=t?.template;if(d){let t=d(n,{renderedRow:n("tr",{...l},e)});if(Array.isArray(t)){t=o.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=N({class:E("tr",null,true)},t.vattrs);if(!!t.vchildren){t.vchildren=o.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=N({class:E(t.vtag.toString(),r,true),ref:t=>{K(t,r,i)}},t.vattrs)}return t}))}}return t}))}return t}return n("tr",{...l},e)};const X=({column:t,headRenderer:e,onColumnOrderClick:o,onColumnPinned:s})=>{function r(n){let i;switch(t.order){case"asc":i="desc";break;case"desc":i=null;break;default:i="asc"}o(i,t.prop,n.target.closest("th"))}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:{...E("th",e?.pinned),[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:!!t.filter}};let d=a?N(l,a):l;const c=L(t);if(!c)return n(i,null);d=Number(d.colspan)>1?{...d,scope:"colgroup"}:{...d,scope:"col"};if(t.sortable!==false){return n("th",{...d,"aria-sort":t.order?t.order==="asc"?"ascending":"descending":"none",ref:n=>{if(["end","start"].includes(t.pinned))G(n,t.pinned,s);if(["top","bottom"].includes(e.pinned))K(n,e.pinned,s)}},n("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:r},L(t),!!t.filter&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${p}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))))}return n("th",{...d,ref:n=>{if(["end","start"].includes(t.pinned))G(n,t.pinned,s);if(["top","bottom"].includes(e.pinned))K(n,e.pinned,s)}},n("div",{class:`${p}__cell-content`},L(t),!!t.filter&&n("nano-icon",{name:"light/bars-filter"})))};const Y=({rowIndex:t,colIndex:e,nestedContent:o})=>{const s=o||J(t,e);if(!s)return n(i,null);const r=q();const a=r.config.state.columns[e];let l="td";let d=D(t,e,{class:{[`${p}__td`]:true,[`${p}__ordered`]:!!a.order,[`${p}__pin`]:!!a.pinned,[`${p}__pin--start`]:a.pinned==="start",[`${p}__pin--end`]:a.pinned==="end"}});if(a.rowHeader){d=Number(d.rowspan)>1?{...d,scope:"rowgroup"}:{...d,scope:"row"};l="th"}return n(l,{...d},n("div",{class:`${p}__cell-content`},s))};const Z=(()=>{let t;let n;let i;let e;const o=60;const s=()=>{t=null;e=0};s();return()=>{n=window.scrollY;if(t!=null)e=n-t;t=n;window.clearTimeout(i);i=window.setTimeout(s,o);return e}})();function tt(t){let n=getComputedStyle(t);const i=n.position==="absolute";const e=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(i&&n.position==="static"){continue}if(e.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function nt(t,n=100){const i=t.getBoundingClientRect();const e=window.innerHeight||document.documentElement.clientHeight;if(!i.bottom&&!i.top&&!i.left&&!i.right&&!i.height&&!i.width&&!i.x&&!i.y)return false;return!(Math.floor(100-(i.top>=0?0:i.top)/+-i.height*100)<n||Math.floor(100-(i.bottom-e)/i.height*100)<n)}const it=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset "UTF-8";nano-table{display:block;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--foot-th-padding-h:var(--th-padding-start) var(--th-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{font-weight:800;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;margin:0}.sm .nano-tbl th[scope=row]{max-width:65vw !important}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width)}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';let et=0;const ot=class{constructor(t){s(this,t);this.nanoTblBlockRendered=r(this,"nanoTblBlockRendered",7);this.nanoTblReady=r(this,"nanoTblReady",7);this.nanoTblBeforeSort=r(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=r(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=r(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=r(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=r(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=r(this,"nanoTblAfterSearch",7);this.debounceSetLoading=t=>{this._loading=!!this.store.data.state.rows.length?t:true};this.renderId="tbl-"+et++;this.filters=[];this.currentFilters="";this.currentSort="";this.blockIos=new WeakMap;this.blockHeights=[];this.unitHeight=0;this.ignoreIO=true;this._isReady=false;this.sortStart=async(t,n,i)=>{if(this.currentSort===t+":"+n)return;this.loading=true;const e=this.nanoTblBeforeSort.emit({column:n,order:t});if(e.defaultPrevented)return;this.currentSort=t+":"+n;this.scrollToTop(i);if(this.customSortFn){try{await this.customSortFn(n,t);this.sortComplete(t,n)}catch(t){console.warn("custom sort failed",t)}return}try{await B(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{this.loading=false}};this.setupBlockIO=(t,n)=>{if(!t||this.blockIos.has(t))return;const i=new IntersectionObserver((([i])=>{if(this.ignoreIO)return;if(i.isIntersecting){a((()=>{if(this.scrollSpeed<100||nt(t,.01)){this.activeBlocks=[n,n+1,Math.max(0,n-1)];this.nanoTblBlockRendered.emit({block:n,totalBlocks:this.blockElements.length});requestAnimationFrame((()=>this.setBlockHeight()))}}))}}),{threshold:[0],root:this.scrollParent===document.scrollingElement?null:this.scrollParent});i.observe(t);this.blockIos.set(t,i)};this.handleColumnPinned=t=>{Object.entries(t).forEach((([t,n])=>{this.tableEle.classList.toggle(`${p}__pinned--${t}`,n)}))};this.type="table";this.caption=undefined;this.showCaption=false;this._loading=false;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=60;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.blocks=[];this.activeBlocks=[0,1,2];this.measureHeight=0;this.debounceSetLoading=c(this.debounceSetLoading.bind(this),50)}get loading(){return this._loading}set loading(t){this.debounceSetLoading(t)}handleRowsChange(){if(!this.rows){this.loading=true;return}this.loading=true;Promise.resolve(this.rows).then((async t=>{await j(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady){this.setInitialBlockDimension()}this.loading=false}))}async handleColsChange(){await M(this.host,this.columns);if(this.isReady)this.columnInit()}get blocksLength(){return this.blocks.length}handleSearchTermChange(){this.searchStart()}async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const i=this.columns.find((n=>n.prop===t));if(!i)throw"Cannot find column with "+t;return this.sortStart(n,i.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}set measureEle(t){if(!t)return;this.measureHeight=t.getBoundingClientRect().height;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}scrollListener(){const t=Z();this.scrollSpeed=t<0?t*-1:t}handleReady(){const t=window.location.hash;if(t.length>1){const n=document.querySelector(t);if(n){n.scrollIntoView()}}this.nanoTblReady.emit()}sortComplete(t,n){this.columns=this.columns.map((i=>{if(i.prop===n)return{...i,order:t};return{...i,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){this.loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;this.scrollToTop();try{await F(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this.loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this.loading=true;const i=this.nanoTblBeforeFilter.emit({filters:this.filters});if(i.defaultPrevented)return;this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{await this.customFilterFn(this.filters);this.filterComplete()}catch(t){console.warn("custom filter failed",t);this.currentFilters=""}return}try{await A(this.host,this.filters);this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this.loading=false}}filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n)t.filter=n.filter;return t}));this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const i=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!nt(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!nt(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(i)this.scrollParent.scrollLeft=i;if(n)this.scrollParent.style.scrollBehavior=n}setMeasureElement(){a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${p}__inactive`)))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;const t=new Promise((t=>{a((()=>{this.setMeasureElement();if(!this.measureEle&&!this.unitHeight)t();this.blockElements.forEach(((n,i)=>{if(!n||!n.classList?.contains(`${p}__inactive`)){if(i===this.blockElements.length-1)t();return}if(i===this.blockElements.length-1)t()}))}))}));t.then((()=>{requestAnimationFrame((()=>{this.isReady=true}))}))}async columnInit(){this.filters=this.columns.filter((t=>!!t.filter)).map((t=>{const{filter:n,prop:i}=t;return{filter:n,prop:i}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}}setBlocks(){this.activeBlocks=[0,1,2];this.ignoreIO=true;let t=1;const n=this.store.data.state.rows.length;let i=[];const e=[];this.blockHeights=[];for(t;t<=n;t++){i.push(this.store.data.state.rows[t-1]);if(t%this.perBlock===0){e.push({rows:i,__uuid:d(i.map((t=>t.__uuid)).join())});i=[]}}if(i.length)e.push({rows:i,__uuid:d(i.map((t=>t.__uuid)).join())});this.blocks=e}getBlockHeight(t){if(this.activeBlocks.includes(t))return undefined;if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n)return n.height+"px"}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight+"px"}return this.unitHeight?this.unitHeight*n+"px":undefined}setBlockHeight(){a((()=>{this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;const i=n.getBoundingClientRect().height;const e=this.blockHeights.findIndex((n=>n.blockIndex===t));if(e>0){this.blockHeights[e]={height:i,blockIndex:t}}else this.blockHeights.push({height:i,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `title` prop or use the `caption` slot")}}async componentWillLoad(){this.store=await R(this.host,this.columns,this.scrollParent);await this.handleRowsChange();this.processSlots();this.setBlocks();this.store.data.onChange("rows",(()=>this.setBlocks()))}connectedCallback(){a((()=>this.scrollParent=tt(this.host)))}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,i){if(["rows","columns"].includes(i))return false}componentWillRender(){}componentDidRender(){requestAnimationFrame((()=>this.ignoreIO=false));this.setMeasureElement()}render(){this.blockElements=[];return n(l,null,n("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined,states:"576w sm, 768w md",class:"sm md"},n("div",{class:`${p}__wrap`},n("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-readonly":this.type==="table"?"true":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t},n("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(V,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(X,{column:t,headRenderer:this.headRender,onColumnOrderClick:this.sortStart,onColumnPinned:this.handleColumnPinned})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${p}__active`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((i,e)=>n(Y,{rowIndex:t,colIndex:e,nestedContent:n("nano-skeleton",null)}))))))),this.blocks.map(((t,i)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${i}`,ref:t=>{this.blockElements.push(t);this.setupBlockIO(t,i)},class:{[`${p}__inactive`]:!this.activeBlocks.includes(i),[`${p}__active`]:this.activeBlocks.includes(i)}},this.activeBlocks.includes(i)?t.rows.map(((t,e)=>{const o=i>0?i*this.perBlock+e:e;return n(Q,{rowRenderer:this.rowRender,row:t},this.store.config.state.columns.map(((t,i)=>n(Y,{rowIndex:o,colIndex:i}))))})):n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(i)}})))),this.showFooter&&n("tfoot",null,n(V,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(X,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnOrderClick:this.sortStart})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}}))))}get host(){return e(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"]}}};ot.style=it;export{ot as T,w as c};
-//# sourceMappingURL=p-11d3a90b.js.map
+import{j as t,h as n,F as i,g as e,e as o,r as s,c as r,d as a,a as l}from"./p-1fe12320.js";import{a as d}from"./p-ee045579.js";import{d as c}from"./p-9746b0a5.js";import{c as h}from"./p-651b3264.js";const p="nano-tbl";const b=(t,n)=>{const i=globalThis[n];return i!=null&&t instanceof i};const f=t=>{if(t!=null){if(b(t,"ArrayBuffer")||b(t,"MessagePort")||b(t,"ImageBitmap")||b(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(f)}return f(t.buffer)}}return[]};let u=0;let _=0;const g=new Map;const m=new Map;const w=(n,i,e)=>{const o=new Worker(n,{name:i});o.addEventListener("message",(({data:n})=>{if(n){const i=n[0];const o=n[1];const s=n[2];if(i===e){const i=n[3];const[e,r,a]=g.get(o);g.delete(o);if(i){const n=i.isError?Object.assign(new Error(i.value.message),i.value):i.value;t(n);r(n)}else{if(a){a.forEach((t=>m.delete(t)))}e(s)}}else if(i===e+".cb"){try{m.get(o)(...s)}catch(n){t(n)}}}}));return o};const x=(t,n,i)=>(...e)=>new Promise(((o,s)=>{let r=u++;let a=0;let l=e.length;let d=[o,s];g.set(r,d);for(;a<l;a++){if(typeof e[a]==="function"){const t=_++;m.set(t,e[a]);e[a]=[n+".cb",t];(d[2]=d[2]||[]).push(t)}}const c=t=>t.postMessage([n,r,i,e],f(e));if(t.then){t.then(c)}else{c(t)}}));const y=import("./p-3b62831b.js").then((t=>t.worker));const v=x(y,"stencil.table.worker","createWorkerStore");const k=x(y,"stencil.table.worker","syncConfigToWorker");const $=x(y,"stencil.table.worker","syncDataToWorker");const z=x(y,"stencil.table.worker","workerFilter");const C=x(y,"stencil.table.worker","workerSearch");const S=x(y,"stencil.table.worker","workerSort");function T(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!t.sortCompareFn){const i=n.find((n=>n.prop===t.prop));i.sortCompareFn=t.sortCompareFn.toString()}}));return n}const I=new WeakMap;async function R(t,n,i){const e={data:h({rows:[]}),config:h({columns:n}),general:h({workerId:null,scrollParent:i,host:t})};const o=await v(e.data.state.rows,T(e.config.state.columns));e.general.state.workerId=o;I.set(t,e);e.data.use({reset:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)$(e.general.state.workerId,null)}});e.config.use({reset:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)},dispose:()=>{if(e.general.state.workerId)k(e.general.state.workerId,null)}});return e}function O(t){return I.get(t)}function j(t,n){const i=I.get(t);if(!i)return;n=n.map(((t,n)=>({...t,__index:n,__uuid:d(Object.values(t).join())})));i.data.state.rows=n;if(i.general.state.workerId)return $(i.general.state.workerId,n)}function M(t,n){const i=I.get(t);if(!i)return;i.config.state.columns=n;if(i.general.state.workerId)return k(i.general.state.workerId,T(n))}async function F(t,n){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await C(i.general.state.workerId,n)}catch(t){console.log(t)}}async function A(t,n){const i=I.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await z(i.general.state.workerId,n)}catch(t){console.log(t)}}async function B(t,n,i){const e=I.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await S(e.general.state.workerId,n,i)}catch(t){console.log(t)}}function P(t,n){const i=q();const e=i.config.state.columns;const o=i.data.state.rows;const s=e[n];const r=s?.prop;const a=o[t];const l=a[e[n].prop];return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=q();const i=n.data.state.rows;const e=i[t];return{row:e,rowIndex:t}}function N(t,n){if(!n)return t;const i={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof i.class==="object"){i.class={...n.class,...i.class}}else if(typeof n.class==="string"&&typeof i.class==="object"){i.class[n.class]=true}else if(typeof i.class==="string"){i.class+=" "+n.class}}if(n.style){i.style={...n.style,...i.style}}return i}function q(){return O(e(o()))}function D(t,n,i){const e={...i};const o=q().config.state.columns[n]?.cellProperties;if(!o)return e;const s=P(t,n);const r=o(s);if(!r)return e;return N(e,r)}function J(t,e){const o=q();const s=o.config.state.columns;const r=s[e]?.cellTemplate;const a=P(t,e);return r?r(n,a):n(i,null,a.cellModel.toString())}function L(t){const e=t?.colTemplate;return e?e(n,t):n(i,null,t.title)}function E(t,n,i=false){const e={[`${p}__${t}`]:true,[`${p}__pin`]:!!n,[`${p}__pin--top`]:n==="top",[`${p}__pin--bottom`]:n==="bottom"};if(i){let t="";Object.entries(e).forEach((([n,i])=>{if(i)t+=n+" "}));return t}return e}const H=new WeakMap;const U=new WeakMap;function G(t,n,i){if(H.get(t))return;const e=q();const o=e.general.state.scrollParent;const s=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const s={};if(n==="start"){s.start=t.boundingClientRect.x-(e.x+o.scrollLeft)<0&&!t.isIntersecting}if(n==="end"){s.end=t.boundingClientRect.right>t.boundingClientRect.width&&!t.isIntersecting}i(s)}),{threshold:[1],rootMargin:"1px 0px 100px 0px",root:o===document.scrollingElement?null:o});H.set(t,s);setTimeout((()=>s.observe(t)),300)}function K(t,n,i){if(U.get(t))return;const e=q();const o=e.general.state.scrollParent;const s=new IntersectionObserver((([t])=>{const e=t.rootBounds||document.scrollingElement.getBoundingClientRect();const s={};if(n==="top"){s.top=t.boundingClientRect.y-(e.y+o.scrollTop)<0&&!t.isIntersecting}if(n==="bottom")s.bottom=t.boundingClientRect.height>t.intersectionRect.height&&!t.isIntersecting;i(s)}),{threshold:[1],rootMargin:"0px 100px 0px 100px",root:o===document.scrollingElement?null:o});U.set(t,s);requestAnimationFrame((()=>s.observe(t)))}const Q=({rowRenderer:t,rowIndex:i,row:e},o)=>{let s={};if(!e){const t=W(i);e=t.row}if(t?.rowProperties){s=t.rowProperties({row:e,rowIndex:i})||s}let r;if(t?.pinned&&typeof t.pinned==="function"){r=t.pinned()}const a={class:E("tr",r)};const l=s?N(a,s):a;return n("tr",{...l,key:e.__uuid},o)};const V=({rowRenderer:t,onColumnPinned:i},e,o)=>{let s={};if(t.rowProperties){s=t.rowProperties()||{}}const r=t.pinned||null;const a={class:E("tr",null)};const l=s?N(a,s):a;const d=t?.template;if(d){let t=d(n,{renderedRow:n("tr",{...l},e)});if(Array.isArray(t)){t=o.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=N({class:E("tr",null,true)},t.vattrs);if(!!t.vchildren){t.vchildren=o.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=N({class:E(t.vtag.toString(),r,true),ref:t=>{K(t,r,i)}},t.vattrs)}return t}))}}return t}))}return t}return n("tr",{...l},e)};const X=({column:t,headRenderer:e,onColumnOrderClick:o,onColumnPinned:s})=>{function r(n){let i;switch(t.order){case"asc":i="desc";break;case"desc":i=null;break;default:i="asc"}o(i,t.prop,n.target.closest("th"))}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:{...E("th",e?.pinned),[`${p}__pin--start`]:t.pinned==="start",[`${p}__pin--end`]:t.pinned==="end",[`${p}__ordered`]:!!t.order,[`${p}__filtered`]:!!t.filter}};let d=a?N(l,a):l;const c=L(t);if(!c)return n(i,null);d=Number(d.colspan)>1?{...d,scope:"colgroup"}:{...d,scope:"col"};if(t.sortable!==false){return n("th",{...d,"aria-sort":t.order?t.order==="asc"?"ascending":"descending":"none",ref:n=>{if(["end","start"].includes(t.pinned))G(n,t.pinned,s);if(["top","bottom"].includes(e.pinned))K(n,e.pinned,s)}},n("button",{class:{[`${p}__order-btn`]:true,[`${p}__cell-content`]:true},onClick:r},L(t),!!t.filter&&n("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?n("nano-icon",{name:"solid/long-arrow-down"}):n("nano-icon",{name:"solid/long-arrow-up"})),n("div",{class:`${p}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))))}return n("th",{...d,ref:n=>{if(["end","start"].includes(t.pinned))G(n,t.pinned,s);if(["top","bottom"].includes(e.pinned))K(n,e.pinned,s)}},n("div",{class:`${p}__cell-content`},L(t),!!t.filter&&n("nano-icon",{name:"light/bars-filter"})))};const Y=({rowIndex:t,colIndex:e,nestedContent:o})=>{const s=o||J(t,e);if(!s)return n(i,null);const r=q();const a=r.config.state.columns[e];let l="td";let d=D(t,e,{class:{[`${p}__td`]:true,[`${p}__ordered`]:!!a.order,[`${p}__pin`]:!!a.pinned,[`${p}__pin--start`]:a.pinned==="start",[`${p}__pin--end`]:a.pinned==="end"}});if(a.rowHeader){d=Number(d.rowspan)>1?{...d,scope:"rowgroup"}:{...d,scope:"row"};l="th"}return n(l,{...d},n("div",{class:`${p}__cell-content`},s))};const Z=(()=>{let t;let n;let i;let e;const o=60;const s=()=>{t=null;e=0};s();return()=>{n=window.scrollY;if(t!=null)e=n-t;t=n;window.clearTimeout(i);i=window.setTimeout(s,o);return e}})();function tt(t){let n=getComputedStyle(t);const i=n.position==="absolute";const e=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(i&&n.position==="static"){continue}if(e.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function nt(t,n=100){const i=t.getBoundingClientRect();const e=window.innerHeight||document.documentElement.clientHeight;if(!i.bottom&&!i.top&&!i.left&&!i.right&&!i.height&&!i.width&&!i.x&&!i.y)return false;return!(Math.floor(100-(i.top>=0?0:i.top)/+-i.height*100)<n||Math.floor(100-(i.bottom-e)/i.height*100)<n)}const it=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset "UTF-8";nano-table{display:block;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250, 250, 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.5rem;--td-padding-bottom:0.4125rem;--th-padding-start:0.625rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--foot-th-padding-h:var(--th-padding-start) var(--th-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-width:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{font-weight:800;background:rgba(var(--head-bg-rgb), 90%);font-size:var(--thead-font-size);border-block-start:none}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{font-weight:800;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;margin:0}.sm .nano-tbl th[scope=row]{max-width:65vw !important}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;transition:max-width 0.25s}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2;max-width:125px}.sm .nano-tbl__pinned--start .nano-tbl__pin--start{max-width:var(--max-col-width)}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline:auto -1px !important;max-width:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.sm .nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';let et=0;const ot=class{constructor(t){s(this,t);this.nanoTblBlockRendered=r(this,"nanoTblBlockRendered",7);this.nanoTblReady=r(this,"nanoTblReady",7);this.nanoTblBeforeSort=r(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=r(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=r(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=r(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=r(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=r(this,"nanoTblAfterSearch",7);this.debounceSetLoading=t=>{this._loading=!!this.store.data.state.rows.length?t:true};this.renderId="tbl-"+et++;this.filters=[];this.currentFilters="";this.currentSort="";this.blockIos=new WeakMap;this.blockHeights=[];this.unitHeight=0;this.ignoreIO=true;this._isReady=false;this.sortStart=async(t,n,i)=>{if(this.currentSort===t+":"+n)return;this.loading=true;const e=this.nanoTblBeforeSort.emit({column:n,order:t});if(e.defaultPrevented)return;this.currentSort=t+":"+n;this.scrollToTop(i);if(this.customSortFn){try{await this.customSortFn(n,t);this.sortComplete(t,n)}catch(t){console.warn("custom sort failed",t)}return}try{await B(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{this.loading=false}};this.setupBlockIO=(t,n)=>{if(!t||this.blockIos.has(t))return;const i=new IntersectionObserver((([i])=>{if(this.ignoreIO)return;if(i.isIntersecting){a((()=>{if(this.scrollSpeed<100||nt(t,.01)){this.activeBlocks=[n,n+1,Math.max(0,n-1)];this.nanoTblBlockRendered.emit({block:n,totalBlocks:this.blockElements.length});requestAnimationFrame((()=>this.setBlockHeight()))}}))}}),{threshold:[0],root:this.scrollParent===document.scrollingElement?null:this.scrollParent});i.observe(t);this.blockIos.set(t,i)};this.handleColumnPinned=t=>{Object.entries(t).forEach((([t,n])=>{this.tableEle.classList.toggle(`${p}__pinned--${t}`,n)}))};this.type="table";this.caption=undefined;this.showCaption=false;this._loading=false;this.placeholderSize=5;this.rows=undefined;this.columns=[];this.headRender={pinned:"top"};this.rowRender=undefined;this.footRender={pinned:"bottom"};this.showFooter=false;this.perBlock=60;this.searchTerm=undefined;this.customFilterFn=undefined;this.customSortFn=undefined;this.blocks=[];this.activeBlocks=[0,1,2];this.measureHeight=0;this.debounceSetLoading=c(this.debounceSetLoading.bind(this),50)}get loading(){return this._loading}set loading(t){this.debounceSetLoading(t)}handleRowsChange(){if(!this.rows){this.loading=true;return}this.loading=true;Promise.resolve(this.rows).then((async t=>{await j(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady){this.setInitialBlockDimension()}this.loading=false}))}async handleColsChange(){await M(this.host,this.columns);if(this.isReady)this.columnInit()}get blocksLength(){return this.blocks.length}handleSearchTermChange(){this.searchStart()}async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const i=this.columns.find((n=>n.prop===t));if(!i)throw"Cannot find column with "+t;return this.sortStart(n,i.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}set measureEle(t){if(!t)return;this.measureHeight=t.getBoundingClientRect().height;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}scrollListener(){const t=Z();this.scrollSpeed=t<0?t*-1:t}handleReady(){const t=window.location.hash;if(t.length>1){const n=document.querySelector(t);if(n){n.scrollIntoView()}}this.nanoTblReady.emit()}sortComplete(t,n){this.columns=this.columns.map((i=>{if(i.prop===n)return{...i,order:t};return{...i,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){this.loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;this.scrollToTop();try{await F(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this.loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this.loading=true;const i=this.nanoTblBeforeFilter.emit({filters:this.filters});if(i.defaultPrevented)return;this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{await this.customFilterFn(this.filters);this.filterComplete()}catch(t){console.warn("custom filter failed",t);this.currentFilters=""}return}try{await A(this.host,this.filters);this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this.loading=false}}filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n)t.filter=n.filter;return t}));this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const i=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!nt(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!nt(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(i)this.scrollParent.scrollLeft=i;if(n)this.scrollParent.style.scrollBehavior=n}setMeasureElement(){a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${p}__inactive`)))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;const t=new Promise((t=>{a((()=>{this.setMeasureElement();if(!this.measureEle&&!this.unitHeight)t();this.blockElements.forEach(((n,i)=>{if(!n||!n.classList?.contains(`${p}__inactive`)){if(i===this.blockElements.length-1)t();return}if(i===this.blockElements.length-1)t()}))}))}));t.then((()=>{requestAnimationFrame((()=>{this.isReady=true}))}))}async columnInit(){this.filters=this.columns.filter((t=>!!t.filter)).map((t=>{const{filter:n,prop:i}=t;return{filter:n,prop:i}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(!!t){await this.sortStart(t.order,t.prop)}}setBlocks(){this.activeBlocks=[0,1,2];this.ignoreIO=true;let t=1;const n=this.store.data.state.rows.length;let i=[];const e=[];this.blockHeights=[];for(t;t<=n;t++){i.push(this.store.data.state.rows[t-1]);if(t%this.perBlock===0){e.push({rows:i,__uuid:d(i.map((t=>t.__uuid)).join())});i=[]}}if(i.length)e.push({rows:i,__uuid:d(i.map((t=>t.__uuid)).join())});this.blocks=e}getBlockHeight(t){if(this.activeBlocks.includes(t))return undefined;if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n)return n.height+"px"}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight+"px"}return this.unitHeight?this.unitHeight*n+"px":undefined}setBlockHeight(){a((()=>{this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;const i=n.getBoundingClientRect().height;const e=this.blockHeights.findIndex((n=>n.blockIndex===t));if(e>0){this.blockHeights[e]={height:i,blockIndex:t}}else this.blockHeights.push({height:i,blockIndex:t})}))}))}processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `title` prop or use the `caption` slot")}}async componentWillLoad(){this.store=await R(this.host,this.columns,this.scrollParent);await this.handleRowsChange();this.processSlots();this.setBlocks();this.store.data.onChange("rows",(()=>this.setBlocks()))}connectedCallback(){a((()=>this.scrollParent=tt(this.host)))}componentDidLoad(){this.setInitialBlockDimension()}componentShouldUpdate(t,n,i){if(["rows","columns"].includes(i))return false}componentWillRender(){}componentDidRender(){requestAnimationFrame((()=>this.ignoreIO=false));this.setMeasureElement()}render(){this.blockElements=[];return n(l,null,n("div",{class:`${p}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("nano-resize-observe",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined,states:"576w sm, 768w md",class:"sm md"},n("div",{class:`${p}__wrap`},n("nano-progress-bar",{indeterminate:true,class:{[`${p}__progress-bar`]:true,[`${p}__progress-bar--show`]:this._loading}}),n("table",{role:this.type==="grid"?"grid":undefined,"aria-readonly":this.type==="table"?"true":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${p}`,ref:t=>this.tableEle=t},n("caption",{class:{[`${p}__caption`]:true,[`${p}__caption--hide`]:!this.showCaption},id:"table-caption-"+this.renderId},n("slot",{name:"caption"},this.caption)),n("thead",null,n(V,{rowRenderer:this.headRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(X,{column:t,headRenderer:this.headRender,onColumnOrderClick:this.sortStart,onColumnPinned:this.handleColumnPinned})])))),this._loading&&!this.blocks.length&&n("tbody",{class:`${p}__active`},[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((i,e)=>n(Y,{rowIndex:t,colIndex:e,nestedContent:n("nano-skeleton",null)}))))))),this.blocks.map(((t,i)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${i}`,ref:t=>{this.blockElements.push(t);this.setupBlockIO(t,i)},class:{[`${p}__inactive`]:!this.activeBlocks.includes(i),[`${p}__active`]:this.activeBlocks.includes(i)}},this.activeBlocks.includes(i)?t.rows.map(((t,e)=>{const o=i>0?i*this.perBlock+e:e;return n(Q,{rowRenderer:this.rowRender,row:t},this.store.config.state.columns.map(((t,i)=>n(Y,{rowIndex:o,colIndex:i}))))})):n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(i)}})))),this.showFooter&&n("tfoot",null,n(V,{rowRenderer:this.footRender,onColumnPinned:this.handleColumnPinned},this.store.config.state.columns.map((t=>[n(X,{column:t,headRenderer:this.footRender,onColumnPinned:this.handleColumnPinned,onColumnOrderClick:this.sortStart})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${p}__spinner`]:true,[`${p}__spinner--show`]:this._loading}}))))}get host(){return e(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"]}}};ot.style=it;export{ot as T,w as c};
+//# sourceMappingURL=p-79ed6247.js.map

package/dist/nano-components/{p-d9d2807a.entry.js → p-d3c83728.entry.js}

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

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-05T14:37:20",
+  "timestamp": "2022-12-05T17:34:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.19.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -124,5 +124,5 @@
     "nanopore",
     "digital"
   ],
-  "gitHead": "bb4f86bd6dd1ae734bfc8042a95df24ec541dcd8"
+  "gitHead": "f6fee893ae65e99fcea328a089e5305549b29040"
 }

package/dist/cjs/table.worker-a192a107.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-a192a107.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/table.worker-d2b4d395.js.map

@@ -1 +0,0 @@
-{"file":"table.worker-d2b4d395.js","mappings":";;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/nano-components/p-40e13cd4.entry.js

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

package/dist/nano-components/p-40e13cd4.entry.js.map

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