npm - @nanoporetech-digital/components - Versions diffs - 3.0.0 → 3.1.1 - Mend

@nanoporetech-digital/components 3.0.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/dist/nano-components/p-b83a8320.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{j as t,h as n,F as e,g as i,e as o,r as s,c as r,d as a,a as l}from"./p-1fe12320.js";import{a as c}from"./p-ee045579.js";import{d as h}from"./p-9746b0a5.js";import{c as d}from"./p-651b3264.js";const b="nano-tbl";const p=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const f=t=>{if(t!=null){if(p(t,"ArrayBuffer")||p(t,"MessagePort")||p(t,"ImageBitmap")||p(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 w=new Map;const m=(n,e,i)=>{const o=new Worker(n,{name:e});o.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const o=n[1];const s=n[2];if(e===i){const e=n[3];const[i,r,a]=g.get(o);g.delete(o);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>w.delete(t)))}i(s)}}else if(e===i+".cb"){try{w.get(o)(...s)}catch(n){t(n)}}}}));return o};const x=(t,n,e)=>(...i)=>new Promise(((o,s)=>{let r=u++;let a=0;let l=i.length;let c=[o,s];g.set(r,c);for(;a<l;a++){if(typeof i[a]==="function"){const t=_++;w.set(t,i[a]);i[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const h=t=>t.postMessage([n,r,e,i],f(i));if(t.then){t.then(h)}else{h(t)}}));const y=import("./p-7ade1695.js").then((t=>t.worker));const k=x(y,"stencil.table.worker","createWorkerStore");const v=x(y,"stencil.table.worker","syncConfigToWorker");const $=x(y,"stencil.table.worker","syncDataToWorker");const C=x(y,"stencil.table.worker","workerFilter");const z=x(y,"stencil.table.worker","workerSearch");const S=x(y,"stencil.table.worker","workerSort");function I(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(!!t.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const R=new WeakMap;async function T(t,n,e){const i={data:d({rows:[]}),config:d({columns:n}),general:d({workerId:null,scrollParent:e,host:t})};const o=await k(i.data.state.rows,I(i.config.state.columns));i.general.state.workerId=o;R.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)$(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)$(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)v(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)v(i.general.state.workerId,null)}});return i}function j(t){return R.get(t)}function O(t,n){const e=R.get(t);if(!e)return;n=n.map(((t,n)=>({...t,__index:n,__uuid:c(Object.values(t).join())})));e.data.state.rows=n;if(e.general.state.workerId)return $(e.general.state.workerId,n)}function M(t,n){const e=R.get(t);if(!e)return;if(e.general.state.workerId)v(e.general.state.workerId,I(n));e.config.state.columns=n}async function F(t,n){const e=R.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await z(e.general.state.workerId,n)}catch(t){console.log(t)}}async function A(t,n){const e=R.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await C(e.general.state.workerId,n)}catch(t){console.log(t)}}async function B(t,n,e){const i=R.get(t);if(!i||!i.general.state.workerId)return;try{i.data.state.rows=await S(i.general.state.workerId,n,e)}catch(t){console.log(t)}}function P(t,n){const e=N();const i=e.config.state.columns;const o=e.data.state.rows;const s=i[n];const r=s?.prop;const a=o[t];const l=a[i[n].prop];return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=N();const e=n.data.state.rows;const i=e[t];return{row:i,rowIndex:t}}function q(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function N(){return j(i(o()))}function D(t,n,e){const i={...e};const o=N().config.state.columns[n]?.cellProperties;if(!o)return i;const s=P(t,n);const r=o(s);if(!r)return i;return q(i,r)}function J(t,i){const o=N();const s=o.config.state.columns;const r=s[i]?.cellTemplate;const a=P(t,i);return r?r(n,a):n(e,null,a.cellModel)}function L(t){const i=t?.colTemplate;return i?i(n,t):n(e,null,t.title)}function E(t,n,e=false){const i={[`${b}__${t}`]:true,[`${b}__pin`]:!!n,[`${b}__pin--top`]:n==="top",[`${b}__pin--bottom`]:n==="bottom"};if(e){let t="";Object.entries(i).forEach((([n,e])=>{if(e)t+=n+" "}));return t}return i}const H=new WeakMap;const U=new WeakMap;function G(t,n,e){if(H.get(t))return;const i=N();const o=i.general.state.scrollParent;const s=i.general.state.host;const r=new IntersectionObserver((([t])=>{const i={};if(n==="start"){i.start=t.boundingClientRect.x-(s.getBoundingClientRect().x+o.scrollLeft)<0&&!t.isIntersecting}if(n==="end"){i.end=t.boundingClientRect.right>t.boundingClientRect.width&&!t.isIntersecting}e(i)}),{threshold:[1],rootMargin:"1px 0px 1px 0px",root:o===document.scrollingElement?null:o});H.set(t,r);requestAnimationFrame((()=>r.observe(t)))}function K(t,n,e){if(U.get(t))return;const i=N();const o=i.general.state.scrollParent;const s=i.general.state.host;const r=new IntersectionObserver((([t])=>{const i={};if(n==="top"){i.top=t.boundingClientRect.y-(s.getBoundingClientRect().y+o.scrollTop)<0&&!t.isIntersecting}if(n==="bottom")i.bottom=t.boundingClientRect.height>t.intersectionRect.height&&!t.isIntersecting;e(i)}),{threshold:[.99],rootMargin:"0px 100px 0px 100px",root:o===document.scrollingElement?null:o});U.set(t,r);requestAnimationFrame((()=>r.observe(t)))}const Q=({rowRenderer:t,rowIndex:e,row:i},o)=>{let s={};if(!i){const t=W(e);i=t.row}if(t?.rowProperties){s=t.rowProperties({row:i,rowIndex:e})||s}let r;if(t?.pinned&&typeof t.pinned==="function"){r=t.pinned()}const a={class:E("tr",r)};const l=s?q(a,s):a;return n("tr",{...l,key:i.__uuid},o)};const V=({rowRenderer:t,onColumnPinned:e},i,o)=>{let s={};if(t.rowProperties){s=t.rowProperties()||{}}const r=t.pinned||null;const a={class:E("tr",null)};const l=s?q(a,s):a;const c=t?.template;if(c){let t=c(n,{renderedRow:n("tr",{...l},i)});if(Array.isArray(t)){t=o.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=q({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=q({class:E(t.vtag.toString(),r,true),ref:t=>{K(t,r,e)}},t.vattrs)}return t}))}}return t}))}return t}return n("tr",{...l},i)};const X=({column:t,headRenderer:i,onColumnOrderClick:o,onColumnPinned:s})=>{function r(n){let e;switch(t.order){case"asc":e="desc";break;case"desc":e=null;break;default:e="asc"}o(e,t.prop,n.target.closest("th"))}let a={};if(t.columnProperties){a=t.columnProperties(t)||a}const l={class:{...E("th",i?.pinned),[`${b}__pin--start`]:t.pinned==="start",[`${b}__pin--end`]:t.pinned==="end",[`${b}__ordered`]:!!t.order,[`${b}__filtered`]:!!t.filter}};let c=a?q(l,a):l;const h=L(t);if(!h)return n(e,null);c=Number(c.colspan)>1?{...c,scope:"colgroup"}:{...c,scope:"col"};if(t.sortable!==false){return n("th",{...c,"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(i.pinned))K(n,i.pinned,s)}},n("button",{class:{[`${b}__order-btn`]:true,[`${b}__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:`${b}__status-icons`},n("nano-icon",{name:"light/chevron-down"}))))}return n("th",{...c,ref:n=>{if(["end","start"].includes(t.pinned))G(n,t.pinned,s);if(["top","bottom"].includes(i.pinned))K(n,i.pinned,s)}},n("div",{class:`${b}__cell-content`},L(t),!!t.filter&&n("nano-icon",{name:"light/bars-filter"})))};const Y=({rowIndex:t,colIndex:i,nestedContent:o})=>{const s=o||J(t,i);if(!s)return n(e,null);const r=N();const a=r.config.state.columns[i];let l="td";let c=D(t,i,{class:{[`${b}__td`]:true,[`${b}__ordered`]:!!a.order,[`${b}__pin`]:!!a.pinned,[`${b}__pin--start`]:a.pinned==="start",[`${b}__pin--end`]:a.pinned==="end"}});if(a.rowHeader){c=Number(c.rowspan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};l="th"}return n(l,{...c},n("div",{class:`${b}__cell-content`},s))};const Z=(()=>{let t;let n;let e;let i;const o=60;const s=()=>{t=null;i=0};s();return()=>{n=window.scrollY;if(t!=null)i=n-t;t=n;window.clearTimeout(e);e=window.setTimeout(s,o);return i}})();function tt(t){let n=getComputedStyle(t);const e=n.position==="absolute";const i=/(auto|scroll)/;if(n.position==="fixed")return document.documentElement;for(let o=t;o=o.parentElement;){n=getComputedStyle(o);if(e&&n.position==="static"){continue}if(i.test(n.overflow+n.overflowY+n.overflowX))return o}return document.documentElement}function nt(t,n=100){const e=t.getBoundingClientRect();const i=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-i)/e.height*100)<n)}const et=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset "UTF-8";nano-table{display:table;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--border-color:var(--nano-color-palegrey, #b5aea7);--border-style:1px solid var(--border-color);--border-tint-color:var(--nano-color-blue, #90c6e7);--border-tint-style:2px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:var(--cell-bg-rgb);--foot-bg-rgb:var(--cell-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding:0.5rem 0.625rem 0.4125rem;--th-padding:0.875rem 0.625rem 0.6875rem;--head-th-padding:var(--th-padding);--foot-th-padding:var(--td-padding);--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));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent}.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}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end: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;-moz-appearance:none;appearance:none;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;-webkit-transition:scale 0.25s;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;-webkit-border-after:var(--border-style);border-block-end:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}@media (min-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding) !important;padding-inline-start:var(--bookend-col-padding) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding) !important;padding-inline-end:var(--bookend-col-padding) !important}}thead .nano-tbl__td,thead .nano-tbl__th{font-weight:800;background:rgba(var(--head-bg-rgb), 90%)}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding:var(--head-th-padding)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{font-weight:800;-webkit-border-after:none;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding:var(--foot-th-padding)}.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:var(--td-padding)}.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;max-width:65vw;margin:0}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;-webkit-transition:max-width 0.25s;transition:max-width 0.25s}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;-webkit-box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2}@media (max-width: 576px){.nano-tbl__pinned--start .nano-tbl__pin--start{max-width:25vw !important}}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{inset-inline:auto -1px;max-width:min(50vw, 200px);}.nano-tbl__pin--end::after{content:"";position:absolute;inset:0;-webkit-box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}@media (max-width: 576px){.nano-tbl__pin--start~.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start~.nano-tbl__pin--end::after{display:none}}.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;-webkit-border-before:var(--border-tint-style);border-block-start:var(--border-tint-style)}.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,.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;-webkit-transition:scale 0.25s;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:-1}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}';let it=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=t};this.renderId="tbl-"+it++;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,e)=>{if(this.currentSort===t+":"+n)return;this.loading=true;const i=this.nanoTblBeforeSort.emit({column:n,order:t});if(i.defaultPrevented)return;this.currentSort=t+":"+n;this.scrollToTop(e);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 e=new IntersectionObserver((([e])=>{if(this.ignoreIO)return;if(e.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});e.observe(t);this.blockIos.set(t,e)};this.handleColumnPinned=t=>{Object.entries(t).forEach((([t,n])=>{this.tableEle.classList.toggle(`${b}__pinned--${t}`,n)}))};this.type="table";this.caption=undefined;this.showCaption=false;this._loading=true;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=h(this.debounceSetLoading.bind(this),50)}get loading(){return this._loading}set loading(t){this.debounceSetLoading(t)}handleRowsChange(){if(!this.rows)return;this.loading=true;Promise.resolve(this.rows).then((async t=>{await O(this.host,t);if(!this.isReady){await this.columnInit();this.setInitialBlockDimension()}this.loading=false}))}handleColsChange(){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 e=this.columns.find((n=>n.prop===t));if(!e)throw"Cannot find column with "+t;return this.sortStart(n,e.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((e=>{if(e.prop===n)return{...e,order:t};return{...e,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 e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.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 e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!nt(this.topAnchorEle,.1))this.topAnchorEle.scrollIntoView();if(t)t.scrollIntoView({block:"start"});if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n}setMeasureElement(){a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${b}__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,e)=>{if(!n||!n.classList?.contains(`${b}__inactive`)){if(e===this.blockElements.length-1)t();return}if(e===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:e}=t;return{filter:n,prop:e}}));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 e=[];const i=[];this.blockHeights=[];for(t;t<=n;t++){e.push(this.store.data.state.rows[t-1]);if(t%this.perBlock===0){i.push({rows:e,__uuid:c(e.map((t=>t.__uuid)).join())});e=[]}}if(e.length)i.push({rows:e,__uuid:c(e.map((t=>t.__uuid)).join())});this.blocks=i}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 e=n.getBoundingClientRect().height;const i=this.blockHeights.findIndex((n=>n.blockIndex===t));if(i>0){this.blockHeights[i]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,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 T(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,e){if(["rows","columns"].includes(e))return false}componentWillRender(){}componentDidRender(){requestAnimationFrame((()=>this.ignoreIO=false));this.setMeasureElement()}render(){this.blockElements=[];return n(l,null,n("div",{class:`${b}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),n("div",{"aria-labelledby":"table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},n("nano-progress-bar",{indeterminate:true,class:{[`${b}__progress-bar`]:true,[`${b}__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:`${b}`,ref:t=>this.tableEle=t},n("caption",{class:{[`${b}__caption`]:true,[`${b}__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&&[...Array(10).keys()].map((t=>n("tr",null,this.store.config.state.columns.map(((e,i)=>n(Y,{rowIndex:t,colIndex:i,nestedContent:n("nano-skeleton",null)})))))),this.blocks.map(((t,e)=>n("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${e}`,ref:t=>{this.blockElements.push(t);this.setupBlockIO(t,e)},class:{[`${b}__inactive`]:!this.activeBlocks.includes(e),[`${b}__active`]:this.activeBlocks.includes(e)}},this.activeBlocks.includes(e)?t.rows.map(((t,i)=>{const o=e>0?e*this.perBlock+i:i;return n(Q,{rowRenderer:this.rowRender,row:t},this.store.config.state.columns.map(((t,e)=>n(Y,{rowIndex:o,colIndex:e}))))})):n("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(e)}})))),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})]))))),!!this.blocks.length&&n("nano-spinner",{type:"circle",class:{[`${b}__spinner`]:true,[`${b}__spinner--show`]:this.loading}})))}get host(){return i(this)}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"]}}};ot.style=et;export{ot as T,m as c};
+//# sourceMappingURL=p-b83a8320.js.map

package/dist/nano-components/p-b83a8320.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/table/table.constants.ts","@worker-helper","src/components/table/table.store.ts","src/components/table/table.service.tsx","src/components/table/table.children.tsx","src/components/table/table.utils.ts","src/components/table/table.scss?tag=nano-table","src/components/table/table.tsx"],"names":["CSSNAMESPACE","isInstanceOf","value","className","C","globalThis","getTransferables","constructor","Object","values","Array","isArray","flatMap","buffer","pendingIds","callbackIds","pending","Map","callbacks","createWorker","workerPath","workerName","workerMsgId","worker","Worker","name","addEventListener","data","workerMsg","id","err","resolve","reject","get","delete","errObj","assign","Error","message","consoleError","forEach","e","createWorkerProxy","exportedMethod","args","Promise","pendingId","i","argLen","length","mainData","set","callbackId","push","postMessage","w","then","colsToWorker","columns","safeColumns","JSON","parse","stringify","c","sortCompareFn","safeCol","find","sc","prop","toString","stores","WeakMap","async","generateStore","host","scrollParent","store","createStore","rows","config","general","workerId","createWorkerStore","state","use","reset","syncDataToWorker","dispose","syncConfigToWorker","getStore","storeSetData","map","row","__index","__uuid","cyrb53","join","storeSetConfig","storeSearch","term","workerSearch","console","log","storeFilter","filters","workerFilter","storeSort","order","workerSort","colDataModel","rowIndex","colIndex","fetchStores","column","rowModel","cellModel","rowDataModel","mergeProperties","current","extra","props","class","style","getElement","getRenderingRef","mergeCellProperties","defaultProps","extraPropsFunc","cellProperties","cellRender","tpl","cellTemplate","model","h","Fragment","colheadFootRender","col","colTemplate","title","baseClasses","type","vPinned","classes","[object Object]","classString","entries","on","stickyHIOs","stickyVIOs","addHObserver","el","pos","cb","root","observer","IntersectionObserver","positions","start","boundingClientRect","x","getBoundingClientRect","scrollLeft","isIntersecting","end","right","width","threshold","rootMargin","document","scrollingElement","requestAnimationFrame","observe","addVObserver","top","y","scrollTop","bottom","height","intersectionRect","TableRow","rowRenderer","children","extraProps","rowProperties","pinned","baseProps","key","TableHeadFootRow","onColumnPinned","utils","template","toRender","renderedRow","node","vtag","vattrs","vchildren","cNode","includes","ref","th","TableColHead","headRenderer","onColumnOrderClick","handleColumnOrderClick","target","closest","columnProperties","filter","content","Number","colspan","scope","sortable","aria-sort","onClick","TableCell","nestedContent","CellType","rowHeader","rowspan","detectScrollSpeed","lastPos","newPos","timer","delta","delay","clear","window","scrollY","clearTimeout","setTimeout","findScrollParent","element","getComputedStyle","excludeStaticParent","position","overflowRegex","documentElement","parent","parentElement","test","overflow","overflowY","overflowX","isInViewport","percentVisible","r","windowHeight","innerHeight","clientHeight","left","Math","floor","tableCss","Table","hostRef","this","debounceSetLoading","l","_loading","renderId","currentFilters","currentSort","blockIos","blockHeights","unitHeight","ignoreIO","_isReady","sortStart","loading","sortEvent","nanoTblBeforeSort","emit","defaultPrevented","scrollToTop","customSortFn","sortComplete","warn","setupBlockIO","blockIndex","has","blockIo","ioEntry","readTask","scrollSpeed","activeBlocks","max","nanoTblBlockRendered","block","totalBlocks","blockElements","setBlockHeight","handleColumnPinned","applied","tableEle","classList","toggle","debounce","bind","isReady","columnInit","setInitialBlockDimension","blocksLength","blocks","searchStart","filterStart","additive","measureEle","measureHeight","querySelector","ready","handleReady","speed","hash","location","idRow","scrollIntoView","nanoTblReady","nanoTblAfterSort","nanoTblBeforeSearch","searchTerm","nanoTblAfterSearch","f","ff","nanoTblBeforeFilter","customFilterFn","filterComplete","cFilter","nanoTblAfterFilter","scrollBehaviour","scrollBehavior","scrollX","topAnchorEle","b","contains","finishResizing","setMeasureElement","perBlock","undefined","cachedBlockHeight","bh","blockLength","fBhI","findIndex","caption","error","handleRowsChange","processSlots","setBlocks","onChange","_newVal","_oldVal","stateName","Host","a","aria-labelledby","tabindex","indeterminate","role","aria-readonly","aria-rowcount","aria-colcount","tbl","showCaption","headRender","colModel","keys","_colModel","tb","rowRender","colSpan","getBlockHeight","showFooter","footRender"],"mappings":";;;wMAAO,MAAMA,EAAe,WCI5B,MAAMC,EAAe,CAACC,EAAOC,KAC3B,MAAMC,EAAIC,WAAWF,GACrB,OAAOC,GAAK,MAAQF,aAAiBE,GAEvC,MAAME,EAAoBJ,IACxB,GAAIA,GAAS,KAAM,CACnB,GACED,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,gBACpBD,EAAaC,EAAO,mBACpB,CACA,MAAO,CAACA,GAEV,UAAWA,IAAU,SAAU,CAC7B,GAAIA,EAAMK,cAAgBC,OAAQ,CAClCN,EAAQM,OAAOC,OAAOP,GAEtB,GAAIQ,MAAMC,QAAQT,GAAQ,CAC1B,OAAOA,EAAMU,QAAQN,GAErB,OAAOA,EAAiBJ,EAAMW,SAGhC,MAAO,IAGT,IAAIC,EAAa,EACjB,IAAIC,EAAc,EAClB,MAAMC,EAAU,IAAIC,IACpB,MAAMC,EAAY,IAAID,IAEV,MAACE,EAAe,CAACC,EAAYC,EAAYC,KACnD,MAAMC,EAAS,IAAIC,OAAOJ,EAAY,CAACK,KAAKJ,IAE5CE,EAAOG,iBAAiB,WAAW,EAAEC,KAAAA,MACrC,GAAIA,EAAM,CACR,MAAMC,EAAYD,EAAK,GACvB,MAAME,EAAKF,EAAK,GAChB,MAAMzB,EAAQyB,EAAK,GAEnB,GAAIC,IAAcN,EAAa,CAC/B,MAAMQ,EAAMH,EAAK,GACjB,MAAOI,EAASC,EAAQjB,GAAeC,EAAQiB,IAAIJ,GACnDb,EAAQkB,OAAOL,GAEf,GAAIC,EAAK,CACP,MAAMK,EAAUL,EAAW,QACzBtB,OAAO4B,OAAO,IAAIC,MAAMP,EAAI5B,MAAMoC,SAAUR,EAAI5B,OAChD4B,EAAI5B,MAENqC,EAAaJ,GACbH,EAAOG,OACF,CACL,GAAIpB,EAAa,CACjBA,EAAYyB,SAAQX,GAAMX,EAAUgB,OAAOL,KAE3CE,EAAQ7B,SAEH,GAAI0B,IAAcN,EAAc,MAAO,CAC9C,IACEJ,EAAUe,IAAIJ,EAAdX,IAAqBhB,GACrB,MAAOuC,GACPF,EAAaE,SAMjB,OAAOlB,GAGF,MAAMmB,EAAoB,CAACnB,EAAQD,EAAaqB,IAAc,IAC/DC,IAAS,IAAIC,SAAQ,CAACd,EAASC,KACnC,IAAIc,EAAYhC,IAChB,IAAIiC,EAAI,EACR,IAAIC,EAASJ,EAAKK,OAClB,IAAIC,EAAW,CAACnB,EAASC,GACzBhB,EAAQmC,IAAIL,EAAWI,GAEvB,KAAOH,EAAIC,EAAQD,IAAK,CACtB,UAAWH,EAAKG,KAAO,WAAY,CACnC,MAAMK,EAAarC,IACnBG,EAAUiC,IAAIC,EAAYR,EAAKG,IAC/BH,EAAKG,GAAK,CAACzB,EAAc,MAAO8B,IAC/BF,EAAS,GAAKA,EAAS,IAAM,IAAIG,KAAKD,IAGzC,MAAME,EAAeC,GACnBA,EAAED,YACF,CAAChC,EAAawB,EAAWH,EAAgBC,GACzCtC,EAAiBsC,IAGnB,GAAIrB,EAAOiC,KAAM,CACfjC,EAAOiC,KAAKF,OACP,CACLA,EAAY/B,4XC/EhB,SAASkC,EAAaC,GACpB,MAAMC,EAAkDC,KAAKC,MAC3DD,KAAKE,UAAUJ,IAEjBA,EAAQlB,SAASuB,IACf,KAAMA,EAAEC,cAAe,CACrB,MAAMC,EAAUN,EAAYO,MAAMC,GAAOA,EAAGC,OAASL,EAAEK,OACvDH,EAAQD,cAAgBD,EAAEC,cAAcK,eAG5C,OAAOV,EAGT,MAAMW,EAA4C,IAAIC,QAE/CC,eAAeC,EACpBC,EACAhB,EACAiB,GAEA,MAAMC,EAAqB,CACzBjD,KAAMkD,EAAY,CAAEC,KAAM,KAC1BC,OAAQF,EAAY,CAAEnB,QAAAA,IACtBsB,QAASH,EAAY,CAAEI,SAAU,KAAMN,aAAAA,EAAcD,KAAAA,KAGvD,MAAM7C,QAAWqD,EACfN,EAAMjD,KAAKwD,MAAML,KACjBrB,EAAamB,EAAMG,OAAOI,MAAMzB,UAElCkB,EAAMI,QAAQG,MAAMF,SAAWpD,EAC/ByC,EAAOnB,IAAIuB,EAAME,GAIjBA,EAAMjD,KAAKyD,IAAI,CACbC,MAAO,KACL,GAAIT,EAAMI,QAAQG,MAAMF,SACtBK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAU,OAEnDM,QAAS,KACP,GAAIX,EAAMI,QAAQG,MAAMF,SACtBK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAU,SAGrDL,EAAMG,OAAOK,IAAI,CACfC,MAAO,KACL,GAAIT,EAAMI,QAAQG,MAAMF,SACtBO,EAAmBZ,EAAMI,QAAQG,MAAMF,SAAU,OAErDM,QAAS,KACP,GAAIX,EAAMI,QAAQG,MAAMF,SACtBO,EAAmBZ,EAAMI,QAAQG,MAAMF,SAAU,SAGvD,OAAOL,WAGOa,EAASf,GACvB,OAAOJ,EAAOrC,IAAIyC,YAGJgB,EAAahB,EAAmBI,GAC9C,MAAMF,EAAQN,EAAOrC,IAAIyC,GACzB,IAAKE,EAAO,OAGZE,EAAOA,EAAKa,KAAI,CAACC,EAAK7C,KAAC,IAClB6C,EACHC,QAAS9C,EACT+C,OAAQC,EAAOvF,OAAOC,OAAOmF,GAAKI,YAGpCpB,EAAMjD,KAAKwD,MAAML,KAAOA,EAExB,GAAIF,EAAMI,QAAQG,MAAMF,SACtB,OAAOK,EAAiBV,EAAMI,QAAQG,MAAMF,SAAUH,YAG1CmB,EACdvB,EACAhB,GAEA,MAAMkB,EAAQN,EAAOrC,IAAIyC,GACzB,IAAKE,EAAO,OAEZ,GAAIA,EAAMI,QAAQG,MAAMF,SACtBO,EAAmBZ,EAAMI,QAAQG,MAAMF,SAAUxB,EAAaC,IAChEkB,EAAMG,OAAOI,MAAMzB,QAAUA,EAGxBc,eAAe0B,EAAYxB,EAAmByB,GACnD,MAAMvB,EAAQN,EAAOrC,IAAIyC,GACzB,IAAKE,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMjD,KAAKwD,MAAML,WAAasB,EAC5BxB,EAAMI,QAAQG,MAAMF,SACpBkB,GAEF,MAAO1D,GACP4D,QAAQC,IAAI7D,IAIT+B,eAAe+B,EACpB7B,EACA8B,GAEA,MAAM5B,EAAQN,EAAOrC,IAAIyC,GACzB,IAAKE,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMjD,KAAKwD,MAAML,WAAa2B,EAC5B7B,EAAMI,QAAQG,MAAMF,SACpBuB,GAEF,MAAO/D,GACP4D,QAAQC,IAAI7D,IAIT+B,eAAekC,EACpBhC,EACAN,EACAuC,GAEA,MAAM/B,EAAQN,EAAOrC,IAAIyC,GACzB,IAAKE,IAAUA,EAAMI,QAAQG,MAAMF,SAAU,OAE7C,IACEL,EAAMjD,KAAKwD,MAAML,WAAa8B,EAC5BhC,EAAMI,QAAQG,MAAMF,SACpBb,EACAuC,GAEF,MAAOlE,GACP4D,QAAQC,IAAI7D,ICrJhB,SAASoE,EACPC,EACAC,GAEA,MAAMnC,EAAQoC,IACd,MAAMtD,EAAUkB,EAAMG,OAAOI,MAAMzB,QACnC,MAAMoB,EAAOF,EAAMjD,KAAKwD,MAAML,KAE9B,MAAMmC,EAASvD,EAAQqD,GACvB,MAAM3C,EAA0C6C,GAAQ7C,KACxD,MAAM8C,EAAWpC,EAAKgC,GACtB,MAAMK,EAAYD,EAASxD,EAAQqD,GAAU3C,MAE7C,MAAO,CACLA,KAAAA,EACA+C,UAAAA,EACAF,OAAAA,EACAH,SAAAA,EACAI,SAAAA,YASYE,EAAaN,GAC3B,MAAMlC,EAAQoC,IACd,MAAMlC,EAAOF,EAAMjD,KAAKwD,MAAML,KAC9B,MAAMc,EAAMd,EAAKgC,GAEjB,MAAO,CACLlB,IAAAA,EACAkB,SAAAA,YAUYO,EACdC,EACAC,GAEA,IAAKA,EAAO,OAAOD,EAGnB,MAAME,EAA6B,IAAKD,KAAUD,GAIlD,GAAIC,EAAME,MAAO,CACf,UAAWF,EAAME,QAAU,iBAAmBD,EAAMC,QAAU,SAAU,CACtED,EAAMC,MAAQ,IAAKF,EAAME,SAAUD,EAAMC,YACpC,UACEF,EAAME,QAAU,iBAChBD,EAAMC,QAAU,SACvB,CACAD,EAAMC,MAAMF,EAAME,OAAS,UACtB,UAAWD,EAAMC,QAAU,SAAU,CAC1CD,EAAMC,OAAS,IAAMF,EAAME,OAI/B,GAAIF,EAAMG,MAAO,CACfF,EAAME,MAAQ,IAAKH,EAAMG,SAAUF,EAAME,OAE3C,OAAOF,WAOOR,IACd,OAAOvB,EAASkC,EAAWC,eAWbC,EACdf,EACAC,EACAe,GAEA,MAAMN,EAA6B,IAAKM,GACxC,MAAMC,EACJf,IAAcjC,OAAOI,MAAMzB,QAAQqD,IAAWiB,eAChD,IAAKD,EAAgB,OAAOP,EAE5B,MAAM7F,EAAOkF,EAAaC,EAAUC,GACpC,MAAMQ,EAAQQ,EAAepG,GAC7B,IAAK4F,EAAO,OAAOC,EAEnB,OAAOH,EAAgBG,EAAOD,YAShBU,EAAWnB,EAAkBC,GAC3C,MAAMnC,EAAQoC,IACd,MAAMtD,EAAUkB,EAAMG,OAAOI,MAAMzB,QACnC,MAAMwE,EAAMxE,EAAQqD,IAAWoB,aAC/B,MAAMC,EAAQvB,EAAaC,EAAUC,GAErC,OAAOmB,EACLA,EAAIG,EAAyCD,GAE7CC,EAACC,EAAQ,KAAEF,EAAMjB,oBASLoB,EAAkBC,GAChC,MAAMN,EAAMM,GAAKC,YACjB,OAAOP,EACLA,EAAIG,EAAyCG,GAE7CH,EAACC,EAAQ,KAAEE,EAAIE,OCxHnB,SAASC,EACPC,EACAC,EACAxE,EAAW,OAEX,MAAMyE,EAAU,CACdC,CAAC,GAAG/I,MAAiB4I,KAAS,KAC9BG,CAAC,GAAG/I,YAAwB6I,EAC5BE,CAAC,GAAG/I,eAA2B6I,IAAY,MAC3CE,CAAC,GAAG/I,kBAA8B6I,IAAY,UAGhD,GAAIxE,EAAU,CACZ,IAAI2E,EAAc,GAClBxI,OAAOyI,QAAQH,GAAStG,SAAQ,EAAErC,EAAW+I,MAC3C,GAAIA,EAAIF,GAAe7I,EAAY,OAErC,OAAO6I,EAET,OAAOF,EAGT,MAAMK,EACJ,IAAI5E,QACN,MAAM6E,EACJ,IAAI7E,QAEN,SAAS8E,EACPC,EACAC,EACAC,GAEA,GAAIL,EAAWlH,IAAIqH,GAAK,OAExB,MAAM1E,EAAQoC,IACd,MAAMyC,EAAO7E,EAAMI,QAAQG,MAAMR,aACjC,MAAMD,EAAOE,EAAMI,QAAQG,MAAMT,KAEjC,MAAMgF,EAAW,IAAIC,sBACnB,EAAElH,MACA,MAAMmH,EAAwD,GAC9D,GAAIL,IAAQ,QAAS,CACnBK,EAAUC,MACRpH,EAAEqH,mBAAmBC,GAClBrF,EAAKsF,wBAAwBD,EAAIN,EAAKQ,YACvC,IAAMxH,EAAEyH,eAEd,GAAIX,IAAQ,MAAO,CAEjBK,EAAUO,IACR1H,EAAEqH,mBAAmBM,MAAQ3H,EAAEqH,mBAAmBO,QACjD5H,EAAEyH,eAEPV,EAAGI,KAEL,CACEU,UAAW,CAAC,GACZC,WAAY,kBACZd,KAAMA,IAASe,SAASC,iBAAmB,KAAOhB,IAGtDN,EAAWhG,IAAImG,EAAII,GACnBgB,uBAAsB,IAAMhB,EAASiB,QAAQrB,KAG/C,SAASsB,EACPtB,EACAC,EACAC,GAEA,GAAIJ,EAAWnH,IAAIqH,GAAK,OAExB,MAAM1E,EAAQoC,IACd,MAAMyC,EAAO7E,EAAMI,QAAQG,MAAMR,aACjC,MAAMD,EAAOE,EAAMI,QAAQG,MAAMT,KAEjC,MAAMgF,EAAW,IAAIC,sBACnB,EAAElH,MACA,MAAMmH,EAAwD,GAC9D,GAAIL,IAAQ,MAAO,CACjBK,EAAUiB,IACRpI,EAAEqH,mBAAmBgB,GAClBpG,EAAKsF,wBAAwBc,EAAIrB,EAAKsB,WACvC,IAAMtI,EAAEyH,eAEd,GAAIX,IAAQ,SACVK,EAAUoB,OACRvI,EAAEqH,mBAAmBmB,OAASxI,EAAEyI,iBAAiBD,SAChDxI,EAAEyH,eACPV,EAAGI,KAEL,CACEU,UAAW,CAAC,KACZC,WAAY,sBACZd,KAAMA,IAASe,SAASC,iBAAmB,KAAOhB,IAGtDL,EAAWjG,IAAImG,EAAII,GACnBgB,uBAAsB,IAAMhB,EAASiB,QAAQrB,KASxC,MAAM6B,EAA+C,EACxDC,YAAAA,EAAatE,SAAAA,EAAUlB,IAAAA,GACzByF,KAEA,IAAIC,EAAa,GAEjB,IAAK1F,EAAK,CACR,MAAMwC,EAAQhB,EAAaN,GAC3BlB,EAAMwC,EAAMxC,IAGd,GAAIwF,GAAaG,cAAe,CAC9BD,EACEF,EAAYG,cAAc,CAAE3F,IAAKA,EAAKkB,SAAAA,KAAewE,EAGzD,IAAIE,EACJ,GAAIJ,GAAaI,eAAiBJ,EAAYI,SAAW,WAAY,CACnEA,EAASJ,EAAYI,SAGvB,MAAMC,EAAY,CAAEhE,MAAOkB,EAAY,KAAM6C,IAC7C,MAAMhE,EAAQ8D,EAAajE,EAAgBoE,EAAWH,GAAcG,EAEpE,OACEpD,EAAA,KAAA,IAAQb,EAAOkE,IAAK9F,EAAIE,QACrBuF,IAUA,MAAMM,EAA4D,EACrEP,YAAAA,EAAaQ,eAAAA,GACfP,EACAQ,KAEA,IAAIP,EAAa,GACjB,GAAIF,EAAYG,cAAe,CAC7BD,EAAaF,EAAYG,iBAAmB,GAG9C,MAAMC,EAASJ,EAAYI,QAAU,KACrC,MAAMC,EAAY,CAAEhE,MAAOkB,EAAY,KAAM,OAC7C,MAAMnB,EAAQ8D,EAAajE,EAAgBoE,EAAWH,GAAcG,EACpE,MAAMvD,EAAMkD,GAAaU,SAEzB,GAAI5D,EAAK,CACP,IAAI6D,EAAW7D,EAAIG,EAA8B,CAC/C2D,YAAa3D,EAAA,KAAA,IAAQb,GAAQ6D,KAG/B,GAAI3K,MAAMC,QAAQoL,GAAW,CAC3BA,EAAWF,EAAMlG,IAAIoG,GAAWE,IAC9B,GAAIA,EAAKC,OAAS,KAAM,CACtBD,EAAKE,OAAS9E,EACZ,CAAEI,MAAOkB,EAAY,KAAM,KAAM,OACjCsD,EAAKE,QAGP,KAAMF,EAAKG,UAAW,CACpBH,EAAKG,UAAYP,EAAMlG,IAAIsG,EAAKG,WAAYC,IAC1C,GAAI,CAAC,KAAM,MAAMC,SAASD,EAAMH,KAAK7H,YAAa,CAChDgI,EAAMF,OAAS9E,EACb,CACEI,MAAOkB,EACL0D,EAAMH,KAAK7H,WACXmH,EACA,MAEFe,IAAMC,IACJ5B,EAAa4B,EAAIhB,EAAQI,KAG7BS,EAAMF,QAGV,OAAOE,MAIb,OAAOJ,KAGX,OAAOF,EAGT,OAAO1D,EAAA,KAAA,IAAQb,GAAQ6D,IAclB,MAAMoB,EAAuD,EAClExF,OAAAA,EACAyF,aAAAA,EACAC,mBAAAA,EACAf,eAAAA,MAEA,SAASgB,EAAuBnK,GAC9B,IAAIkE,EACJ,OAAQM,EAAON,OACb,IAAK,MACHA,EAAQ,OACR,MACF,IAAK,OACHA,EAAQ,KACR,MACF,QACEA,EAAQ,MAEZgG,EAAmBhG,EAAOM,EAAO7C,KAAM3B,EAAEoK,OAAOC,QAAQ,OAG1D,IAAIxB,EAAa,GACjB,GAAIrE,EAAO8F,iBAAkB,CAC3BzB,EAAarE,EAAO8F,iBAAiB9F,IAAWqE,EAGlD,MAAMG,EAAY,CAChBhE,MAAO,IACFkB,EAAY,KAAM+D,GAAclB,QACnCzC,CAAC,GAAG/I,iBAA6BiH,EAAOuE,SAAW,QACnDzC,CAAC,GAAG/I,eAA2BiH,EAAOuE,SAAW,MACjDzC,CAAC,GAAG/I,gBAA4BiH,EAAON,MACvCoC,CAAC,GAAG/I,iBAA6BiH,EAAO+F,SAG5C,IAAIxF,EAAQ8D,EAAajE,EAAgBoE,EAAWH,GAAcG,EAClE,MAAMwB,EAAU1E,EAAkBtB,GAElC,IAAKgG,EAAS,OAAO5E,EAACC,EAAQ,MAE9Bd,EACE0F,OAAQ1F,EAA8B2F,SAAW,EAC7C,IAAK3F,EAAO4F,MAAO,YACnB,IAAK5F,EAAO4F,MAAO,OAEzB,GAAInG,EAAOoG,WAAa,MAAO,CAC7B,OACEhF,EAAA,KAAA,IACMb,EAAK8F,YAEPrG,EAAON,MACHM,EAAON,QAAU,MACf,YACA,aACF,OAEN4F,IAAMC,IACJ,GAAI,CAAC,MAAO,SAASF,SAASrF,EAAOuE,QACnCnC,EAAamD,EAAIvF,EAAOuE,OAAQI,GAClC,GAAI,CAAC,MAAO,UAAUU,SAASI,EAAalB,QAC1CZ,EAAa4B,EAAIE,EAAalB,OAAQI,KAG1CvD,EAAA,SAAA,CACEZ,MAAO,CACLsB,CAAC,GAAG/I,gBAA4B,KAChC+I,CAAC,GAAG/I,mBAA+B,MAErCuN,QAASX,GAERrE,EAAkBtB,KAChBA,EAAO+F,QAAU3E,EAAA,YAAA,CAAW5G,KAAK,mBACjCwF,EAAON,QACPM,EAAON,QAAU,OAChB0B,EAAA,YAAA,CAAW5G,KAAK,0BAEhB4G,EAAA,YAAA,CAAW5G,KAAK,yBAEpB4G,EAAA,MAAA,CAAKZ,MAAO,GAAGzH,mBACbqI,EAAA,YAAA,CAAW5G,KAAK,0BAO1B,OACE4G,EAAA,KAAA,IACMb,EACJ+E,IAAMC,IACJ,GAAI,CAAC,MAAO,SAASF,SAASrF,EAAOuE,QACnCnC,EAAamD,EAAIvF,EAAOuE,OAAQI,GAClC,GAAI,CAAC,MAAO,UAAUU,SAASI,EAAalB,QAC1CZ,EAAa4B,EAAIE,EAAalB,OAAQI,KAG1CvD,EAAA,MAAA,CAAKZ,MAAO,GAAGzH,mBACZuI,EAAkBtB,KAChBA,EAAO+F,QAAU3E,EAAA,YAAA,CAAW5G,KAAK,yBAYrC,MAAM+L,EAAiD,EAC5D1G,SAAAA,EACAC,SAAAA,EACA0G,cAAAA,MAEA,MAAMR,EAAUQ,GAAiBxF,EAAWnB,EAAUC,GACtD,IAAKkG,EAAS,OAAO5E,EAACC,EAAQ,MAE9B,MAAM1D,EAAQoC,IACd,MAAMC,EAASrC,EAAMG,OAAOI,MAAMzB,QAAQqD,GAC1C,IAAI2G,EAAW,KACf,IAAIlG,EAAQK,EAAoBf,EAAUC,EAAU,CAClDU,MAAO,CACLsB,CAAC,GAAG/I,SAAqB,KACzB+I,CAAC,GAAG/I,gBAA4BiH,EAAON,MACvCoC,CAAC,GAAG/I,YAAwBiH,EAAOuE,OACnCzC,CAAC,GAAG/I,iBAA6BiH,EAAOuE,SAAW,QACnDzC,CAAC,GAAG/I,eAA2BiH,EAAOuE,SAAW,SAIrD,GAAIvE,EAAO0G,UAAW,CACpBnG,EACE0F,OAAQ1F,EAA8BoG,SAAW,EAC7C,IAAKpG,EAAO4F,MAAO,YACnB,IAAK5F,EAAO4F,MAAO,OACzBM,EAAW,KAGb,OACErF,EAACqF,MAEKlG,GAEJa,EAAA,MAAA,CAAKZ,MAAO,GAAGzH,mBAA+BiN,KC9X7C,MAAMY,EAAoB,MAC/B,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,IAAIC,EACJ,MAAMC,EAAQ,GAEd,MAAMC,EAAQ,KACZL,EAAU,KACVG,EAAQ,GAEVE,IAEA,MAAO,KACLJ,EAASK,OAAOC,QAChB,GAAIP,GAAW,KAAMG,EAAQF,EAASD,EACtCA,EAAUC,EACVK,OAAOE,aAAaN,GACpBA,EAAQI,OAAOG,WAAWJ,EAAOD,GACjC,OAAOD,IAnBsB,YAuBjBO,GAAiBC,GAC/B,IAAI/G,EAAQgH,iBAAiBD,GAC7B,MAAME,EAAsBjH,EAAMkH,WAAa,WAC/C,MAAMC,EAAgB,gBAEtB,GAAInH,EAAMkH,WAAa,QAAS,OAAOpE,SAASsE,gBAChD,IAAK,IAAIC,EAASN,EAAUM,EAASA,EAAOC,eAAkB,CAC5DtH,EAAQgH,iBAAiBK,GACzB,GAAIJ,GAAuBjH,EAAMkH,WAAa,SAAU,CACtD,SAEF,GAAIC,EAAcI,KAAKvH,EAAMwH,SAAWxH,EAAMyH,UAAYzH,EAAM0H,WAC9D,OAAOL,EAEX,OAAOvE,SAASsE,yBAGFO,GAAa/F,EAAagG,EAAiB,KACzD,MAAMC,EAAIjG,EAAGU,wBACb,MAAMwF,EACJpB,OAAOqB,aAAejF,SAASsE,gBAAgBY,aAEjD,IACGH,EAAEvE,SACFuE,EAAE1E,MACF0E,EAAEI,OACFJ,EAAEnF,QACFmF,EAAEtE,SACFsE,EAAElF,QACFkF,EAAExF,IACFwF,EAAEzE,EAEH,OAAO,MAET,QACE8E,KAAKC,MAAM,KAAQN,EAAE1E,KAAO,EAAI,EAAI0E,EAAE1E,OAAS0E,EAAEtE,OAAU,KACzDqE,GACFM,KAAKC,MAAM,KAAQN,EAAEvE,OAASwE,GAAgBD,EAAEtE,OAAU,KACxDqE,GC7DN,MAAMQ,GAAW,unMCqDjB,IAAIjO,GAAK,QAiBIkO,GAAK,MAChBhH,YAAAiH,2bA4BQC,KAAAC,mBAAsBC,IAC5BF,KAAKG,SAAWD,GAoKVF,KAAAI,SAAW,OAASxO,KAEpBoO,KAAAzJ,QAA+B,GAC/ByJ,KAAAK,eAAiB,GACjBL,KAAAM,YAAc,GAadN,KAAAO,SACN,IAAIjM,QACE0L,KAAAQ,aAAyD,GAQzDR,KAAAS,WAAa,EAIbT,KAAAU,SAAW,KAcXV,KAAAW,SAAW,MA8BXX,KAAAY,UAAYrM,MAClBmC,EACAM,EACAwH,KAGA,GAAIwB,KAAKM,cAAgB5J,EAAQ,IAAMM,EAAQ,OAE/CgJ,KAAKa,QAAU,KACf,MAAMC,EAAYd,KAAKe,kBAAkBC,KAAK,CAAEhK,OAAQA,EAAQN,MAAAA,IAChE,GAAIoK,EAAUG,iBAAkB,OAEhCjB,KAAKM,YAAc5J,EAAQ,IAAMM,EAGjCgJ,KAAKkB,YAAY1C,GAEjB,GAAIwB,KAAKmB,aAAc,CACrB,UACQnB,KAAKmB,aAAanK,EAAQN,GAChCsJ,KAAKoB,aAAa1K,EAAOM,GACzB,MAAOxE,GACP4D,QAAQiL,KAAK,qBAAsB7O,GAErC,OAGF,UACQiE,EAAUuJ,KAAKvL,KAAMuC,EAAQN,GACnCsJ,KAAKoB,aAAa1K,EAAOM,GACzB,MAAOxE,GACP4D,QAAQiL,KAAK,cAAe7O,GAC5BwN,KAAKM,YAAc,WAEnBN,KAAKa,QAAU,QAoQXb,KAAAsB,aAAe,CAACjI,EAA6BkI,KACnD,IAAKlI,GAAM2G,KAAKO,SAASiB,IAAInI,GAAK,OAElC,MAAMoI,EAAU,IAAI/H,sBAClB,EAAEgI,MACA,GAAI1B,KAAKU,SAAU,OAEnB,GAAIgB,EAAQzH,eAAgB,CAQ1B0H,GAAS,KACP,GAAI3B,KAAK4B,YAAc,KAAOxC,GAAa/F,EAAI,KAAO,CACpD2G,KAAK6B,aAAe,CAClBN,EACAA,EAAa,EACb5B,KAAKmC,IAAI,EAAGP,EAAa,IAE3BvB,KAAK+B,qBAAqBf,KAAK,CAC7BgB,MAAOT,EACPU,YAAajC,KAAKkC,cAAclP,SAElCyH,uBAAsB,IAAMuF,KAAKmC,0BAKzC,CACE9H,UAAW,CAAC,GACZb,KACEwG,KAAKtL,eAAiB6F,SAASC,iBAC3B,KACAwF,KAAKtL,eAIf+M,EAAQ/G,QAAQrB,GAChB2G,KAAKO,SAASrN,IAAImG,EAAIoI,IAahBzB,KAAAoC,mBAAsBzI,IAG5BpJ,OAAOyI,QAAQW,GAAWpH,SAAQ,EAAEkJ,EAAK4G,MACvCrC,KAAKsC,SAASC,UAAUC,OACtB,GAAGzS,cAAyB0L,IAC5B4G,iBAtmB2B,gDAOF,oBAYF,0BAMH,mCAwB0C,mBASlB,CAAE9G,OAAQ,gDAMV,CAAEA,OAAQ,0BAGvC,oBAOF,mGA2HmB,qBACJ,CAAC,EAAG,EAAG,sBAChB,EA9MvByE,KAAKC,mBAAqBwC,EAASzC,KAAKC,mBAAmByC,KAAK1C,MAAO,IAmBzEa,cAEE,OAAOb,KAAKG,SAEdU,YAAYX,GACVF,KAAKC,mBAAmBC,GAgB1BpH,mBACE,IAAKkH,KAAKnL,KAAM,OAEhBmL,KAAKa,QAAU,KACfjO,QAAQd,QAAQkO,KAAKnL,MAAMtB,MAAKgB,MAAOM,UAC/BY,EAAauK,KAAKvL,KAAMI,GAE9B,IAAKmL,KAAK2C,QAAS,OACX3C,KAAK4C,aACX5C,KAAK6C,2BAEP7C,KAAKa,QAAU,SAQnB/H,mBACE9C,EAAegK,KAAKvL,KAAMuL,KAAKvM,SAC/B,GAAIuM,KAAK2C,QAAS3C,KAAK4C,aAuBzBE,mBAEE,OAAO9C,KAAK+C,OAAO/P,OAsBrB8F,yBACEkH,KAAKgD,cA4CPlK,qBACE,MAAMP,EAAMyH,KAAKvM,QAAQQ,MAAMH,KAAQA,EAAE4C,QACzC,IAAK6B,EAAK,OACV,OAAOyH,KAAKY,UAAU,KAAMrI,EAAIpE,MAMlC2E,cAAc9B,EAAyBN,GACrC,MAAM6B,EAAMyH,KAAKvM,QAAQQ,MAAMH,GAAMA,EAAEK,OAAS6C,IAChD,IAAKuB,EAAK,KAAM,2BAA6BvB,EAC7C,OAAOgJ,KAAKY,UAAUlK,EAAO6B,EAAIpE,MAMnC2E,qBACEkH,KAAKzJ,QAAU,GACf,OAAOyJ,KAAKiD,cASdnK,iBAAiBvC,EAA8B2M,EAAoB,MACjE,IAAKA,EAAUlD,KAAKzJ,QAAU,GAC9B,OAAOyJ,KAAKiD,YAAY1M,EAAS2M,GA6BnCC,eAAuB9J,GACrB,IAAKA,EAAI,OACT2G,KAAKoD,cAAgB/J,EAAGU,wBAAwBiB,OAChDgF,KAAKS,WACHpH,EAAGgK,cAAc,OAAOtJ,wBAAwBiB,QAAUgF,KAAKS,WAYnEkC,cACE,OAAO3C,KAAKW,SAEdgC,YAAoBW,GAClB,GAAIA,IAAUtD,KAAKW,SAAU,OAC7BX,KAAKW,SAAW2C,EAChB,GAAItD,KAAK2C,QAASlI,uBAAsB,IAAMuF,KAAKuD,gBAOrDzK,iBAEE,MAAM0K,EAAQ5F,IACdoC,KAAK4B,YAAc4B,EAAQ,EAAIA,GAAS,EAAIA,EAKtC1K,cACN,MAAM2K,EAAOtF,OAAOuF,SAASD,KAC7B,GAAIA,EAAKzQ,OAAS,EAAG,CACnB,MAAM2Q,EAAQpJ,SAAS8I,cAAcI,GACrC,GAAIE,EAAO,CACTA,EAAMC,kBAGV5D,KAAK6D,aAAa7C,OAoDZlI,aAAapC,EAAyBM,GAC5CgJ,KAAKvM,QAAUuM,KAAKvM,QAAQiC,KAAK5B,IAC/B,GAAIA,EAAEK,OAAS6C,EAAQ,MAAO,IAAKlD,EAAG4C,MAAAA,GACtC,MAAO,IAAK5C,EAAG4C,MAAO,SAExBsJ,KAAK8D,iBAAiB9C,KAAK,CAAEhK,OAAQA,EAAQN,MAAAA,IAIvCoC,oBACNkH,KAAKa,QAAU,KACf,MAAMC,EAAYd,KAAK+D,oBAAoB/C,KAAK,CAAE9K,KAAM8J,KAAKgE,aAC7D,GAAIlD,EAAUG,iBAAkB,OAIhCjB,KAAKkB,cAEL,UACQjL,EAAY+J,KAAKvL,KAAMuL,KAAKgE,YAClChE,KAAKiE,mBAAmBjD,KAAK,CAAE9K,KAAM8J,KAAKgE,aAE1C,MAAOxR,GACP4D,QAAQiL,KAAK,gBAAiB7O,WAE9BwN,KAAKa,QAAU,OAIX/H,kBACNvC,EACA2M,EAAoB,MAEpB,GAAI3M,EAAS,CACX,GAAI2M,EAAU,CACZlD,KAAKzJ,QAAU,IACVyJ,KAAKzJ,QAAQwG,QACbmH,IAAO3N,EAAQtC,MAAMkQ,GAAOA,EAAGhQ,OAAS+P,EAAE/P,YAE1CoC,OAEA,CACLyJ,KAAKzJ,QAAUA,GAInB,GAAIyJ,KAAKK,iBAAmB1M,KAAKE,UAAUmM,KAAKzJ,SAAU,OAE1DyJ,KAAKa,QAAU,KACf,MAAMC,EAAYd,KAAKoE,oBAAoBpD,KAAK,CAAEzK,QAASyJ,KAAKzJ,UAChE,GAAIuK,EAAUG,iBAAkB,OAEhCjB,KAAKK,eAAiB1M,KAAKE,UAAUmM,KAAKzJ,SAG1CyJ,KAAKkB,cAEL,GAAIlB,KAAKqE,eAAgB,CACvB,UACQrE,KAAKqE,eAAerE,KAAKzJ,SAC/ByJ,KAAKsE,iBACL,MAAO9R,GACP4D,QAAQiL,KAAK,uBAAwB7O,GACrCwN,KAAKK,eAAiB,GAExB,OAGF,UACQ/J,EAAY0J,KAAKvL,KAAMuL,KAAKzJ,SAClCyJ,KAAKsE,iBAEL,MAAO9R,GACP4D,QAAQiL,KAAK,gBAAiB7O,WAE9BwN,KAAKa,QAAU,OAIX/H,iBACNkH,KAAKvM,QAAUuM,KAAKvM,QAAQiC,KAAK5B,IAC/B,MAAMyQ,EAAUvE,KAAKzJ,QAAQtC,MAAMiQ,GAAMA,EAAE/P,OAASL,EAAEK,OACtD,GAAIoQ,EAASzQ,EAAEiJ,OAASwH,EAAQxH,OAChC,OAAOjJ,KAETkM,KAAKwE,mBAAmBxD,KAAK,CAAEzK,QAASyJ,KAAKzJ,UAKvCuC,YAAY0F,GAClB,MAAMiG,EAAkBzE,KAAKtL,aAAa+C,OAAOiN,eACjD,MAAMC,EAAU3E,KAAKtL,aAAasF,WAClCgG,KAAKtL,aAAa+C,MAAMiN,eAAiB,OAEzC,GAAI1E,KAAK4E,eAAiBxF,GAAaY,KAAK4E,aAAc,IACxD5E,KAAK4E,aAAahB,iBACpB,GAAIpF,EAASA,EAAQoF,eAAe,CAAE5B,MAAO,UAE7C,GAAI2C,EAAS3E,KAAKtL,aAAasF,WAAa2K,EAE5C,GAAIF,EACFzE,KAAKtL,aAAa+C,MAAMiN,eAAiBD,EAGrC3L,oBACN6I,GAAS,KACP3B,KAAKmD,WAAanD,KAAKkC,cAAcjO,MAClC4Q,IAAOA,GAAGtC,WAAWuC,SAAS,GAAG/U,oBAUhC+I,2BACN,IAAKkH,KAAKkC,cAAclP,OAAQ,OAGhC,MAAM+R,EAAgC,IAAInS,SAASd,IACjD6P,GAAS,KACP3B,KAAKgF,oBAGL,IAAKhF,KAAKmD,aAAenD,KAAKS,WAAY3O,IAE1CkO,KAAKkC,cAAc3P,SAAQ,CAAC8G,EAAIvG,KAC9B,IAAKuG,IAAOA,EAAGkJ,WAAWuC,SAAS,GAAG/U,eAA2B,CAC/D,GAAI+C,IAAMkN,KAAKkC,cAAclP,OAAS,EAAGlB,IACzC,OAEF,GAAIgB,IAAMkN,KAAKkC,cAAclP,OAAS,EAAGlB,aAM/CiT,EAAexR,MAAK,KAIlBkH,uBAAsB,KACpBuF,KAAK2C,QAAU,WAMb7J,mBACNkH,KAAKzJ,QAAUyJ,KAAKvM,QACjBsJ,QAAQjJ,KAAQA,EAAEiJ,SAClBrH,KAAK5B,IACJ,MAAMiJ,OAAEA,EAAM5I,KAAEA,GAASL,EACzB,MAAO,CAAEiJ,OAAAA,EAAQ5I,KAAAA,MAGrB,GAAI6L,KAAKgE,WAAY,OACbhE,KAAKgD,cAGb,GAAIhD,KAAKzJ,QAAQvD,OAAQ,OACjBgN,KAAKiD,cAGb,MAAM1K,EAAMyH,KAAKvM,QAAQQ,MAAMH,KAAQA,EAAE4C,QACzC,KAAM6B,EAAK,OACHyH,KAAKY,UAAUrI,EAAI7B,MAAO6B,EAAIpE,OAOhC2E,YAENkH,KAAK6B,aAAe,CAAC,EAAG,EAAG,GAC3B7B,KAAKU,SAAW,KAChB,IAAI5N,EAAI,EACR,MAAMoN,EAAIF,KAAKrL,MAAMjD,KAAKwD,MAAML,KAAK7B,OACrC,IAAI6B,EAA6B,GACjC,MAAMkO,EAA6B,GACnC/C,KAAKQ,aAAe,GAGpB,IAAK1N,EAAGA,GAAKoN,EAAGpN,IAAK,CACnB+B,EAAKzB,KAAK4M,KAAKrL,MAAMjD,KAAKwD,MAAML,KAAK/B,EAAI,IAEzC,GAAIA,EAAIkN,KAAKiF,WAAa,EAAG,CAC3BlC,EAAO3P,KAAK,CAAEyB,KAAAA,EAAMgB,OAAQC,EAAOjB,EAAKa,KAAKmP,GAAMA,EAAEhP,SAAQE,UAC7DlB,EAAO,IAGX,GAAIA,EAAK7B,OACP+P,EAAO3P,KAAK,CAAEyB,KAAAA,EAAMgB,OAAQC,EAAOjB,EAAKa,KAAKmP,GAAMA,EAAEhP,SAAQE,UAC/DiK,KAAK+C,OAASA,EAYRjK,eAAeyI,GACrB,GAAIvB,KAAK6B,aAAaxF,SAASkF,GAAa,OAAO2D,UAEnD,GAAIlF,KAAKQ,aAAaxN,OAAQ,CAC5B,MAAMmS,EAAoBnF,KAAKQ,aAAavM,MACzCmR,GAAOA,EAAG7D,aAAeA,IAE5B,GAAI4D,EAAmB,OAAOA,EAAkBnK,OAAS,KAE3D,MAAMqK,EAAcrF,KAAK+C,OAAOxB,GAAY1M,KAAK7B,OACjD,GAAIqS,IAAgBrF,KAAKiF,UAAYjF,KAAKoD,cAAe,CACvD,OAAOpD,KAAKoD,cAAgB,KAE9B,OAAOpD,KAAKS,WAAaT,KAAKS,WAAa4E,EAAc,KAAOH,UAI1DpM,iBACN6I,GAAS,KACP3B,KAAK6B,aAAatP,SAASgP,IACzB,MAAMlI,EAAK2G,KAAKkC,cAAcX,GAC9B,IAAKlI,EAAI,OAET,MAAM2B,EAAS3B,EAAGU,wBAAwBiB,OAG1C,MAAMsK,EAAOtF,KAAKQ,aAAa+E,WAC5BH,GAAOA,EAAG7D,aAAeA,IAE5B,GAAI+D,EAAO,EAAG,CACZtF,KAAKQ,aAAa8E,GAAQ,CAAEtK,OAAAA,EAAQuG,WAAAA,QAC/BvB,KAAKQ,aAAapN,KAAK,CAAE4H,OAAAA,EAAQuG,WAAAA,UAwDtCzI,eAEN,IAAKkH,KAAKwF,UAAYxF,KAAKvL,KAAK4O,cAAc,oBAAqB,CACjEjN,QAAQqP,MACN,4EAkBN3M,0BAEEkH,KAAKrL,YAAcH,EACjBwL,KAAKvL,KACLuL,KAAKvM,QACLuM,KAAKtL,oBAEDsL,KAAK0F,mBACX1F,KAAK2F,eACL3F,KAAK4F,YACL5F,KAAKrL,MAAMjD,KAAKmU,SAAS,QAAQ,IAAM7F,KAAK4F,cAG9C9M,oBACE6I,GAAS,IAAO3B,KAAKtL,aAAe6J,GAAiByB,KAAKvL,QAG5DqE,mBACEkH,KAAK6C,2BAGP/J,sBAAsBgN,EAASC,EAASC,GAItC,GAAI,CAAC,OAAQ,WAAW3J,SAAS2J,GAAY,OAAO,MAGtDlN,uBAIAA,qBACE2B,uBAAsB,IAAOuF,KAAKU,SAAW,QAC7CV,KAAKgF,oBAIPlM,SACEkH,KAAKkC,cAAgB,GAErB,OACE9J,EAAC6N,EAAI,KACH7N,EAAA,MAAA,CACEZ,MAAO,GAAGzH,gBACVuM,IAAM4J,GAAOlG,KAAK4E,aAAesB,GAAE,KAIrC9N,EAAA,MAAA,CAAA+N,kBACmB,iBAAmBnG,KAAKI,SACzCgG,SAAUpG,KAAKrH,OAAS,OAAS,IAAMuM,WAEvC9M,EAAA,oBAAA,CACEiO,cAAa,KACb7O,MAAO,CACLsB,CAAC,GAAG/I,mBAA+B,KACnC+I,CAAC,GAAG/I,yBAAqCiQ,KAAKa,WAIlDzI,EAAA,QAAA,CACEkO,KAAMtG,KAAKrH,OAAS,OAAS,OAASuM,UAASqB,gBAChCvG,KAAKrH,OAAS,QAAU,OAASuM,UAASsB,gBAC1CxG,KAAKrL,MAAMjD,KAAKwD,MAAML,KAAK7B,OAAMyT,gBACjCzG,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQT,OAC/CwE,MAAO,GAAGzH,IACVuM,IAAMoK,GAAS1G,KAAKsC,SAAWoE,GAE/BtO,EAAA,UAAA,CACEZ,MAAO,CACLsB,CAAC,GAAG/I,cAA0B,KAC9B+I,CAAC,GAAG/I,qBAAiCiQ,KAAK2G,aAE5C/U,GAAI,iBAAmBoO,KAAKI,UAE5BhI,EAAA,OAAA,CAAM5G,KAAK,WAAWwO,KAAKwF,UAI7BpN,EAAA,QAAA,KACEA,EAACsD,EAAgB,CACfP,YAAa6E,KAAK4G,WAClBjL,eAAgBqE,KAAKoC,oBAEpBpC,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQiC,KAAKmR,GAAa,CACjDzO,EAACoE,EAAY,CACXxF,OAAQ6P,EACRpK,aAAcuD,KAAK4G,WACnBlK,mBAAoBsD,KAAKY,UACzBjF,eAAgBqE,KAAKoC,0BAM5BpC,KAAKa,UACHb,KAAK+C,OAAO/P,QACb,IAAIvC,MAAM,IAAIqW,QAAQpR,KAAKmB,GACzBuB,EAAA,KAAA,KACG4H,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQiC,KAC/B,CAACqR,EAAWjQ,IACVsB,EAACmF,EAAS,CACR1G,SAAUA,EACVC,SAAUA,EACV0G,cAAepF,EAAA,gBAAA,aAQ1B4H,KAAK+C,OAAOrN,KAAI,CAACsM,EAAOT,IACvBnJ,EAAA,QAAA,CACEqD,IAAKuG,EAAMnM,OACXjE,GAAI,SAASoO,KAAKI,YAAYmB,IAC9BjF,IAAM0K,IACJhH,KAAKkC,cAAc9O,KAAK4T,GACxBhH,KAAKsB,aAAa0F,EAAIzF,IAExB/J,MAAO,CACLsB,CAAC,GAAG/I,gBACDiQ,KAAK6B,aAAaxF,SAASkF,GAC9BzI,CAAC,GAAG/I,aACFiQ,KAAK6B,aAAaxF,SAASkF,KAG9BvB,KAAK6B,aAAaxF,SAASkF,GAC1BS,EAAMnN,KAAKa,KAAI,CAACC,EAAK7C,KACnB,MAAM+D,EACJ0K,EAAa,EAAIA,EAAavB,KAAKiF,SAAWnS,EAAIA,EACpD,OACEsF,EAAC8C,EAAQ,CAACC,YAAa6E,KAAKiH,UAAWtR,IAAKA,GACzCqK,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQiC,KAC/B,CAACqR,EAAWjQ,IACVsB,EAACmF,EAAS,CACR1G,SAAUA,EACVC,SAAUA,UAQtBsB,EAAA,KAAA,CACE8O,QAASlH,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQT,OACzCyE,MAAO,CACLuD,OAAQgF,KAAKmH,eAAe5F,SAQrCvB,KAAKoH,YACJhP,EAAA,QAAA,KACEA,EAACsD,EAAgB,CACfP,YAAa6E,KAAKqH,WAClB1L,eAAgBqE,KAAKoC,oBAEpBpC,KAAKrL,MAAMG,OAAOI,MAAMzB,QAAQiC,KAAKmR,GAAa,CACjDzO,EAACoE,EAAY,CACXxF,OAAQ6P,EACRpK,aAAcuD,KAAKqH,WACnB1L,eAAgBqE,KAAKoC,6BAQ9BpC,KAAK+C,OAAO/P,QACboF,EAAA,eAAA,CACEO,KAAK,SACLnB,MAAO,CACLsB,CAAC,GAAG/I,cAA0B,KAC9B+I,CAAC,GAAG/I,oBAAgCiQ,KAAKa","sourcesContent":["export const CSSNAMESPACE = 'nano-tbl';\n","\nimport { consoleError } from '@stencil/core/internal';\n\n\nconst isInstanceOf = (value, className) => {\n const C = globalThis[className];\n return C != null && value instanceof C;\n}\nconst getTransferables = (value) => {\n if (value != null) {\n if (\n isInstanceOf(value, \"ArrayBuffer\") ||\n isInstanceOf(value, \"MessagePort\") ||\n isInstanceOf(value, \"ImageBitmap\") ||\n isInstanceOf(value, \"OffscreenCanvas\")\n ) {\n return [value];\n }\n if (typeof value === \"object\") {\n if (value.constructor === Object) {\n value = Object.values(value);\n }\n if (Array.isArray(value)) {\n return value.flatMap(getTransferables);\n }\n return getTransferables(value.buffer);\n }\n }\n return [];\n};\n\nlet pendingIds = 0;\nlet callbackIds = 0;\nconst pending = new Map();\nconst callbacks = new Map();\n\nexport const createWorker = (workerPath, workerName, workerMsgId) => {\n const worker = new Worker(workerPath, {name:workerName});\n\n worker.addEventListener('message', ({data}) => {\n if (data) {\n const workerMsg = data[0];\n const id = data[1];\n const value = data[2];\n\n if (workerMsg === workerMsgId) {\n const err = data[3];\n const [resolve, reject, callbackIds] = pending.get(id);\n pending.delete(id);\n\n if (err) {\n const errObj = (err.isError)\n ? Object.assign(new Error(err.value.message), err.value)\n : err.value;\n\n consoleError(errObj);\n reject(errObj);\n } else {\n if (callbackIds) {\n callbackIds.forEach(id => callbacks.delete(id));\n }\n resolve(value);\n }\n } else if (workerMsg === workerMsgId + '.cb') {\n try {\n callbacks.get(id)(...value);\n } catch (e) {\n consoleError(e);\n }\n }\n }\n });\n\n return worker;\n};\n\nexport const createWorkerProxy = (worker, workerMsgId, exportedMethod) => (\n (...args) => new Promise((resolve, reject) => {\n let pendingId = pendingIds++;\n let i = 0;\n let argLen = args.length;\n let mainData = [resolve, reject];\n pending.set(pendingId, mainData);\n\n for (; i < argLen; i++) {\n if (typeof args[i] === 'function') {\n const callbackId = callbackIds++;\n callbacks.set(callbackId, args[i]);\n args[i] = [workerMsgId + '.cb', callbackId];\n (mainData[2] = mainData[2] || []).push(callbackId);\n }\n }\n const postMessage = (w) => (\n w.postMessage(\n [workerMsgId, pendingId, exportedMethod, args],\n getTransferables(args)\n )\n );\n if (worker.then) {\n worker.then(postMessage);\n } else {\n postMessage(worker);\n }\n })\n);\n","import { createStore, ObservableMap } from '@stencil/store';\nimport { cyrb53 } from '../../utils/math';\nimport {\n createWorkerStore,\n syncConfigToWorker,\n syncDataToWorker,\n workerFilter,\n workerSearch,\n workerSort,\n} from './table.worker';\nimport type { TableTypes } from '../../interface';\n\nexport interface TableStores {\n data: ObservableMap<{ rows: TableTypes.NanoTable['rows'] }>;\n config: ObservableMap<{ columns: TableTypes.NanoTable['columns'] }>;\n general: ObservableMap<{\n workerId: string;\n scrollParent: HTMLElement;\n host: HTMLNanoTableElement;\n }>;\n}\n\nfunction colsToWorker(columns: TableTypes.NanoTable['columns']) {\n const safeColumns: Partial<TableTypes.ColumnConfig>[] = JSON.parse(\n JSON.stringify(columns)\n );\n columns.forEach((c) => {\n if (!!c.sortCompareFn) {\n const safeCol = safeColumns.find((sc) => sc.prop === c.prop);\n safeCol.sortCompareFn = c.sortCompareFn.toString();\n }\n });\n return safeColumns;\n}\n\nconst stores: WeakMap<HTMLElement, TableStores> = new WeakMap();\n\nexport async function generateStore(\n host: HTMLNanoTableElement,\n columns: TableTypes.NanoTable['columns'],\n scrollParent: HTMLElement\n) {\n const store: TableStores = {\n data: createStore({ rows: [] }),\n config: createStore({ columns }),\n general: createStore({ workerId: null, scrollParent, host }),\n };\n\n const id = await createWorkerStore(\n store.data.state.rows,\n colsToWorker(store.config.state.columns)\n );\n store.general.state.workerId = id;\n stores.set(host, store);\n\n // sync data from our store to our worker\n\n store.data.use({\n reset: () => {\n if (store.general.state.workerId)\n syncDataToWorker(store.general.state.workerId, null);\n },\n dispose: () => {\n if (store.general.state.workerId)\n syncDataToWorker(store.general.state.workerId, null);\n },\n });\n store.config.use({\n reset: () => {\n if (store.general.state.workerId)\n syncConfigToWorker(store.general.state.workerId, null);\n },\n dispose: () => {\n if (store.general.state.workerId)\n syncConfigToWorker(store.general.state.workerId, null);\n },\n });\n return store;\n}\n\nexport function getStore(host: HTMLElement) {\n return stores.get(host);\n}\n\nexport function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]) {\n const store = stores.get(host);\n if (!store) return;\n\n // augment data with some internal props\n rows = rows.map((row, i) => ({\n ...row,\n __index: i,\n __uuid: cyrb53(Object.values(row).join()),\n }));\n\n store.data.state.rows = rows;\n\n if (store.general.state.workerId)\n return syncDataToWorker(store.general.state.workerId, rows);\n}\n\nexport function storeSetConfig(\n host: HTMLElement,\n columns: TableTypes.ColumnConfig[]\n) {\n const store = stores.get(host);\n if (!store) return;\n\n if (store.general.state.workerId)\n syncConfigToWorker(store.general.state.workerId, colsToWorker(columns));\n store.config.state.columns = columns;\n}\n\nexport async function storeSearch(host: HTMLElement, term: string) {\n const store = stores.get(host);\n if (!store || !store.general.state.workerId) return;\n\n try {\n store.data.state.rows = await workerSearch(\n store.general.state.workerId,\n term\n );\n } catch (e) {\n console.log(e);\n }\n}\n\nexport async function storeFilter(\n host: HTMLElement,\n filters: TableTypes.Filter[]\n) {\n const store = stores.get(host);\n if (!store || !store.general.state.workerId) return;\n\n try {\n store.data.state.rows = await workerFilter(\n store.general.state.workerId,\n filters\n );\n } catch (e) {\n console.log(e);\n }\n}\n\nexport async function storeSort(\n host: HTMLElement,\n prop: TableTypes.Prop,\n order: TableTypes.Order\n) {\n const store = stores.get(host);\n if (!store || !store.general.state.workerId) return;\n\n try {\n store.data.state.rows = await workerSort(\n store.general.state.workerId,\n prop,\n order\n );\n } catch (e) {\n console.log(e);\n }\n}\n","import { getRenderingRef, getElement, VNode, h, Fragment } from '@stencil/core';\nimport { getStore } from './table.store';\nimport type { TableTypes } from '../../interface';\n\n/**\n * Get a model object for custom cell / property renderers.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns a model object which will be passed to custom renderers\n */\nfunction colDataModel(\n rowIndex: number,\n colIndex: number\n): TableTypes.ColumnDataSchemaModel {\n const store = fetchStores();\n const columns = store.config.state.columns;\n const rows = store.data.state.rows;\n\n const column = columns[colIndex];\n const prop: TableTypes.ColumnProp | undefined = column?.prop;\n const rowModel = rows[rowIndex];\n const cellModel = rowModel[columns[colIndex].prop];\n\n return {\n prop,\n cellModel,\n column,\n rowIndex,\n rowModel,\n };\n}\n\n/**\n * Get a model object for custom row renderers.\n * @param rowIndex\n * @returns a model object passed to custom row renderers\n */\nexport function rowDataModel(rowIndex: number): TableTypes.RowDataSchemaModel {\n const store = fetchStores();\n const rows = store.data.state.rows;\n const row = rows[rowIndex];\n\n return {\n row,\n rowIndex,\n };\n}\n\n/**\n * Merges 2 objects of properties together\n * @param current - property object\n * @param extra - additional object property\n * @returns - merged properties that can be applied to a node\n */\nexport function mergeProperties(\n current: TableTypes.EleProps,\n extra: TableTypes.EleProps\n) {\n if (!extra) return current;\n\n // top level merge\n const props: TableTypes.EleProps = { ...extra, ...current };\n\n // deeper merge\n // merge classes maps or strings\n if (extra.class) {\n if (typeof extra.class === 'object' && typeof props.class === 'object') {\n props.class = { ...extra.class, ...props.class };\n } else if (\n typeof extra.class === 'string' &&\n typeof props.class === 'object'\n ) {\n props.class[extra.class] = true;\n } else if (typeof props.class === 'string') {\n props.class += ' ' + extra.class;\n }\n }\n // merge style\n if (extra.style) {\n props.style = { ...extra.style, ...props.style };\n }\n return props;\n}\n\n/**\n * Returns the current nano-table's stores.\n * @returns the current nano-table stores\n */\nexport function fetchStores() {\n return getStore(getElement(getRenderingRef()));\n}\n\n/**\n * Merges any defined cell properties with properties\n * required by `nano-table` functionality\n * @param rowIndex - the current row index being rendered\n * @param colIndex = the current column index being rendered\n * @param defaultProps - default properties required by `nano-table`\n * @returns - the merged properties that will be applied to a node\n */\nexport function mergeCellProperties(\n rowIndex: number,\n colIndex: number,\n defaultProps: TableTypes.EleProps\n): TableTypes.EleProps {\n const props: TableTypes.EleProps = { ...defaultProps };\n const extraPropsFunc =\n fetchStores().config.state.columns[colIndex]?.cellProperties;\n if (!extraPropsFunc) return props;\n\n const data = colDataModel(rowIndex, colIndex);\n const extra = extraPropsFunc(data);\n if (!extra) return props;\n\n return mergeProperties(props, extra);\n}\n\n/**\n * Renders a cell using a custom renderer if set.\n * @param rowIndex - the current row index being rendered\n * @param colIndex - the current column index being rendered\n * @returns - a JSX node\n */\nexport function cellRender(rowIndex: number, colIndex: number): VNode {\n const store = fetchStores();\n const columns = store.config.state.columns;\n const tpl = columns[colIndex]?.cellTemplate;\n const model = colDataModel(rowIndex, colIndex);\n\n return tpl ? (\n tpl(h as unknown as TableTypes.HFunc<VNode>, model)\n ) : (\n <Fragment>{model.cellModel}</Fragment>\n );\n}\n\n/**\n * Renders a table header (within a thead) using a custom template if set.\n * @param col - the current column config object\n * @returns - a JSX node\n */\nexport function colheadFootRender(col: TableTypes.ColumnConfig): VNode {\n const tpl = col?.colTemplate;\n return tpl ? (\n tpl(h as unknown as TableTypes.HFunc<VNode>, col)\n ) : (\n <Fragment>{col.title}</Fragment>\n );\n}\n","import { Fragment, FunctionalComponent, h, VNode } from '@stencil/core';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n cellRender,\n colheadFootRender,\n fetchStores,\n mergeCellProperties,\n mergeProperties,\n rowDataModel,\n} from './table.service';\nimport type { TableTypes } from '../../interface';\n\ntype ValidRenderTypes = 'tr' | 'th' | 'td';\n\ntype PinnedCb = (positions: { [key in TableTypes.Position]?: boolean }) => void;\n\nfunction baseClasses(\n type: ValidRenderTypes,\n vPinned?: TableTypes.Position,\n toString?: false\n): { [key: string]: boolean };\nfunction baseClasses(\n type: ValidRenderTypes,\n vPinned?: TableTypes.Position,\n toString?: true\n): string;\nfunction baseClasses(\n type: ValidRenderTypes,\n vPinned?: TableTypes.Position,\n toString = false\n): { [key: string]: boolean } | string {\n const classes = {\n [`${CSSNAMESPACE}__${type}`]: true,\n [`${CSSNAMESPACE}__pin`]: !!vPinned,\n [`${CSSNAMESPACE}__pin--top`]: vPinned === 'top',\n [`${CSSNAMESPACE}__pin--bottom`]: vPinned === 'bottom',\n };\n\n if (toString) {\n let classString = '';\n Object.entries(classes).forEach(([className, on]) => {\n if (on) classString += className + ' ';\n });\n return classString;\n }\n return classes;\n}\n\nconst stickyHIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n new WeakMap();\nconst stickyVIOs: WeakMap<HTMLTableCellElement, IntersectionObserver> =\n new WeakMap();\n\nfunction addHObserver(\n el: HTMLTableCellElement,\n pos: TableTypes.Position,\n cb: PinnedCb\n) {\n if (stickyHIOs.get(el)) return;\n\n const store = fetchStores();\n const root = store.general.state.scrollParent;\n const host = store.general.state.host;\n\n const observer = new IntersectionObserver(\n ([e]) => {\n const positions: { [key in TableTypes.Position]?: boolean } = {};\n if (pos === 'start') {\n positions.start =\n e.boundingClientRect.x -\n (host.getBoundingClientRect().x + root.scrollLeft) <\n 0 && !e.isIntersecting;\n }\n if (pos === 'end') {\n // TODO - sort these out for RtL\n positions.end =\n e.boundingClientRect.right > e.boundingClientRect.width &&\n !e.isIntersecting;\n }\n cb(positions);\n },\n {\n threshold: [1],\n rootMargin: '1px 0px 1px 0px',\n root: root === document.scrollingElement ? null : root,\n }\n );\n stickyHIOs.set(el, observer);\n requestAnimationFrame(() => observer.observe(el));\n}\n\nfunction addVObserver(\n el: HTMLTableCellElement,\n pos: TableTypes.Position,\n cb: PinnedCb\n) {\n if (stickyVIOs.get(el)) return;\n\n const store = fetchStores();\n const root = store.general.state.scrollParent;\n const host = store.general.state.host;\n\n const observer = new IntersectionObserver(\n ([e]) => {\n const positions: { [key in TableTypes.Position]?: boolean } = {};\n if (pos === 'top') {\n positions.top =\n e.boundingClientRect.y -\n (host.getBoundingClientRect().y + root.scrollTop) <\n 0 && !e.isIntersecting;\n }\n if (pos === 'bottom')\n positions.bottom =\n e.boundingClientRect.height > e.intersectionRect.height &&\n !e.isIntersecting;\n cb(positions);\n },\n {\n threshold: [0.99],\n rootMargin: '0px 100px 0px 100px',\n root: root === document.scrollingElement ? null : root,\n }\n );\n stickyVIOs.set(el, observer);\n requestAnimationFrame(() => observer.observe(el));\n}\n\ntype TableRowProps = {\n rowRenderer: TableTypes.RowRenderer;\n rowIndex?: number;\n row?: TableTypes.RowData;\n};\n\nexport const TableRow: FunctionalComponent<TableRowProps> = (\n { rowRenderer, rowIndex, row },\n children\n) => {\n let extraProps = {};\n\n if (!row) {\n const model = rowDataModel(rowIndex);\n row = model.row;\n }\n\n if (rowRenderer?.rowProperties) {\n extraProps =\n rowRenderer.rowProperties({ row: row, rowIndex }) || extraProps;\n }\n\n let pinned: TableTypes.Position;\n if (rowRenderer?.pinned && typeof rowRenderer.pinned === 'function') {\n pinned = rowRenderer.pinned();\n }\n\n const baseProps = { class: baseClasses('tr', pinned) };\n const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n\n return (\n <tr {...props} key={row.__uuid}>\n {children}\n </tr>\n );\n};\n\ntype TableHeadFootProps = {\n rowRenderer: TableTypes.HeadFootRenderer;\n onColumnPinned?: PinnedCb;\n};\n\nexport const TableHeadFootRow: FunctionalComponent<TableHeadFootProps> = (\n { rowRenderer, onColumnPinned },\n children,\n utils\n) => {\n let extraProps = {};\n if (rowRenderer.rowProperties) {\n extraProps = rowRenderer.rowProperties() || {};\n }\n\n const pinned = rowRenderer.pinned || null;\n const baseProps = { class: baseClasses('tr', null) };\n const props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n const tpl = rowRenderer?.template;\n\n if (tpl) {\n let toRender = tpl(h as TableTypes.HFunc<VNode>, {\n renderedRow: <tr {...props}>{children}</tr>,\n });\n\n if (Array.isArray(toRender)) {\n toRender = utils.map(toRender, (node) => {\n if (node.vtag === 'tr') {\n node.vattrs = mergeProperties(\n { class: baseClasses('tr', null, true) },\n node.vattrs\n );\n\n if (!!node.vchildren) {\n node.vchildren = utils.map(node.vchildren, (cNode) => {\n if (['td', 'th'].includes(cNode.vtag.toString())) {\n cNode.vattrs = mergeProperties(\n {\n class: baseClasses(\n cNode.vtag.toString() as ValidRenderTypes,\n pinned,\n true\n ),\n ref: (th) => {\n addVObserver(th, pinned, onColumnPinned);\n },\n },\n cNode.vattrs\n );\n }\n return cNode;\n });\n }\n }\n return node;\n });\n }\n return toRender;\n }\n\n return <tr {...props}>{children}</tr>;\n};\n\ntype TableColHeadProps = {\n column: TableTypes.ColumnConfig;\n headRenderer: TableTypes.HeadFootRenderer;\n onColumnOrderClick?: (\n order: TableTypes.Order,\n column: TableTypes.Prop,\n el: HTMLElement\n ) => void;\n onColumnPinned?: PinnedCb;\n};\n\nexport const TableColHead: FunctionalComponent<TableColHeadProps> = ({\n column,\n headRenderer,\n onColumnOrderClick,\n onColumnPinned,\n}) => {\n function handleColumnOrderClick(e: MouseEvent & { target: HTMLElement }) {\n let order;\n switch (column.order) {\n case 'asc':\n order = 'desc';\n break;\n case 'desc':\n order = null;\n break;\n default:\n order = 'asc';\n }\n onColumnOrderClick(order, column.prop, e.target.closest('th'));\n }\n\n let extraProps = {};\n if (column.columnProperties) {\n extraProps = column.columnProperties(column) || extraProps;\n }\n\n const baseProps = {\n class: {\n ...baseClasses('th', headRenderer?.pinned),\n [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n [`${CSSNAMESPACE}__ordered`]: !!column.order,\n [`${CSSNAMESPACE}__filtered`]: !!column.filter,\n },\n };\n let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;\n const content = colheadFootRender(column);\n\n if (!content) return <Fragment></Fragment>;\n\n props =\n Number((props as TableTypes.EleProps).colspan) > 1\n ? { ...props, scope: 'colgroup' }\n : { ...props, scope: 'col' };\n\n if (column.sortable !== false) {\n return (\n <th\n {...props}\n aria-sort={\n column.order\n ? column.order === 'asc'\n ? 'ascending'\n : 'descending'\n : 'none'\n }\n ref={(th) => {\n if (['end', 'start'].includes(column.pinned))\n addHObserver(th, column.pinned, onColumnPinned);\n if (['top', 'bottom'].includes(headRenderer.pinned))\n addVObserver(th, headRenderer.pinned, onColumnPinned);\n }}\n >\n <button\n class={{\n [`${CSSNAMESPACE}__order-btn`]: true,\n [`${CSSNAMESPACE}__cell-content`]: true,\n }}\n onClick={handleColumnOrderClick}\n >\n {colheadFootRender(column)}\n {!!column.filter && <nano-icon name=\"light/filter\" />}\n {!!column.order &&\n (column.order === 'desc' ? (\n <nano-icon name=\"solid/long-arrow-down\" />\n ) : (\n <nano-icon name=\"solid/long-arrow-up\" />\n ))}\n <div class={`${CSSNAMESPACE}__status-icons`}>\n <nano-icon name=\"light/chevron-down\" />\n </div>\n </button>\n </th>\n );\n }\n\n return (\n <th\n {...props}\n ref={(th) => {\n if (['end', 'start'].includes(column.pinned))\n addHObserver(th, column.pinned, onColumnPinned);\n if (['top', 'bottom'].includes(headRenderer.pinned))\n addVObserver(th, headRenderer.pinned, onColumnPinned);\n }}\n >\n <div class={`${CSSNAMESPACE}__cell-content`}>\n {colheadFootRender(column)}\n {!!column.filter && <nano-icon name=\"light/bars-filter\" />}\n </div>\n </th>\n );\n};\n\ntype TableCellProps = {\n rowIndex: number;\n colIndex: number;\n nestedContent?: VNode;\n};\n\nexport const TableCell: FunctionalComponent<TableCellProps> = ({\n rowIndex,\n colIndex,\n nestedContent,\n}) => {\n const content = nestedContent || cellRender(rowIndex, colIndex);\n if (!content) return <Fragment></Fragment>;\n\n const store = fetchStores();\n const column = store.config.state.columns[colIndex];\n let CellType = 'td';\n let props = mergeCellProperties(rowIndex, colIndex, {\n class: {\n [`${CSSNAMESPACE}__td`]: true,\n [`${CSSNAMESPACE}__ordered`]: !!column.order,\n [`${CSSNAMESPACE}__pin`]: !!column.pinned,\n [`${CSSNAMESPACE}__pin--start`]: column.pinned === 'start',\n [`${CSSNAMESPACE}__pin--end`]: column.pinned === 'end',\n },\n });\n\n if (column.rowHeader) {\n props =\n Number((props as TableTypes.EleProps).rowspan) > 1\n ? { ...props, scope: 'rowgroup' }\n : { ...props, scope: 'row' };\n CellType = 'th';\n }\n\n return (\n <CellType\n // role=\"gridcell\"\n {...props}\n >\n <div class={`${CSSNAMESPACE}__cell-content`}>{content}</div>\n </CellType>\n );\n};\n","export const detectScrollSpeed = (() => {\n let lastPos: number;\n let newPos: number;\n let timer: number;\n let delta: number;\n const delay = 60; // in \"ms\" (higher means lower fidelity )\n\n const clear = () => {\n lastPos = null;\n delta = 0;\n };\n clear();\n\n return () => {\n newPos = window.scrollY;\n if (lastPos != null) delta = newPos - lastPos;\n lastPos = newPos;\n window.clearTimeout(timer);\n timer = window.setTimeout(clear, delay);\n return delta;\n };\n})();\n\nexport function findScrollParent(element: HTMLElement) {\n let style = getComputedStyle(element);\n const excludeStaticParent = style.position === 'absolute';\n const overflowRegex = /(auto|scroll)/;\n\n if (style.position === 'fixed') return document.documentElement;\n for (let parent = element; (parent = parent.parentElement); ) {\n style = getComputedStyle(parent);\n if (excludeStaticParent && style.position === 'static') {\n continue;\n }\n if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))\n return parent;\n }\n return document.documentElement;\n}\n\nexport function isInViewport(el: Element, percentVisible = 100) {\n const r = el.getBoundingClientRect();\n const windowHeight =\n window.innerHeight || document.documentElement.clientHeight;\n\n if (\n !r.bottom &&\n !r.top &&\n !r.left &&\n !r.right &&\n !r.height &&\n !r.width &&\n !r.x &&\n !r.y\n )\n return false;\n\n return !(\n Math.floor(100 - ((r.top >= 0 ? 0 : r.top) / +-r.height) * 100) <\n percentVisible ||\n Math.floor(100 - ((r.bottom - windowHeight) / r.height) * 100) <\n percentVisible\n );\n}\n","@use '../../global/style/utilities/globals' as t;\n\nnano-table {\n display: table;\n width: 100%;\n\n // general\n --max-col-width: 200px;\n\n // text\n --color: var(--nano-color-mediumgrey, #68767e);\n --font-size: 0.87rem;\n --cell-line-height: 1.5;\n\n // borders\n --border-color: var(--nano-color-palegrey, #b5aea7);\n --border-style: 1px solid var(--border-color);\n --border-tint-color: var(--nano-color-blue, #90c6e7);\n --border-tint-style: 2px solid var(--border-tint-color);\n\n // backgrounds\n --cell-bg-rgb: var(--nano-color-white-rgb, 255 255 255);\n --head-bg-rgb: var(--cell-bg-rgb);\n --foot-bg-rgb: var(--cell-bg-rgb);\n --th-row-bg-rgb: var(--cell-bg-rgb);\n --ordered-bg-rgb: var(--nano-color-offwhite-rgb, 249 249 251);\n\n // spacing\n --td-padding: 0.5rem 0.625rem 0.4125rem;\n --th-padding: 0.875rem 0.625rem 0.6875rem;\n --head-th-padding: var(--th-padding);\n --foot-th-padding: var(--td-padding);\n --bookend-col-padding: 2rem;\n}\n\n.nano-tbl {\n $base: &;\n\n color: var(--color);\n text-align: start;\n width: 100%;\n font-size: var(--font-size);\n border-spacing: 0 0;\n border-collapse: separate;\n background: rgb(var(--cell-bg-rgb));\n border-inline-end: 1px solid transparent;\n\n // for container queries - not working atm\n\n // tr {\n // container-type: inline-size;\n // }\n\n &__top-anchor {\n @include t.visually-hide;\n }\n\n &__ordered {\n background-color: var(--ordered-bg);\n border-inline-start: var(--border-style);\n border-inline-end: var(--border-style);\n }\n\n &__order-btn {\n padding: 0;\n border: none;\n outline: none;\n font: inherit;\n background: none;\n appearance: none;\n color: inherit;\n display: flex;\n gap: 10px;\n align-items: center;\n width: 100%;\n }\n\n &__status-icons {\n margin-inline: auto 10px;\n display: flex;\n gap: 10px;\n }\n\n &__progress-bar {\n font-size: 0.2rem;\n position: sticky;\n inset-block-start: 0;\n inset-inline: 0;\n z-index: 10;\n transition: scale 0.25s;\n scale: 0;\n width: 100%;\n height: 0;\n\n &--show {\n scale: 1;\n height: auto;\n }\n }\n\n &__caption {\n &--hide {\n @include t.visually-hide;\n }\n }\n\n &__td,\n &__th {\n line-height: var(--cell-line-height);\n text-align: start;\n border-block-end: var(--border-style);\n max-width: var(--max-col-width);\n background-color: rgb(var(--cell-bg-rgb));\n\n // for container queries - not working atm\n\n // @container (min-width: 700px) {\n // &:first-child {\n // padding-inline-start: var(--bookend-col-padding) !important;\n // }\n\n // &:last-child {\n // padding-inline-end: var(--bookend-col-padding) !important;\n // }\n // }\n\n @include t.media-breakpoint-up('md') {\n &:first-child #{$base}__cell-content {\n padding-inline-start: var(--bookend-col-padding) !important;\n }\n\n &:last-child #{$base}__cell-content {\n padding-inline-end: var(--bookend-col-padding) !important;\n }\n }\n\n thead & {\n font-weight: 800;\n background: rgba(var(--head-bg-rgb), 90%);\n\n #{$base}__cell-content {\n padding: var(--head-th-padding);\n }\n }\n\n tfoot & {\n font-weight: 800;\n border-block-end: none;\n background: rgba(var(--foot-bg-rgb), 90%);\n\n #{$base}__cell-content {\n padding: var(--foot-th-padding);\n }\n }\n\n &.nano-tbl__ordered {\n background-color: rgba(var(--ordered-bg-rgb), 0.8) !important;\n }\n }\n\n &__cell-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: var(--td-padding);\n }\n\n tbody {\n will-change: scroll-position;\n visibility: visible;\n\n &.nano-tbl__inactive {\n visibility: hidden;\n }\n }\n\n th[scope='row'] {\n font-weight: 800;\n max-width: 65vw;\n margin: 0;\n }\n\n &__pin {\n position: sticky;\n z-index: 1;\n\n &--start {\n inset-inline: -1px auto;\n transition: max-width 0.25s;\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n box-shadow: 5px 0 4px 0 rgb(0 0 0 / 20%);\n opacity: 0;\n z-index: -1;\n }\n\n #{$base}__pinned--start & {\n z-index: 2;\n\n @include t.media-breakpoint-down('sm') {\n max-width: 25vw !important;\n }\n\n &::after {\n opacity: 1;\n }\n }\n }\n\n &--end {\n inset-inline: auto -1px;\n max-width: min(50vw, 200px);\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n box-shadow: -5px 0 4px 0 rgb(0 0 0 / 20%);\n opacity: 0;\n z-index: -1;\n }\n\n #{$base}__pinned--end & {\n z-index: 3;\n\n &::after {\n opacity: 1;\n }\n }\n\n /*\n I cannot think of a nice way to make stuck-end columns play nice on small screens :(\n Changing the width when stuck (as we do for stuck-start columns) causes the whole positioning to change.\n This fires the IO, thus un-sticks the column, thus causes the IO to fire which sticks the column ∞\n */\n #{$base}__pin--start ~ & {\n @include t.media-breakpoint-down('sm') {\n inset-inline: auto auto;\n\n &::after {\n display: none;\n }\n }\n }\n }\n\n &--top {\n inset-block: -1px auto;\n\n #{$base}__pinned--top & {\n z-index: 4;\n }\n }\n\n &--bottom {\n inset-block: auto -1px;\n\n #{$base}__pinned--bottom & {\n z-index: 5;\n border-block-start: var(--border-tint-style);\n }\n }\n\n &--top#{&}--start {\n #{$base}__pinned--top#{$base}__pinned--start & {\n z-index: 6;\n }\n }\n\n &--top#{&}--end {\n #{$base}__pinned--top#{$base}__pinned--end & {\n z-index: 6;\n }\n }\n\n &--bottom#{&}--start {\n #{$base}__pinned--bottom#{$base}__pinned--start & {\n z-index: 6;\n }\n }\n\n &--bottom#{&}--end {\n #{$base}__pinned--bottom#{$base}__pinned--end & {\n z-index: 6;\n }\n }\n }\n\n thead tr:last-of-type td,\n thead tr:last-of-type th,\n tfoot tr:last-of-type td,\n tfoot tr:last-of-type th {\n border-block-end: var(--border-tint-style);\n }\n\n .unlimited-width {\n max-width: none;\n }\n\n &__spinner {\n font-size: 1.5rem;\n transition: scale 0.25s;\n scale: 0;\n padding: 0.5rem;\n position: absolute;\n inset-block-end: 0;\n inset-inline-start: calc(50% - 0.75rem);\n z-index: -1;\n\n &--show {\n scale: 1;\n position: sticky;\n }\n }\n\n nano-skeleton {\n line-height: var(--cell-line-height);\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Element,\n Host,\n Watch,\n State,\n readTask,\n Event,\n EventEmitter,\n Method,\n Build,\n Listen,\n} from '@stencil/core';\nimport { cyrb53 } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\nimport {\n TableColHead,\n TableRow,\n TableCell,\n TableHeadFootRow,\n} from './table.children';\nimport { CSSNAMESPACE } from './table.constants';\nimport {\n generateStore,\n storeSearch,\n storeSetConfig,\n storeSetData,\n storeSort,\n storeFilter,\n TableStores,\n} from './table.store';\nimport {\n detectScrollSpeed,\n findScrollParent,\n isInViewport,\n} from './table.utils';\nimport type { TableTypes } from '../../interface';\n\nfunction perMark(name: string, end: boolean = false) {\n if (!Build.isDev) return;\n if (end) {\n performance?.mark('end' + name);\n performance?.measure(name, 'start' + name, 'end' + name);\n const entries = performance?.getEntriesByName(name);\n console.log(entries[entries.length ? entries.length - 1 : 0]);\n } else {\n performance?.mark('start' + name);\n }\n}\n\nlet id = 0;\n/**\n * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n * - Built-in search\n * - Built-in column filter\n * - Built-in column sort\n * - Easily swap in API / async based search / filter & sort\n * - Pin headers, footers, rows, columns\n * - Add custom rendering at every level\n * - Add custom properties at every level\n *\n * @slot caption - The table's caption. You must either use this or the `caption` attribute.\n */\n@Component({\n tag: 'nano-table',\n styleUrl: 'table.scss',\n})\nexport class Table implements ComponentInterface {\n constructor() {\n this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);\n }\n // Public API\n\n // Props\n\n /** The type of table. Grid type will make cells navigable by keyboard */\n @Prop() type: 'grid' | 'table' = 'table';\n\n /** A descriptive title of the table.\n * You must use this or the `slot=\"caption\"` for accessibility */\n @Prop() caption: string;\n\n /** Show the caption on-screen */\n @Prop() showCaption: boolean = false;\n\n /** Will show a loading state when true.\n * Will be shown automatically if `rows` is a promise waiting to resolve\n * or when performing custom filtering or sorting */\n @Prop()\n get loading() {\n return this._loading;\n }\n set loading(l: boolean) {\n this.debounceSetLoading(l);\n }\n @State() _loading: boolean = true;\n private debounceSetLoading = (l: boolean) => {\n this._loading = l;\n };\n\n /** When loading rows asynchronously, this will render this number of placeholder rows */\n @Prop() placeholderSize = 5;\n\n /** The data to place in the table */\n @Prop() rows:\n | TableTypes.NanoTable['rows']\n | Promise<TableTypes.NanoTable['rows']>;\n\n @Watch('rows')\n handleRowsChange() {\n if (!this.rows) return;\n\n this.loading = true;\n Promise.resolve(this.rows).then(async (rows) => {\n await storeSetData(this.host, rows);\n\n if (!this.isReady) {\n await this.columnInit();\n this.setInitialBlockDimension();\n }\n this.loading = false;\n });\n }\n\n /** The column config used to generate present the rows of data */\n @Prop({ mutable: true }) columns: TableTypes.NanoTable['columns'] = [];\n\n @Watch('columns')\n handleColsChange() {\n storeSetConfig(this.host, this.columns);\n if (this.isReady) this.columnInit();\n }\n\n /** Used for custom thead row rendering */\n @Prop() headRender: TableTypes.HeadFootRenderer = { pinned: 'top' };\n\n /** Used for custom row rendering */\n @Prop() rowRender: TableTypes.RowRenderer;\n\n /** Used for custom tfoot row rendering */\n @Prop() footRender: TableTypes.HeadFootRenderer = { pinned: 'bottom' };\n\n /** Whether to show a `<tfoot>` component */\n @Prop() showFooter = false;\n\n /** To improve performance, data is split into blocks\n * which are shown / hidden and rendered as they become visible.\n * Use this to control the number of hits within a block -\n * A block should fill a scrolling viewport.\n * The less perBlock the better for performance */\n @Prop() perBlock = 60;\n\n /** The number of total blocks currently rendered in the table. @readonly */\n @Prop()\n get blocksLength() {\n return this.blocks.length;\n }\n\n /** Term to search for in the data */\n @Prop() searchTerm: string;\n\n /** A custom filtering function. Should return a promise.\n * On successful completion the column UI will be updated.\n * A good use-case would be performing the filter on a server / via fetch.\n * Then on success, updating the table's data via the `rows` property */\n @Prop() customFilterFn?: (filters: TableTypes.Filter[]) => Promise<void>;\n\n /** A custom sorting function. Should return a promise.\n * On successful completion the column UI will be updated.\n * A good use-case would be performing the sort on a server / via fetch.\n * Then on success, updating the table's data via the `rows` property */\n @Prop() customSortFn?: (\n property: TableTypes.Prop,\n order: TableTypes.Order\n ) => Promise<void>;\n\n @Watch('searchTerm')\n handleSearchTermChange() {\n this.searchStart();\n }\n\n /** Fired whenever a block is activated by scrolling into view / becoming visible\n * This could be leveraged for infinite scrolling / to fetch more data.\n */\n @Event() nanoTblBlockRendered: EventEmitter<{\n block: number;\n totalBlocks: number;\n }>;\n\n /** Fired when the table has done it's first complete render */\n @Event() nanoTblReady: EventEmitter;\n\n /** Fired before a column is sorted.\n * `event.preventDefault()` to stop sorting. */\n @Event() nanoTblBeforeSort: EventEmitter<{\n column: TableTypes.Prop;\n order: TableTypes.Order;\n }>;\n\n /** Fired after a column is sorted */\n @Event() nanoTblAfterSort: EventEmitter<{\n column: TableTypes.Prop;\n order: TableTypes.Order;\n }>;\n\n /** Fired before a column is filtered.\n * `event.preventDefault()` to stop filtering. */\n @Event() nanoTblBeforeFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n /** Fired after a column is sorted */\n @Event() nanoTblAfterFilter: EventEmitter<{ filters: TableTypes.Filter[] }>;\n\n /** Fired before a general search.\n * `event.preventDefault()` to stop searching. */\n @Event() nanoTblBeforeSearch: EventEmitter<{ term: string }>;\n\n /** Fired after a general / cross column search */\n @Event() nanoTblAfterSearch: EventEmitter<{ term: string }>;\n\n /** Remove any column sorts currently applied\n * @returns a promise which resolves when complete */\n @Method()\n async resetSorting() {\n const col = this.columns.find((c) => !!c.order);\n if (!col) return;\n return this.sortStart(null, col.prop);\n }\n\n /** Apply a sort on a column\n * @returns a promise which resolves when complete */\n @Method()\n async addSort(column: TableTypes.Prop, order: TableTypes.Order) {\n const col = this.columns.find((c) => c.prop === column);\n if (!col) throw 'Cannot find column with ' + column;\n return this.sortStart(order, col.prop);\n }\n\n /** Remove any column filters currently applied\n * @returns a promise which resolves when complete */\n @Method()\n async resetFilters() {\n this.filters = [];\n return this.filterStart();\n }\n\n /** Apply a filter on a column\n * @param filters - the filters to apply\n * @param additive - if true, will add the filters to any currently applied\n * @returns a promise which resolves when complete\n */\n @Method()\n async addFilters(filters: TableTypes.Filter[], additive: boolean = true) {\n if (!additive) this.filters = [];\n return this.filterStart(filters, additive);\n }\n\n // Private Logic\n\n // State\n\n @Element() host: HTMLNanoTableElement;\n private renderId = 'tbl-' + id++;\n private store: TableStores;\n private filters: TableTypes.Filter[] = [];\n private currentFilters = '';\n private currentSort = '';\n private tableEle: HTMLTableElement;\n private topAnchorEle: HTMLElement;\n\n // Blocks\n\n /** `tr` elements split into units - defined by `perPage`\n These are show / hidden for perf */\n @State() blocks: TableTypes.TBody[] = [];\n @State() activeBlocks: number[] = [0, 1, 2];\n @State() measureHeight = 0;\n\n private blockElements: HTMLTableSectionElement[];\n private blockIos: WeakMap<HTMLTableSectionElement, IntersectionObserver> =\n new WeakMap();\n private blockHeights: { blockIndex: number; height: number }[] = [];\n // uses the first 'tr' of an active block as our yard stick\n private set measureEle(el: HTMLTableSectionElement) {\n if (!el) return;\n this.measureHeight = el.getBoundingClientRect().height;\n this.unitHeight =\n el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;\n }\n private unitHeight = 0;\n\n // Scroll / IO used for hiding / showing blocks\n\n private ignoreIO = true;\n private scrollParent: HTMLElement;\n private scrollSpeed: number;\n\n // Misc.\n\n private get isReady() {\n return this._isReady;\n }\n private set isReady(ready: boolean) {\n if (ready === this._isReady) return;\n this._isReady = ready;\n if (this.isReady) requestAnimationFrame(() => this.handleReady());\n }\n private _isReady = false;\n\n // Listeners\n\n @Listen('scroll', { target: 'window' })\n scrollListener() {\n // see explanation in `setupBlockIO`\n const speed = detectScrollSpeed();\n this.scrollSpeed = speed < 0 ? speed * -1 : speed;\n }\n\n // Logic\n\n private handleReady() {\n const hash = window.location.hash;\n if (hash.length > 1) {\n const idRow = document.querySelector(hash);\n if (idRow) {\n idRow.scrollIntoView();\n }\n }\n this.nanoTblReady.emit();\n }\n\n /**\n * Start a sort - can be cancelled by `preventDefault`\n * @param order - column order\n * @param column - column config object\n * @returns A promise\n */\n private sortStart = async (\n order: TableTypes.Order,\n column: TableTypes.Prop,\n element?: HTMLElement\n ) => {\n // did order change?\n if (this.currentSort === order + ':' + column) return;\n\n this.loading = true;\n const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });\n if (sortEvent.defaultPrevented) return;\n perMark('sort');\n this.currentSort = order + ':' + column;\n\n // doesn't make sense to leave user in place for a sort\n this.scrollToTop(element);\n\n if (this.customSortFn) {\n try {\n await this.customSortFn(column, order);\n this.sortComplete(order, column);\n } catch (e) {\n console.warn('custom sort failed', e);\n }\n return;\n }\n\n try {\n await storeSort(this.host, column, order);\n this.sortComplete(order, column);\n } catch (e) {\n console.warn('sort failed', e);\n this.currentSort = '';\n } finally {\n this.loading = false;\n }\n };\n\n /**\n * Complete a sort. Reflects the order to ui.\n * @param order - column order\n * @param column - column config object\n */\n private sortComplete(order: TableTypes.Order, column: TableTypes.Prop) {\n this.columns = this.columns.map((c) => {\n if (c.prop === column) return { ...c, order };\n return { ...c, order: null };\n });\n this.nanoTblAfterSort.emit({ column: column, order });\n perMark('sort', true);\n }\n\n private async searchStart() {\n this.loading = true;\n const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });\n if (sortEvent.defaultPrevented) return;\n perMark('search');\n\n // doesn't make sense to leave user in place for a search\n this.scrollToTop();\n\n try {\n await storeSearch(this.host, this.searchTerm);\n this.nanoTblAfterSearch.emit({ term: this.searchTerm });\n perMark('search', true);\n } catch (e) {\n console.warn('search failed', e);\n } finally {\n this.loading = false;\n }\n }\n\n private async filterStart(\n filters?: TableTypes.Filter[],\n additive: boolean = true\n ) {\n if (filters) {\n if (additive) {\n this.filters = [\n ...this.filters.filter(\n (f) => !filters.find((ff) => ff.prop === f.prop)\n ),\n ...filters,\n ];\n } else {\n this.filters = filters;\n }\n }\n\n if (this.currentFilters === JSON.stringify(this.filters)) return;\n\n this.loading = true;\n const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });\n if (sortEvent.defaultPrevented) return;\n perMark('filter');\n this.currentFilters = JSON.stringify(this.filters);\n\n // doesn't make sense to leave user in place for a search\n this.scrollToTop();\n\n if (this.customFilterFn) {\n try {\n await this.customFilterFn(this.filters);\n this.filterComplete();\n } catch (e) {\n console.warn('custom filter failed', e);\n this.currentFilters = '';\n }\n return;\n }\n\n try {\n await storeFilter(this.host, this.filters);\n this.filterComplete();\n perMark('search', true);\n } catch (e) {\n console.warn('filter failed', e);\n } finally {\n this.loading = false;\n }\n }\n\n private filterComplete() {\n this.columns = this.columns.map((c) => {\n const cFilter = this.filters.find((f) => f.prop === c.prop);\n if (cFilter) c.filter = cFilter.filter;\n return c;\n });\n this.nanoTblAfterFilter.emit({ filters: this.filters });\n perMark('filter', true);\n }\n\n /** Scrolls to the top immediately - used whilst sorting / filtering */\n private scrollToTop(element?: HTMLElement) {\n const scrollBehaviour = this.scrollParent.style?.scrollBehavior;\n const scrollX = this.scrollParent.scrollLeft;\n this.scrollParent.style.scrollBehavior = 'auto';\n\n if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1))\n this.topAnchorEle.scrollIntoView();\n if (element) element.scrollIntoView({ block: 'start' });\n\n if (scrollX) this.scrollParent.scrollLeft = scrollX;\n\n if (scrollBehaviour)\n this.scrollParent.style.scrollBehavior = scrollBehaviour;\n }\n\n private setMeasureElement() {\n readTask(() => {\n this.measureEle = this.blockElements.find(\n (b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`)\n );\n });\n }\n\n /**\n * Sets the initial height on tbody elements that are not active\n * These elements have no natural height - on account of all their rows being hidden\n * So we just estimate for now\n */\n private setInitialBlockDimension() {\n if (!this.blockElements.length) return;\n perMark('blockDims');\n\n const finishResizing: Promise<void> = new Promise((resolve) => {\n readTask(() => {\n this.setMeasureElement();\n\n // find the first active block\n if (!this.measureEle && !this.unitHeight) resolve();\n\n this.blockElements.forEach((el, i) => {\n if (!el || !el.classList?.contains(`${CSSNAMESPACE}__inactive`)) {\n if (i === this.blockElements.length - 1) resolve();\n return;\n }\n if (i === this.blockElements.length - 1) resolve();\n });\n });\n });\n\n // we're all finished.\n finishResizing.then(() => {\n perMark('blockDims', true);\n perMark('init', true);\n\n requestAnimationFrame(() => {\n this.isReady = true;\n });\n });\n }\n\n /** Apply initial columns settings */\n private async columnInit() {\n this.filters = this.columns\n .filter((c) => !!c.filter)\n .map((c) => {\n const { filter, prop } = c;\n return { filter, prop };\n });\n\n if (this.searchTerm) {\n await this.searchStart();\n }\n\n if (this.filters.length) {\n await this.filterStart();\n }\n // apply sort\n const col = this.columns.find((c) => !!c.order);\n if (!!col) {\n await this.sortStart(col.order, col.prop);\n }\n }\n\n /** Split up all incoming rows into 'blocks' split amongst tbody elements.\n * These can then be hidden / shown to improve performance.\n */\n private setBlocks() {\n perMark('setBlocks');\n this.activeBlocks = [0, 1, 2];\n this.ignoreIO = true;\n let i = 1;\n const l = this.store.data.state.rows.length;\n let rows: TableTypes.RowData[] = [];\n const blocks: TableTypes.TBody[] = [];\n this.blockHeights = [];\n\n // old skool loop for perf\n for (i; i <= l; i++) {\n rows.push(this.store.data.state.rows[i - 1]);\n\n if (i % this.perBlock === 0) {\n blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n rows = [];\n }\n }\n if (rows.length)\n blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });\n this.blocks = blocks;\n perMark('setBlocks', true);\n }\n\n /**\n * Returns a block render height.\n * If it's currently active - let auto do it's thing\n * If we've rendered it before - return that\n * If all else fails, let's guess it\n * @param blockIndex\n * @returns a height string (incl px)\n */\n private getBlockHeight(blockIndex: number): string {\n if (this.activeBlocks.includes(blockIndex)) return undefined;\n\n if (this.blockHeights.length) {\n const cachedBlockHeight = this.blockHeights.find(\n (bh) => bh.blockIndex === blockIndex\n );\n if (cachedBlockHeight) return cachedBlockHeight.height + 'px';\n }\n const blockLength = this.blocks[blockIndex].rows.length;\n if (blockLength === this.perBlock && this.measureHeight) {\n return this.measureHeight + 'px';\n }\n return this.unitHeight ? this.unitHeight * blockLength + 'px' : undefined;\n }\n\n /** cache the height for all active blocks for later renders */\n private setBlockHeight() {\n readTask(() => {\n this.activeBlocks.forEach((blockIndex) => {\n const el = this.blockElements[blockIndex];\n if (!el) return;\n\n const height = el.getBoundingClientRect().height;\n // cache height to our block heights array\n // for subsequent renders\n const fBhI = this.blockHeights.findIndex(\n (bh) => bh.blockIndex === blockIndex\n );\n if (fBhI > 0) {\n this.blockHeights[fBhI] = { height, blockIndex };\n } else this.blockHeights.push({ height, blockIndex });\n });\n });\n }\n\n /**\n * Attaches an intersection observer to each rendered tbody element\n * shows / hides intersecting blocks' and sets heights for when they're hidden\n * @param el - the tbody element to observe\n * @param blockIndex - the rendering tbody we're attaching the IO to\n */\n private setupBlockIO = (el: HTMLTableSectionElement, blockIndex: number) => {\n if (!el || this.blockIos.has(el)) return;\n\n const blockIo = new IntersectionObserver(\n ([ioEntry]) => {\n if (this.ignoreIO) return;\n\n if (ioEntry.isIntersecting) {\n // This is a bit gross\n // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast\n // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.\n // To fix that, we check - for realsies - if the block IS visible.\n // BUT that test is not as sensitive to a block being visible via the IO,\n // so doesn't always fire if scrolling slowly\n // *sigh*\n readTask(() => {\n if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {\n this.activeBlocks = [\n blockIndex,\n blockIndex + 1,\n Math.max(0, blockIndex - 1),\n ];\n this.nanoTblBlockRendered.emit({\n block: blockIndex,\n totalBlocks: this.blockElements.length,\n });\n requestAnimationFrame(() => this.setBlockHeight());\n }\n });\n }\n },\n {\n threshold: [0],\n root:\n this.scrollParent === document.scrollingElement\n ? null\n : this.scrollParent,\n }\n );\n\n blockIo.observe(el);\n this.blockIos.set(el, blockIo);\n };\n\n /** Process slotted content */\n private processSlots() {\n // see if we have slot content\n if (!this.caption && !this.host.querySelector('[slot=\"caption\"]')) {\n console.error(\n 'For accessibility you must set a `title` prop or use the `caption` slot'\n );\n }\n }\n\n private handleColumnPinned = (positions: {\n [key in TableTypes.Position]: boolean;\n }) => {\n Object.entries(positions).forEach(([key, applied]) => {\n this.tableEle.classList.toggle(\n `${CSSNAMESPACE}__pinned--${key}`,\n applied\n );\n });\n };\n\n // Component lifecycle\n\n async componentWillLoad() {\n perMark('init');\n this.store = await generateStore(\n this.host,\n this.columns,\n this.scrollParent\n );\n await this.handleRowsChange();\n this.processSlots();\n this.setBlocks();\n this.store.data.onChange('rows', () => this.setBlocks());\n }\n\n connectedCallback(): void {\n readTask(() => (this.scrollParent = findScrollParent(this.host)));\n }\n\n componentDidLoad(): void {\n this.setInitialBlockDimension();\n }\n\n componentShouldUpdate(_newVal, _oldVal, stateName: keyof Table) {\n // stop double rendering - we use the store for rendering internally\n // the public facing props are kept in-sync with the store\n // but we don't want it to cause renders\n if (['rows', 'columns'].includes(stateName)) return false;\n }\n\n componentWillRender(): void | Promise<void> {\n perMark('render');\n }\n\n componentDidRender(): void {\n requestAnimationFrame(() => (this.ignoreIO = false));\n this.setMeasureElement();\n perMark('render', true);\n }\n\n render() {\n this.blockElements = [];\n\n return (\n <Host>\n <div\n class={`${CSSNAMESPACE}__top-anchor`}\n ref={(a) => (this.topAnchorEle = a)}\n >\n  \n </div>\n <div\n aria-labelledby={'table-caption-' + this.renderId}\n tabindex={this.type === 'grid' ? '0' : undefined}\n >\n <nano-progress-bar\n indeterminate\n class={{\n [`${CSSNAMESPACE}__progress-bar`]: true,\n [`${CSSNAMESPACE}__progress-bar--show`]: this.loading,\n }}\n />\n\n <table\n role={this.type === 'grid' ? 'grid' : undefined}\n aria-readonly={this.type === 'table' ? 'true' : undefined}\n aria-rowcount={this.store.data.state.rows.length}\n aria-colcount={this.store.config.state.columns.length}\n class={`${CSSNAMESPACE}`}\n ref={(tbl) => (this.tableEle = tbl)}\n >\n <caption\n class={{\n [`${CSSNAMESPACE}__caption`]: true,\n [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,\n }}\n id={'table-caption-' + this.renderId}\n >\n <slot name=\"caption\">{this.caption}</slot>\n </caption>\n\n {/* Header */}\n <thead>\n <TableHeadFootRow\n rowRenderer={this.headRender}\n onColumnPinned={this.handleColumnPinned}\n >\n {this.store.config.state.columns.map((colModel) => [\n <TableColHead\n column={colModel}\n headRenderer={this.headRender}\n onColumnOrderClick={this.sortStart}\n onColumnPinned={this.handleColumnPinned}\n />,\n ])}\n </TableHeadFootRow>\n </thead>\n\n {this.loading &&\n !this.blocks.length &&\n [...Array(10).keys()].map((rowIndex) => (\n <tr>\n {this.store.config.state.columns.map(\n (_colModel, colIndex) => (\n <TableCell\n rowIndex={rowIndex}\n colIndex={colIndex}\n nestedContent={<nano-skeleton />}\n />\n )\n )}\n </tr>\n ))}\n\n {/* Body */}\n {this.blocks.map((block, blockIndex) => (\n <tbody\n key={block.__uuid}\n id={`tbody-${this.renderId}-${blockIndex}`}\n ref={(tb) => {\n this.blockElements.push(tb);\n this.setupBlockIO(tb, blockIndex);\n }}\n class={{\n [`${CSSNAMESPACE}__inactive`]:\n !this.activeBlocks.includes(blockIndex),\n [`${CSSNAMESPACE}__active`]:\n this.activeBlocks.includes(blockIndex),\n }}\n >\n {this.activeBlocks.includes(blockIndex) ? (\n block.rows.map((row, i) => {\n const rowIndex =\n blockIndex > 0 ? blockIndex * this.perBlock + i : i;\n return (\n <TableRow rowRenderer={this.rowRender} row={row}>\n {this.store.config.state.columns.map(\n (_colModel, colIndex) => (\n <TableCell\n rowIndex={rowIndex}\n colIndex={colIndex}\n />\n )\n )}\n </TableRow>\n );\n })\n ) : (\n <td\n colSpan={this.store.config.state.columns.length}\n style={{\n height: this.getBlockHeight(blockIndex),\n }}\n />\n )}\n </tbody>\n ))}\n\n {/* Footer */}\n {this.showFooter && (\n <tfoot>\n <TableHeadFootRow\n rowRenderer={this.footRender}\n onColumnPinned={this.handleColumnPinned}\n >\n {this.store.config.state.columns.map((colModel) => [\n <TableColHead\n column={colModel}\n headRenderer={this.footRender}\n onColumnPinned={this.handleColumnPinned}\n />,\n ])}\n </TableHeadFootRow>\n </tfoot>\n )}\n </table>\n\n {!!this.blocks.length && (\n <nano-spinner\n type=\"circle\"\n class={{\n [`${CSSNAMESPACE}__spinner`]: true,\n [`${CSSNAMESPACE}__spinner--show`]: this.loading,\n }}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-d8e8d7e3.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,h as a,g as e}from"./p-1fe12320.js";const t=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84, 140, 175);--indicator-color:var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}';const i=class{constructor(a){n(this,a);this.hasText=false;this.type="dna";this.overlay=false}componentWillLoad(){this.hasText=!!this.el.childNodes.length}render(){return a("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},a("div",{class:"spinner__loader"},this.type==="dna"&&a("div",{class:"spinner__dna"},a("div",{class:"spinner__dnatrack spinner__dnatrack--1"},a("div",{class:"spinner__dnadot spinner__dnadot--1"}),a("div",{class:"spinner__dnadot spinner__dnadot--2"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--2"},a("div",{class:"spinner__dnadot spinner__dnadot--3"}),a("div",{class:"spinner__dnadot spinner__dnadot--4"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--3"},a("div",{class:"spinner__dnadot spinner__dnadot--5"}),a("div",{class:"spinner__dnadot spinner__dnadot--6"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--4"},a("div",{class:"spinner__dnadot spinner__dnadot--7"}),a("div",{class:"spinner__dnadot spinner__dnadot--8"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--5"},a("div",{class:"spinner__dnadot spinner__dnadot--9"}),a("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&a("span",{class:"spinner__spin"})),this.hasText&&a("div",{class:"spinner__text"},a("slot",null)),this.overlay&&a("div",{class:"spinner__overlay"}))}get el(){return e(this)}};i.style=t;export{i as nano_spinner};
+//# sourceMappingURL=p-d8e8d7e3.entry.js.map

package/dist/nano-components/p-d8e8d7e3.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","[object Object]","this","hasText","el","childNodes","length","h","class","aria-busy","aria-live","type","overlay"],"mappings":";;;kDAAA,MAAMA,EAAa,yqMCkBNC,EAAO,4CAEU,gBAGK,mBAGW,MAE5CC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,WAAWC,OAGtCL,SACE,OACEM,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC9CH,EAAA,MAAA,CAAKC,MAAM,mBACRN,KAAKS,OAAS,OACbJ,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIhBN,KAAKS,OAAS,UAAYJ,EAAA,OAAA,CAAMC,MAAM,mBAExCN,KAAKC,SACJI,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGHL,KAAKU,SAAWL,EAAA,MAAA,CAAKC,MAAM","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$progress-indicator-color-rgb}\n * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{$layer-overlay-light};\n */\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{$progress-indicator-color-rgb};\n --indicator-color: var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50% 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n h,\n ComponentInterface,\n Prop,\n Element,\n State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n @Prop() type: 'dna' | 'circle' = 'dna';\n\n /** Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\">\n <slot />\n </div>\n )}\n {this.overlay && <div class=\"spinner__overlay\"></div>}\n </div>\n );\n }\n}\n"]}

package/dist/nano-components/p-efa8c520.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as a,h as i,a as e,g as o}from"./p-1fe12320.js";const n=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:0.75rem 1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--active-bg:rgba(var(--bg-rgb), 1);--inactive-bg:rgba(var(--bg-rgb), 0.7);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;display:inline-block}:host([direction=vertical]){--padding:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);-webkit-margin-before:var(--tab-indicator-size);margin-block-start:var(--tab-indicator-size);-webkit-border-end:solid var(--tab-divider-size) var(--tab-divider-color);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{-webkit-margin-before:0;margin-block-start:0;-webkit-border-before:solid var(--tab-indicator-size) var(--tab-indicator-color);border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{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;-webkit-margin-end:var(--tab-spacing);margin-inline-end:var(--tab-spacing);padding:var(--padding);display:-webkit-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;overflow:visible;white-space:nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nanotab ::slotted(*){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(:last-of-type) .nanotab{-webkit-margin-end:0;margin-inline-end:0}.nanotab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab:focus{outline:none;outline-style:none;-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.nanotab:focus:not(.nanotab--disabled){-webkit-box-shadow:var(--focus-shadow) inset;box-shadow:var(--focus-shadow) inset}.nanotab--disabled{background:rgba(var(--disabled-bg-rgb), 1);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab__close-button{-webkit-margin-start:var(--nano-spacing-small, 8px);margin-inline-start:var(--nano-spacing-small, 8px);--padding:var(--nano-spacing-xsmall, 4px) !important}";let r=0;const s=class{constructor(i){t(this,i);this.nanoTabClose=a(this,"nanoTabClose",7);this.tabId=`nano-tab-${++r}`;this.handleCloseClick=()=>{this.nanoTabClose.emit()};this.handleCloseKeydown=t=>{if(t.key===" ")this.handleCloseClick()};this.panel="";this.active=false;this.disabled=false;this.closable=false}async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}render(){return i(e,{id:this.host.id||this.tabId},i("div",{part:"base",ref:t=>this.tab=t,class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled,"nanotab--closable":this.closable},role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false",tabindex:this.disabled||!this.active?"-1":"0"},i("slot",null),this.closable&&i("nano-icon-button",{label:"Close this tab",iconName:"light/times",class:"nanotab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,tabIndex:-1})))}get host(){return o(this)}};s.style=n;export{s as nano_tab};
+//# sourceMappingURL=p-efa8c520.entry.js.map

package/dist/nano-components/{p-47bd0f5d.entry.js.map → p-efa8c520.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","[object Object]","tab","focus","preventScroll","blur","h","Host","host","part","ref","el","class","nanotab","nanotab--active","active","nanotab--disabled","disabled","nanotab--closable","closable","role","aria-disabled","aria-selected","tabindex","label","iconName","onClick","onKeyDown","tabIndex"],"mappings":";;;gEAAA,MAAMA,EAAS,~~68FCYf~~,IAAIC,EAAK,QAWIC,EAAG,0EACNC,KAAAC,MAAQ,cAAcH,IAgCtBE,KAAAE,iBAAmB,KACzBF,KAAKG,aAAaC,QAGZJ,KAAAK,mBAAsBC,IAC5B,GAAIA,EAAEC,MAAQ,IAAKP,KAAKE,+BA/BO,eAGC,oBAGE,oBAGjB,MAOnBM,iBACER,KAAKS,IAAIC,MAAM,CAAEC,cAAe,OAKlCH,oBACER,KAAKS,IAAIG,OAWXJ,SACE,OACEK,EAACC,EAAI,CAAChB,GAAIE,KAAKe,KAAKjB,IAAME,KAAKC,OAC7BY,EAAA,MAAA,CACEG,KAAK,OACLC,IAAMC,GAAQlB,KAAKS,IAAMS,EACzBC,MAAO,CACLC,QAAS,KACTC,kBAAmBrB,KAAKsB,OACxBC,oBAAqBvB,KAAKwB,SAC1BC,oBAAqBzB,KAAK0B,UAE5BC,KAAK,MAAKC,gBACK5B,KAAKwB,SAAW,OAAS,QAAOK,gBAChC7B,KAAKsB,OAAS,OAAS,QACtCQ,SAAU9B,KAAKwB,WAAaxB,KAAKsB,OAAS,KAAO,KAEjDT,EAAA,OAAA,MACCb,KAAK0B,UACJb,EAAA,mBAAA,CACEkB,MAAM,iBACNC,SAAS,cACTb,MAAM,wBACNc,QAASjC,KAAKE,iBACdgC,UAAWlC,KAAKK,mBAChB8B,UAAW","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n * @prop --text-color: Defaults to #{map.get($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n /\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding: 0.75rem 1rem;\n --bg-rgb: #{$layer-bg-color-rgb};\n --active-bg: rgba(var(--bg-rgb), 1);\n --inactive-bg: rgba(var(--bg-rgb), 0.7);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get($colors, lightblue)};\n --tab-indicator-size: 5px;\n\n display: inline-block;\n}\n\n:host([direction='vertical']) {\n --padding: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include text-inherit();\n\n margin-inline-end: var(--tab-spacing);\n padding: var(--padding);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n user-select: none;\n cursor: pointer;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n\n & ::slotted() {\n display: flex;\n align-items: center;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &:focus:not(.nanotab--disabled) {\n box-shadow: var(--focus-shadow) inset;\n }\n\n &--disabled {\n background: rgba(var(--disabled-bg-rgb), 1);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &__close-button {\n margin-inline-start: #{$spacing-small};\n\n --padding: #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/*\n @slot - The tab's label.\n /\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* The active, selected tab. If none active, the first will automatically be selected. /\n @Prop({ reflect: true }) active = false;\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabClose: EventEmitter;\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host id={this.host.id \|\| this.tabId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n tabIndex={-1}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","[object Object]","tab","focus","preventScroll","blur","h","Host","host","part","ref","el","class","nanotab","nanotab--active","active","nanotab--disabled","disabled","nanotab--closable","closable","role","aria-disabled","aria-selected","tabindex","label","iconName","onClick","onKeyDown","tabIndex"],"mappings":";;;gEAAA,MAAMA,EAAS,k+FCYf,IAAIC,EAAK,QAWIC,EAAG,0EACNC,KAAAC,MAAQ,cAAcH,IAgCtBE,KAAAE,iBAAmB,KACzBF,KAAKG,aAAaC,QAGZJ,KAAAK,mBAAsBC,IAC5B,GAAIA,EAAEC,MAAQ,IAAKP,KAAKE,+BA/BO,eAGC,oBAGE,oBAGjB,MAOnBM,iBACER,KAAKS,IAAIC,MAAM,CAAEC,cAAe,OAKlCH,oBACER,KAAKS,IAAIG,OAWXJ,SACE,OACEK,EAACC,EAAI,CAAChB,GAAIE,KAAKe,KAAKjB,IAAME,KAAKC,OAC7BY,EAAA,MAAA,CACEG,KAAK,OACLC,IAAMC,GAAQlB,KAAKS,IAAMS,EACzBC,MAAO,CACLC,QAAS,KACTC,kBAAmBrB,KAAKsB,OACxBC,oBAAqBvB,KAAKwB,SAC1BC,oBAAqBzB,KAAK0B,UAE5BC,KAAK,MAAKC,gBACK5B,KAAKwB,SAAW,OAAS,QAAOK,gBAChC7B,KAAKsB,OAAS,OAAS,QACtCQ,SAAU9B,KAAKwB,WAAaxB,KAAKsB,OAAS,KAAO,KAEjDT,EAAA,OAAA,MACCb,KAAK0B,UACJb,EAAA,mBAAA,CACEkB,MAAM,iBACNC,SAAS,cACTb,MAAM,wBACNc,QAASjC,KAAKE,iBACdgC,UAAWlC,KAAKK,mBAChB8B,UAAW","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n * @prop --text-color: Defaults to #{map.get($colors, blue)};\n * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n * @prop --h-font-size: Defaults to .93em;\n * @prop --v-font-size: Defaults to .875em;\n * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n * @prop --tab-divider-size: Defaults to 0;\n * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n /\n\n:host {\n --focus-shadow: #{$control-focus-style};\n --padding: 0.75rem 1rem;\n --bg-rgb: #{$layer-bg-color-rgb};\n --active-bg: rgba(var(--bg-rgb), 1);\n --inactive-bg: rgba(var(--bg-rgb), 0.7);\n --disabled-bg-rgb: var(--bg-rgb);\n --text-color: #{map.get($colors, blue)};\n --disabled-text-color: #{map.get($colors, darkgrey)};\n --active-text-color: #{map.get($colors, darkblue)};\n --h-font-size: 0.93em;\n --v-font-size: 0.875em;\n --tab-spacing: 0.5rem;\n --tab-divider-size: 0;\n --tab-divider-color: #{map.get($colors, lightblue)};\n --tab-indicator-size: 5px;\n\n display: inline-block;\n}\n\n:host([direction='vertical']) {\n --padding: 1rem;\n\n .nanotab {\n font-size: var(--v-font-size);\n\n &.nanotab--active {\n font-weight: 600;\n color: var(--active-text-color);\n }\n }\n}\n\n:host([direction='horizontal']) {\n .nanotab {\n font-size: var(--h-font-size);\n margin-block-start: var(--tab-indicator-size);\n border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n &.nanotab--active {\n margin-block-start: 0;\n border-block-start: solid var(--tab-indicator-size) var(--tab-indicator-color);\n background: var(--active-bg);\n color: var(--active-text-color);\n }\n }\n}\n\n.nanotab {\n @include text-inherit();\n\n margin-inline-end: var(--tab-spacing);\n padding: var(--padding);\n display: flex;\n block-size: 100%;\n inline-size: auto;\n background: var(--inactive-bg);\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n user-select: none;\n cursor: pointer;\n overflow: visible;\n white-space: nowrap;\n align-items: center;\n\n & ::slotted() {\n display: flex;\n align-items: center;\n }\n\n :host(:last-of-type) & {\n margin-inline-end: 0;\n }\n\n &:hover:not(.tab--disabled) {\n text-shadow: 0 0 0.01px var(--text-color);\n }\n\n &:focus {\n outline: none;\n outline-style: none;\n box-shadow: none;\n border-color: transparent;\n }\n\n &:focus:not(.nanotab--disabled) {\n box-shadow: var(--focus-shadow) inset;\n }\n\n &--disabled {\n background: rgba(var(--disabled-bg-rgb), 1);\n opacity: 0.5;\n cursor: not-allowed;\n color: var(--disabled-text-color);\n }\n\n &__close-button {\n margin-inline-start: #{$spacing-small};\n\n --padding: #{$spacing-xsmall} !important;\n }\n}\n","import {\n Component,\n Element,\n Host,\n ComponentInterface,\n Method,\n Prop,\n h,\n Event,\n EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/*\n @slot - The tab's label.\n /\n\n@Component({\n tag: 'nano-tab',\n styleUrl: 'tab.scss',\n shadow: true,\n})\nexport class Tab implements ComponentInterface {\n private tabId = `nano-tab-${++id}`;\n private tab: HTMLElement;\n\n @Element() host: HTMLNanoTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* The active, selected tab. If none active, the first will automatically be selected. /\n @Prop({ reflect: true }) active = false;\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabClose: EventEmitter;\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus() {\n this.tab.focus({ preventScroll: true });\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab.blur();\n }\n\n private handleCloseClick = () => {\n this.nanoTabClose.emit();\n };\n\n private handleCloseKeydown = (e: KeyboardEvent) => {\n if (e.key === ' ') this.handleCloseClick();\n };\n\n render() {\n return (\n <Host id={this.host.id \|\| this.tabId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n nanotab: true,\n 'nanotab--active': this.active,\n 'nanotab--disabled': this.disabled,\n 'nanotab--closable': this.closable,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <nano-icon-button\n label=\"Close this tab\"\n iconName=\"light/times\"\n class=\"nanotab__close-button\"\n onClick={this.handleCloseClick}\n onKeyDown={this.handleCloseKeydown}\n tabIndex={-1}\n />\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-f95a263c.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r,h as a,g as t}from"./p-1fe12320.js";const e=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;-webkit-transition:0.4s width, 0.4s background-color;transition:0.4s width, 0.4s background-color;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform-origin:left;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{-webkit-animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@-webkit-keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}@keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}";const s=class{constructor(a){r(this,a);this.value=0;this.indeterminate=false;this.showPercent=false}render(){return a("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar",title:this.host.title||undefined,"aria-label":"Progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.value},a("div",{part:"indicator",class:"progress-bar__indicator",style:{width:`${this.value}%`}},a("span",{part:"label",class:"progress-bar__label"},a("slot",null,!this.indeterminate&&this.showPercent?`${this.value}%`:""))))}get host(){return t(this)}};s.style=e;export{s as nano_progress_bar};
+//# sourceMappingURL=p-f95a263c.entry.js.map

package/dist/nano-components/p-f95a263c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"names":["progressBarCss","ProgressBar","[object Object]","h","part","class","progress-bar","progress-bar--indeterminate","this","indeterminate","role","title","host","undefined","aria-label","aria-valuemin","aria-valuemax","aria-valuenow","value","style","width","showPercent"],"mappings":";;;6CAAA,MAAMA,EAAiB,2nDCiBVC,EAAW,0CAIN,qBAGQ,uBAGF,MAEtBC,SACE,OACEC,EAAA,MAAA,CACEC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,8BAA+BC,KAAKC,eAEtCC,KAAK,cACLC,MAAOH,KAAKI,KAAKD,OAASE,UAASC,aACxB,WAAUC,gBACP,IAAGC,gBACH,MAAKC,gBACJT,KAAKC,cAAgB,KAAOD,KAAKU,OAEhDf,EAAA,MAAA,CACEC,KAAK,YACLC,MAAM,0BACNc,MAAO,CACLC,MAAO,GAAGZ,KAAKU,WAGjBf,EAAA,OAAA,CAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,OAAA,MACIK,KAAKC,eAAiBD,KAAKa,YAAc,GAAGb,KAAKU,SAAW","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n --height: 1em;\n --track-color: rgba(#{$progress-track-color-rgb}, 1);\n --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: $layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /** The progress bar's percentage, 0 to 100. */\n @Prop() value = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title || undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.value}%`,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/nano-components/p-fa2a6733.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as e,i as n,c as i,a,g as s}from"./p-1fe12320.js";import{b as o,g as r,c as l}from"./p-845ae77e.js";import{d as c}from"./p-167b9165.js";import{g as h}from"./p-74a7fc4f.js";import{c as d}from"./p-7b3638b7.js";import{d as p,a as b}from"./p-9746b0a5.js";import{F as u,a as f}from"./p-77cad8d1.js";const m=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 v=':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)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;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}:host ::slotted(nano-icon[slot=icon-start]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}:host .link ::slotted(nano-icon[slot=icon-end]){-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0}:host .link,:host button,:host a{-webkit-border-after:var(--border-bottom);border-block-end:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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,:host a:focus{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, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;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){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}: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;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);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;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-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;-webkit-box-flex:0;-ms-flex:0 0 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{-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}: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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;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.has-secondary) button{position:relative}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background-color:#0c5a71;height:9px;inset-inline:0 5px;inset-block-end:-24px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);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;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);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{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{-webkit-padding-before:calc(var(--padding-top) / 2);padding-block-start:calc(var(--padding-top) / 2);-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:calc(var(--padding-bottom) / 2);padding-block-end:calc(var(--padding-bottom) / 2);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-start:0;padding-inline-start:0;text-align:start;-webkit-box-flex:0;-ms-flex:0 1 auto;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);-webkit-box-flex:0;-ms-flex:0 0 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;-webkit-box-flex:0;-ms-flex:0 0 20px;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;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s 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{-webkit-transform:translateX(100%);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{-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';const g=class{constructor(e){t(this,e);this.nanoClose=i(this,"nanoClose",7);this.nanoOpen=i(this,"nanoOpen",7);this.nanoOpening=i(this,"nanoOpening",7);this.nanoClosing=i(this,"nanoClosing",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(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(o(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(t.relatedTarget===this.el||t.relatedTarget===this.btn||this.foundThisNavEle(t.relatedTarget)){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.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});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(a,{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}},this.href&&!this.hasAnchorEle&&!this.disabled&&e("a",{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",{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"},e("slot",{name:"secondary"})),e("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))}get el(){return s(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};g.style=v;const w='.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:-webkit-box;display:-ms-flexbox;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{-webkit-box-flex:1;-ms-flex:1 1 100%;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;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;inset-block-start:50%;-webkit-transition:all 0.125s ease-in;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{-webkit-transform:translateY(-110%);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;-webkit-transition:opacity 0.125s ease-in;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;-webkit-transform:translateY(38%);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;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;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;-webkit-margin-end:5px;margin-inline-end:5px;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select{margin-block:unset;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:auto;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;-webkit-transition:opacity 0.125s ease-in;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;-webkit-transition:0.3s ease-out opacity;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{-webkit-box-flex:1;-ms-flex:1 1 30%;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;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-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);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-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);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-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);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1;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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;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;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;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;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;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;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-select .select__native-input.sc-nano-select{line-height:2.1em;min-height:2.1em;-webkit-padding-before:1.4em;padding-block-start:1.4em}.select__native-input.sc-nano-select::-moz-selection{background:transparent}.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::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.select__native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:initial}.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{-webkit-box-shadow:none;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::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.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{-webkit-padding-before:1.8em;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{-webkit-padding-before:0;padding-block-start:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-after:var(--padding-bottom);padding-block-end:var(--padding-bottom);-webkit-padding-start:0;padding-inline-start:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden}.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select{-webkit-padding-before:1em;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;-webkit-padding-before:var(--padding-top);padding-block-start:var(--padding-top);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);-webkit-padding-after:0;padding-block-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);min-width:50px;width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.5em - var(--padding-bottom));-webkit-box-sizing:border-box;box-sizing:border-box}.select__multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.select__multi-value.sc-nano-select{-webkit-margin-before:var(--padding-bottom);margin-block-start:var(--padding-bottom);-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:-3px;margin-inline-end:-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;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);letter-spacing:1px}.select__multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.2}.select__multi-value-remove.sc-nano-select{background-position:center;-webkit-padding-start:0.5em;padding-inline-start:0.5em;margin:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em}.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select{-webkit-transform:translateY(21%);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 x=0;const _=class{constructor(e){t(this,e);this.nanoChange=i(this,"nanoChange",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoFocus=i(this,"nanoFocus",7);this.nanoDidLoad=i(this,"nanoDidLoad",7);this.nanoDidUnload=i(this,"nanoDidUnload",7);this.nanoSearchChange=i(this,"nanoSearchChange",7);this.nanoValidate=i(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${x++}`;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:i,filterMeta:a}=t;return{value:e,selected:n,label:i,filterMeta:a}}));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 i=this.value.indexOf(n);const a=this.value.indexOf(this.dragVal);const s=this.value;const o=s[i];s[i]=s[a];s[a]=o;this.value=[...s]};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:i,filterMeta:a}=t;return{value:e,selected:n,label:i,filterMeta:a}}))}set options(t){this._options=t.map((t=>{if(typeof t==="string")return{value:t,label:t};else return t}))}debounceChanged(){this.nanoSearchChange=b(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=h()}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 i=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const s=(({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h})=>({el:t,floatLabel:e,label:n,errorMessage:i,showInlineError:a,hasHelperSlot:s,hasHelperEndSlot:o,hasLabelSlot:r,hideLabel:l,placeholder:c,rtl:h}))(this);const o={...s,labelId:t,moreId:n,helperEndId:i,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(a,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...d(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(u,{...o},e(f,{...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,i)),!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+" "+i,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+" "+i,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,i){const a=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+" "+i});if(!this.value.length)return a;return this.value.map(((t,n)=>{let i=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)i=[a,i];else if(n===this.currInsertIndex)i=[i,a];return i}))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};_.style=w;export{m as nano_global_nav_user_profile,g as nano_nav_item,_ as nano_select};
+//# sourceMappingURL=p-fa2a6733.entry.js.map