@nanoporetech-digital/components 8.12.3 → 8.13.0

package/dist/nano-components/{nano-data-table-B3_-hFqj.js → nano-data-table-BXdzSqWC.js}

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{f as t,h as n,F as e,g as o,i,d as s,e as a,r,c as l,a as h}from"./index-BM3Om9WE.js";import{h as c,t as d}from"./renderer-DpNDfhNy.js";import{c as p}from"./math-BEqsTfVK.js";import{d as b}from"./throttle-C93FMm2Z.js";import{i as _,f as u}from"./scroll-1nFw8CNk.js";import{c as f}from"./index-BlBZYxu4.js";const m="nano-tbl",w=(t,n)=>{const e=globalThis[n];return null!=e&&t instanceof e},y=t=>{if(null!=t){if(w(t,"ArrayBuffer")||w(t,"MessagePort")||w(t,"ImageBitmap")||w(t,"OffscreenCanvas"))return[t];if("object"==typeof t)return t.constructor===Object&&(t=Object.values(t)),Array.isArray(t)?t.flatMap(y):y(t.buffer)}return[]};let v=0,g=0;const x=new Map,k=new Map,$=(n,e,o)=>{const i=new Worker(n,{name:e});return i.addEventListener("message",(({data:n})=>{if(n){const e=n[0],i=n[1],s=n[2];if(e===o){const e=n[3],[o,a,r]=x.get(i);if(x.delete(i),e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n),a(n)}else r&&r.forEach((t=>k.delete(t))),o(s)}else if(e===o+".cb")try{k.get(i)(...s)}catch(n){t(n)}}})),i},z=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let a=v++,r=0,l=o.length,h=[i,s];for(x.set(a,h);r<l;r++)if("function"==typeof o[r]){const t=g++;k.set(t,o[r]),o[r]=[n+".cb",t],(h[2]=h[2]||[]).push(t)}const c=t=>t.postMessage([n,a,e,o],y(o));t.then?t.then(c):c(t)})),C=import("./table.worker-By3ZdRHH.js").then((t=>t.worker)),S=z(C,"stencil.table.worker","createWorkerStore"),T=z(C,"stencil.table.worker","syncConfigToWorker"),R=z(C,"stencil.table.worker","syncDataToWorker"),I=z(C,"stencil.table.worker","workerFilter"),B=z(C,"stencil.table.worker","workerSearch"),F=z(C,"stencil.table.worker","workerSort");function D(t){const n=JSON.parse(JSON.stringify(t));return t.forEach((t=>{t?.sortCompareFn&&(n.find((n=>n.prop===t.prop)).sortCompareFn=t.sortCompareFn.toString())})),n}const P=new WeakMap;function A(t,n){const e=M(),o=e.config.state.columns,i=e.data.state.rows,s=o[n],a=s?.prop,r=i[t];return{prop:a,cellModel:r?r[o[n].prop]:"",column:s,rowIndex:t,rowModel:r}}function E(t,n){if(!n)return t;const e={...n,...t};return n.class&&("object"==typeof n.class&&"object"==typeof e.class?e.class={...n.class,...e.class}:"string"==typeof n.class&&"object"==typeof e.class?e.class[n.class]=!0:"string"==typeof e.class&&"string"==typeof n.class&&(e.class+=" "+n.class)),n.style&&(e.style={...n.style,...e.style}),e}function M(){return t=o(i()),P.get(t);var t}function N(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function j(t,n,e=!1){const o={[`${m}__${t}`]:!0,[`${m}__pin`]:!!n,[`${m}__pin--top`]:"top"===n,[`${m}__pin--bottom`]:"bottom"===n};return e?O(o):o}function O(t){let n="";return Object.entries(t).forEach((([t,e])=>{e&&(n+=t+" ")})),n}const H=({column:t,onColumnSortClick:n,defaults:o})=>{if(t.hidden)return c(e,null);function i(){return!!o.sortable&&!1!==t.sortable||!o.sortable&&!0===t.sortable}let s={};t.columnProperties&&(s=t.columnProperties(t)||s);const a={class:{...j("th",t.pinned),[`${m}__pin--start`]:"start"===t.pinned,[`${m}__pin--end`]:"end"===t.pinned,[`${m}__ordered`]:!!t.order,[`${m}__filtered`]:null!=t.filter}};let r=s?E(a,s):a;if(!N(t))return c(e,null);if(r=Number(r.colSpan)>1?{...r,scope:"colgroup"}:{...r,scope:"col"},i()){const n=t.order?"asc"===t.order?"ascending":"descending":"none";r={...r,"aria-sort":n}}return c("th",{...r,key:t.prop},i()?c("button",{class:{[`${m}__order-btn`]:!0,[`${m}__cell-content`]:!0},onClick:function(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}},N(t),null!=t.filter&&c("nano-icon",{name:"light/filter"}),!!t.order&&c("nano-icon","desc"===t.order?{name:"solid/arrow-down-long"}:{name:"solid/arrow-up-long"}),c("div",{class:`${m}__status-icons`},c("nano-icon",{name:"light/chevron-down"}))):c("div",{class:`${m}__cell-content`},N(t),null!=t.filter&&c("nano-icon",{name:"light/bars-filter"})))},W=(t,n=!1)=>{const e=M().config.state.columns[t],o={[`${m}__td`]:!0,[`${m}__ordered`]:!!e.order,[`${m}__pin`]:!!e.pinned,[`${m}__pin--start`]:"start"===e.pinned,[`${m}__pin--end`]:"end"===e.pinned};return n?O(o):o},L=({rowIndex:t,colIndex:n,nestedContent:o})=>{const s=()=>o?o():function(t,n){const o=M().config.state.columns,s=o[n]?.cellTemplate,a=A(t,n),r=i();if(a.cellModel&&"date"===o[n].type){const t=new Date(a.cellModel);t instanceof Date&&!isNaN(t)&&(a.cellModel=s?t:`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`)}let l=!1,h=s?s(((...t)=>(l=!0,c(...t))),a):void 0;if(h&&r.customRenderer&&void 0===h.t&&!(h instanceof Element)&&"string"!=typeof h&&!l){const t=document.createElement("template"),n=r.customRenderer(h,t.content);h=n&&n.then?n:t}return h||(null!=a.cellModel?c(e,null,a.cellModel?.toString()):"")}(t,n)||c("span",{class:"placeholder"}," ");let a="td";const r=M().config.state.columns[n];if(r.hidden)return c(e,null);let l=function(t,n,e){const o={...e},i=M().config.state.columns[n]?.cellProperties;if(!i)return o;const s=i(A(t,n));return s?E(o,s):o}(t,n,{class:W(n)});r.rowHeader&&(l=Number(l.rowSpan)>1?{...l,scope:"rowgroup"}:{...l,scope:"row"},a="th");const h=t=>{const n=s();return c("div",{ref:t=>{t&&(n instanceof Element?(t.replaceChildren(),t.append(n.content||n)):n.then&&n.then((n=>t.innerHTML=n)))},...t,class:{[`${m}__cell-content`]:!0,[`${m}__cell-content--wrap`]:!!r.wrap},innerHTML:"string"==typeof n&&n.includes("<")?n:void 0},("string"!=typeof n||!n.includes("<"))&&!n.then&&!(n instanceof Element)&&n)};return c(a,{...l},r.autoTooltip&&!r.wrap?c("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},c("nano-tooltip",{disabled:!0,placement:"top",onNanoShow:t=>t.target.closest(a).style.zIndex="100",onNanoHide:t=>t.target.closest(a).style.zIndex=""},c(h,null),c("span",{slot:"content"},c(s,null)))):c(h,null))},Y=(t,n,e)=>{const o=c("div",{...t.wrapperProps,class:{[`${m}__cell-content`]:!0,[`${m}__cell-content--wrap`]:t.wrap}},n);return t.header?c("th",{scope:e,...t.cellProps},o):c("td",{...t.cellProps},o)},K=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>Y({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let a,r={};if(!e){const t=function(t){return{rowModel:M().data.state.rows[t],rowIndex:t}}(n);e=t.rowModel}t?.rowProperties&&(r=t.rowProperties({rowModel:e,rowIndex:n})||r),t?.pinned&&"function"==typeof t.pinned&&(a=t.pinned({rowModel:e,rowIndex:n}));const l=E({class:j("tr",a,!0)},r),h=t?.template,d=t=>i.map(t,((t,n)=>(["td","th"].includes(t.vtag.toString())&&(t.vattrs=E({class:W(n,!0)},t.vattrs)),t)));if(h){let t=h(c,{renderedRow:c("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);return Array.isArray(t)&&(t=i.map(t,((t,n)=>("tr"===t.vtag&&(t.vkey||(t.vkey=`${e.__uuid}_${n}`),t.vattrs=E({class:j("tr",a,!0)},t.vattrs),t.vchildren&&(t.vchildren=d(t.vchildren))),t)))),t}return c("tr",{...l,key:e.__uuid},d(o))},q=({rowRenderer:t},n,e)=>{let o={};t.rowProperties&&(o=t.rowProperties()||{});const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>Y({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col"),s=t.pinned||null,a={class:j("tr",s)},r=o?E(a,o):a,l=t?.template;if(l){let t=l(c,{renderedRow:c("tr",{...r},n)},i);return Array.isArray(t)&&(t=e.map(t,(t=>("tr"===t.vtag&&(t.vattrs=E({class:j("tr",s,!0)},t.vattrs),t.vchildren&&(t.vchildren=e.map(t.vchildren,(t=>(["td","th"].includes(t.vtag.toString())&&(t.vattrs=E({class:j(t.vtag.toString(),s,!0)},t.vattrs)),t))))),t)))),t}return c("tr",{...r},n)};class J{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t,this.tableId=this.tableEle.id,this.scrollElement=n,this.startColumns=t.querySelector("thead").getElementsByClassName(`${m}__pin--start`),this.endColumns=t.querySelector("thead").getElementsByClassName(`${m}__pin--end`),this.topRows=t.getElementsByClassName(`${m}__pin--top`),this.bottomRows=t.getElementsByClassName(`${m}__pin--bottom`),this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t,this.handlePinnedStartChange()}_pinnedStart=[];addStyleSheet(t,n){const e=this.tableEle.getRootNode(),o=e.getElementById(t)||document.createElement("style");o.id=t,o.innerHTML=n,o.isConnected||(e.head?e.head.append(o):e.append(o))}handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${m}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);this.addStyleSheet(`${this.tableId}-col-start-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) {\n            --pin-start-active: 1;\n          }\n        `)}else this.tableEle.classList.remove(`${m}__pinned--start`),this.addStyleSheet(`${this.tableId}-col-start-active-style`,"")}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t,this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${m}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);this.addStyleSheet(`${this.tableId}-col-end-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n        `)}else this.tableEle.classList.remove(`${m}__pinned--end`),this.addStyleSheet(`${this.tableId}-col-end-active-style`,"")}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){t!==this._cssColDimensionCacheKey&&(this._cssColDimensionCacheKey=t,this.createPinnedColDimensionStyles())}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0,n=0;const e=Array.from(this.startColumns),o=Array.from(this.endColumns).reverse(),i=`\n      ${e.map((n=>{const e=this.cachedColMeta.get(n);return t+=e.width-1||-1,`\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n              --pin-start: ${t-1}px;\n            }\n          `})).join("")}\n      ${o.map((t=>{const e=this.cachedColMeta.get(t);return n+=e.width-1||-1,`\n            #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n            #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n              --pin-end: ${n-1}px;\n            }\n          `})).join("")}\n    `;this.addStyleSheet(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t,o=n;return this.scrollElement===document.documentElement&&(e=this.scrollElement.offsetLeft,o=this.scrollElement.offsetTop),{offsetX:e,offsetY:o}}assessRows(){if((this.topRows.length||this.bottomRows.length)&&(this.topRows.length&&a((async()=>{let t,n=0;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:a}=o.getBoundingClientRect(),r=o.parentElement,l=getComputedStyle(o).getPropertyValue("--pin-top"),h=""!==l?parseFloat(l):n;s((()=>{i-e<=h?o.classList.add(`${m}__pinned`,`${m}__pinned--top`):o.classList.remove(`${m}__pinned`,`${m}__pinned--top`),t!==r&&(r.style.setProperty("--pin-top",n-1+"px"),n+=a-1,t=r)}))}})),this.bottomRows.length)){const t=Array.from(this.bottomRows).reverse();a((async()=>{let n,e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:a}=i.getBoundingClientRect(),r=i.parentElement,l=getComputedStyle(i).getPropertyValue("--pin-bottom"),h=""!==l?parseFloat(l):e;await new Promise((l=>s((()=>{this.tableDims.height+o-(t+a)<=h?i.classList.add(`${m}__pinned`,`${m}__pinned--bottom`):i.classList.remove(`${m}__pinned`,`${m}__pinned--bottom`),n!==r&&(r.style.setProperty("--pin-bottom",e-1+"px"),e+=a-1,n=r),l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t,n,e;const o=new Promise((o=>{this.startColumns.length&&a((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns)t=o.getBoundingClientRect(),this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)}),n=this.pinnedStart.find((t=>t===o)),t.x<s?n||(this.pinnedStart=[...this.pinnedStart,o]):n&&(this.pinnedStart=this.pinnedStart.filter((t=>t!==o))),s+=t.width;this.endColumns.length||o()})),this.endColumns.length&&a((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let a=0;for(const o of i)t=o.getBoundingClientRect(),this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)}),n=this.pinnedEnd.find((t=>t===o)),this.tableDims.width+s-t.right<=a?n||(this.pinnedEnd=[o,...this.pinnedEnd]):n&&(this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))),a+=t.width;o()}))}));await o,this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){this.cacheX!==t.x&&(this.cacheX=t.x,this.assessCols()),this.cacheY!==t.y&&(this.cacheY=t.y,this.assessRows())}onResize(){this.tableDims={width:this.scrollElement.clientWidth,height:this.scrollElement.clientHeight},this.assessCols(),this.assessRows()}}let X=0;const Z=class{constructor(t){r(this,t),this.nanoTblReady=l(this,"nanoTblReady",7),this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7),this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7),this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7),this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7),this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7),this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7),this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7),this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7),this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;scrollable=!1;caption;showCaption=!1;loading=void 0;get _loading(){return void 0!==this.loading?this.loading:this.internalLoading}set _loading(t){void 0===this.loading&&this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=!0;placeholderSize=10;rows;handleRowsChange(){this.rows?(this._loading=!0,Promise.resolve(this.rows).then((async t=>{await function(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns,i=o.filter((t=>"date"===t.type)).reduce(((t,n)=>[...t,n.prop]),[]),s=o.filter((t=>!t.type));return n=n.map(((t,n)=>(s.length&&0===n&&(e.config.state.columns=o.map((n=>{var e;return s.includes(n)&&t[n.prop]&&!n.type&&(n.type=(e=t[n.prop])instanceof Date?"date":["number","string","boolean"].includes(typeof e)?typeof e:"unknown","date"===n.type&&i.push(n.prop)),n}))),i.forEach((n=>{const e=new Date(t[n]);e&&Number(e)&&(t[n]=Number(e))})),t.__index=n,t.__uuid=p(o.map((n=>t[n.prop])).join()),t))),e.data.state.rows=n,e.general.state.workerId?R(e.general.state.workerId,n):void 0}(this.host,t),this.customFilterApplied?this.customFilterApplied=!1:this.currentFilters="",this.currentSort="",await this.columnInit(),this.isReady||requestAnimationFrame((()=>this.setInitialBlockDimension())),this._loading=!1,this.tablePinnedService&&this.tablePinnedService.assessRows()}))):this._loading=!0}columns=[];async handleColsChange(){await function(t,n){const e=P.get(t);if(e)return e.config.state.columns=n,e.general.state.workerId?T(e.general.state.workerId,D(n)):void 0}(this.host,this.columns),this.isReady&&this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=!1;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=!0;handleSearchTermChange(){this.searchStart()}showPaginateSpinner=!1;virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(t)return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){return this.filters=[],this.filterStart()}async addFilters(t,n=!0){return n||(this.filters=[]),this.filterStart(t,n)}async removeFilters(t){return this.filters=this.filters.filter((n=>!t.includes(n.prop))),this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t),this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+X++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;activeWatcherIo;tablePinnedService;customFilterApplied=!1;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n,this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){t!==this._scrollParent&&(this._scrollParent&&(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler),(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler),this._scrollParent=t)}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){this._primaryBlockIndex!==t&&(this._primaryBlockIndex=t,this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length}))}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){t!==this._isReady&&(this._isReady=t,this.isReady&&requestAnimationFrame((()=>this.handleReady())))}_isReady=!1;handleReady(){const t=window.location.hash;if(t.length>1)try{const n=document.querySelector(t);n&&n.scrollIntoView()}catch(t){}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort!==t+":"+n&&(this._loading=!0,!this.nanoTblBeforeSort.emit({column:n,order:t}).defaultPrevented)){if(this.currentSort=t+":"+n,this.scrollToTop(e),this.customSortFn)try{if(!0===await this.customSortFn(n,t))return this.sortComplete(t,n),void(this._loading=!1)}catch(t){return console.warn("custom sort failed",t),this.currentSort="",void(this._loading=!1)}try{await async function(t,n,e){const o=P.get(t);if(o&&o.general.state.workerId)try{o.data.state.rows=await F(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}(this.host,n,t),this.sortComplete(t,n)}catch(t){console.warn("sort failed",t),this.currentSort=""}finally{this.blocks.length&&(this._loading=!1)}}};sortComplete(t,n){this.columns=this.columns.map((e=>e.prop===n?{...e,order:t}:{...e,order:null})),this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){if(this._loading=!0,!this.nanoTblBeforeSearch.emit({term:this.searchTerm}).defaultPrevented){this.scrollToTop();try{await async function(t,n){const e=P.get(t);if(e&&e.general.state.workerId)try{e.data.state.rows=await B(e.general.state.workerId,n)}catch(t){console.warn(t)}}(this.host,this.searchTerm),this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this._loading=!1}}}async filterStart(t,n=!0){if(t&&(this.filters=n?[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]:t),this.currentFilters!==JSON.stringify(this.filters)&&(this._loading=!0,!this.nanoTblBeforeFilter.emit({filters:this.filters}).defaultPrevented)){if(this.currentFilters=JSON.stringify(this.filters),this.scrollToTop(),this.customFilterFn)try{if(!0===await this.customFilterFn(this.filters))return this.customFilterApplied=!0,await this.filterComplete(),void(this._loading=!1)}catch(t){return console.warn("custom filter failed",t),this.currentFilters="",void(this._loading=!1)}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=!1}}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));return n&&("boolean"!=typeof n.filter&&n.filter.length||"boolean"==typeof n.filter)?t.filter=n.filter:(null!=t.filter||t.filter&&"boolean"!=typeof t.filter&&!t.filter.length)&&(t.filter=void 0),t})),await async function(t,n){const e=P.get(t);if(e&&e.general.state.workerId)try{e.data.state.rows=await I(e.general.state.workerId,n)}catch(t){console.warn(t)}}(this.host,this.filters),this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){if(!this.scrollParent)return;const n=this.scrollParent.style?.scrollBehavior,e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto",this.topAnchorEle&&!_(this.topAnchorEle,.1)&&this.host.scrollIntoView(),t&&!_(t,1)&&setTimeout((()=>t.scrollIntoView({block:"start"})),500),e&&(this.scrollParent.scrollLeft=e),n&&(this.scrollParent.style.scrollBehavior=n),this.scrollHandler()}setMeasureElement(){return new Promise((t=>{a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${m}__inactive`))),t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;const t=async()=>(await this.setMeasureElement(),!!this.unitHeight);new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{await t()&&(n(),e.disconnect())}),{root:this.scrollParent});e.observe(this.tableEle)}}))})).then((()=>{requestAnimationFrame((()=>this.isReady=!0))}))}async columnInit(){this.filters=this.columns.filter((t=>null!=t.filter)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}})),this.searchTerm&&await this.searchStart(),this.filters.length&&await this.filterStart();const t=this.columns.find((t=>!!t.order));t&&await this.sortStart(t.order,t.prop),this.tablePinnedService&&this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length)return void(this.blocks=[]);let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(;n<=e;n++)o.push(this.store.data.state.rows[n-1]||{__uuid:""}),n%this.perBlock==0&&(i.push({rows:o,__uuid:p(o.map((t=>t.__uuid)).join())}),o=[]);o.length&&i.push({rows:o,__uuid:p(o.map((t=>t.__uuid)).join())}),this.blocks=i}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;return n===this.perBlock&&this.measureHeight?this.measureHeight:this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];n&&a((()=>{if(n.classList.contains(`${m}__inactive`))return;const e=n.getBoundingClientRect().height,o=this.blockHeights.findIndex((n=>n.blockIndex===t));o>-1?this.blockHeights[o]={height:e,blockIndex:t}:this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;this.store?.general.state.isActive&&this.rows&&(void 0===this.primaryBlockIndex&&(this.primaryBlockIndex=0),a((()=>{t=void 0!==this.scrollParent.scrollTop?this.scrollParent.scrollTop:window.scrollY,t+=this.host.offsetTop,this.tablePinnedService&&this.tablePinnedService.onScroll({x:void 0!==this.scrollParent.scrollLeft?this.scrollParent.scrollLeft:window.scrollX,y:t});let n=this.host.offsetTop,e=0;const o=this.blocks.length;for(;e<o&&t>=n;){if(n+=this.getBlockHeight(e),t<n){const t=[e,e+1];t.toString()!==this.activeBlocks.toString()&&(this.activeBlocks=t),this.primaryBlockIndex=e}e++}})))};processSlots(){this.caption||this.host.querySelector('[slot="caption"]')||console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}setupActiveWatcher(){this.host&&this.scrollParent&&this.store&&(this.activeWatcherIo&&(this.activeWatcherIo.disconnect(),this.activeWatcherIo=void 0),(this.activeWatcherIo=new IntersectionObserver((([t])=>{this.store.general.state.isActive=!!t.isIntersecting}),{root:this.scrollParent,threshold:0})).observe(this.scrollable?this.tableEle:this.host))}async componentWillLoad(){this.store=await async function(t,n,e,o){const i={data:f({rows:[]}),config:f({columns:n}),general:f({workerId:null,scrollParent:e,host:t,isReady:o})},s=await S(i.data.state.rows,D(i.config.state.columns));return i.general.state.workerId=s,P.set(t,i),i.data.use({reset:()=>{i.general.state.workerId&&R(i.general.state.workerId,null)},dispose:()=>{i.general.state.workerId&&R(i.general.state.workerId,null)}}),i.config.use({reset:()=>{i.general.state.workerId&&T(i.general.state.workerId,null)},dispose:()=>{i.general.state.workerId&&T(i.general.state.workerId,null)}}),i}(this.host,this.columns,this.scrollParent,this.isReady),this.handleRowsChange(),this.store.general.onChange("isActive",(()=>{this.scrollHandler()})),this.store.data.onChange("rows",(()=>this.setBlocks())),this.processSlots(),this.setBlocks(),this.scrollable||(this.scrollParent=u(this.host),this.setupActiveWatcher())}connectedCallback(){this.scrollable||(this.scrollParent=u(this.host),this.setupActiveWatcher())}componentDidLoad(){this.setInitialBlockDimension(),this.scrollable&&(this.scrollParent=this.host.querySelector(d("nano-masked-overflow")).shadowRoot.querySelector(".onav__scroller"),this.setupActiveWatcher()),this.tablePinnedService||(this.tablePinnedService=new J(this.tableEle,this.scrollParent))}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return!1}componentWillRender(){}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()))}disconnectedCallback(){this.activeWatcherIo&&(this.activeWatcherIo.disconnect(),this.activeWatcherIo=void 0,(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler))}render(){return this.blockElements=[],c(h,{class:"nano-data-table"},c("div",{class:`${m}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),c("nano-resize-observe",{onNanoResize:()=>{this.tablePinnedService&&this.tablePinnedService.onResize()}}),(t=>this.scrollable?c("nano-masked-overflow",{hideScrollbars:!1,scrollControls:!1,label:this.caption},t):c("div",null,t))(c("div",{class:`${m}__wrap`},c("nano-progress-bar",{class:{[`${m}__progress-bar`]:!0,[`${m}__progress-bar--show`]:this._loading}},c("progress",null)),c("table",{"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${m}`,ref:t=>this.tableEle=t,id:"nano-data-table-"+this.renderId,"aria-busy":this._loading||void 0},c("caption",{class:{[`${m}__caption`]:!0,[`${m}__caption--hide`]:!this.showCaption}},c("slot",{name:"caption"},this.caption)),c("thead",null,c(q,{rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[c(H,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&c("tbody",{class:`${m}__active ${m}__loading`},[...Array(this.placeholderSize).keys()].map((t=>c("tr",null,this.store.config.state.columns.map(((n,e)=>c(L,{rowIndex:t,colIndex:e,nestedContent:()=>c("span",{class:"n-loader-skeleton"},c("span",null,"Content loading"))}))))))),c("tr",{hidden:!!this._loading||!!this.blocks.length},c("th",{class:`${m}__th`,colSpan:this.store.config.state.columns.length},c("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},c("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>c("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${m}__inactive`]:!this.activeBlocks.includes(n),[`${m}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return c(K,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>c(L,{rowIndex:o,colIndex:n}))))})):c("tr",{class:`${m}__tr--placeholder`},c("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&c("tfoot",null,c(q,{rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[c(H,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&this.showPaginateSpinner&&c("nano-spinner",{class:{[`${m}__spinner`]:!0,[`${m}__spinner--show`]:this._loading}}))))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};Z.style=':host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.nano-data-table {\n  /**\n   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`\n   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`\n   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`\n   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`\n   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`\n   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`\n   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;\n   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;\n   */\n  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n  --table-border-color: var(--nano-color-neutral-200);\n  --table-border-color-header: var(--nano-color-primary-1000);\n  --table-background: var(--nano-color-base-0);\n  --table-max-col-width: clamp(200px, 500px, 50vw);\n  --table-ordered-bg: var(--nano-color-neutral-100);\n  --table-wrapper-max-height: 80vh;\n  --table-wrapper-max-width: 100%;\n  display: block;\n  inline-size: 100%;\n  color: var(--nano-color-neutral-1400);\n  container-type: inline-size;\n  --isLtR: 1;\n}\n.nano-data-table:dir(rtl) {\n  --isLtR: -1;\n}\n.nano-data-table .nano-sortable__dragged {\n  background: var(--nano-color-base-0);\n  opacity: 0.9;\n  box-shadow: var(--nano-shadow-l0);\n  z-index: 10 !important;\n}\n\n.nano-tbl__wrap {\n  display: table;\n  min-inline-size: 100%;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {\n  max-inline-size: var(--table-wrapper-max-width);\n  max-block-size: var(--table-wrapper-max-height);\n  position: relative;\n  display: block;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {\n  margin-block-end: var(--nano-spacing-l);\n}\n\n.nano-data-table:not([scrollable=false]) .nano-masked-overflow {\n  --fade-size: 30px;\n}\n.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {\n  --fade-size: 0;\n}\n\n.nano-tbl {\n  text-align: start;\n  inline-size: 100%;\n  border-spacing: 0 0;\n  border-collapse: separate;\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n}\n.nano-tbl__top-anchor {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n  position: relative;\n}\n.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg);\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__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: var(--nano-spacing-sm);\n  align-items: center;\n  inline-size: 100%;\n}\n.nano-tbl__order-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n.nano-tbl__status-icons {\n  margin-inline: auto 10px;\n  display: flex;\n  gap: 10px;\n}\n.nano-tbl__progress-bar {\n  --height: 0.2125rem;\n  position: sticky;\n  inset-block-start: 0;\n  inset-inline: 0;\n  z-index: 10;\n  transition: transform 0.25s;\n  transform: scale(0);\n  inline-size: 100%;\n}\n.nano-tbl__progress-bar--show {\n  transform: scale(1);\n}\n.nano-tbl__caption--hide {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n.nano-tbl__td, .nano-tbl__th {\n  max-inline-size: var(--table-max-col-width);\n}\nthead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {\n  position: absolute;\n  inset-inline-end: 5px;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  background: white;\n  z-index: 10;\n}\n.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg) !important;\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nano-tbl__cell-content--no-result {\n  padding-block: var(--nano-spacing-md);\n}\n.nano-tbl__cell-content--wrap {\n  white-space: normal;\n  overflow: visible;\n}\n.nano-tbl tbody {\n  opacity: 1;\n  transition: 0.1s ease opacity;\n}\n.nano-tbl tbody.nano-tbl__loading {\n  z-index: -1;\n  position: relative;\n}\n.nano-tbl tbody.nano-tbl__inactive {\n  opacity: 0;\n}\n.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {\n  display: none;\n}\n.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {\n  display: none;\n}\n.nano-tbl th[scope=row] {\n  margin: 0;\n}\n.nano-tbl__tr {\n  --base-z: 0;\n}\n.nano-tbl__pin {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin--start {\n  position: sticky;\n  inset-inline-start: var(--pin-start, -1px);\n}\n.nano-tbl__pin--start::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-start-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--start .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 3) !important;\n}\n.nano-tbl__pin--end {\n  position: sticky;\n  inset-inline-end: var(--pin-end, -1px);\n  max-inline-size: min(50vw, 200px);\n}\n@container (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n@media (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n.nano-tbl__pin--end::after {\n  display: block;\n  content: "";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-end-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--end .nano-tbl__pin--end {\n  --z: calc(var(--base-z) + 2);\n}\n.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {\n  position: sticky;\n  inset-block-start: var(--pin-top, -1px);\n}\n.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--top.nano-tbl__pinned--top {\n  --base-z: 4;\n}\ntbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {\n  border-block-end: 1px solid var(--table-border-color-header);\n}\n.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {\n  position: sticky;\n  inset-block-end: var(--pin-bottom, -1px);\n}\n.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {\n  --base-z: 5;\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {\n  --base-z: 6;\n}\ntbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {\n  border-block-start: 1px solid var(--table-border-color-header);\n}\n.nano-tbl thead tr:last-of-type td,\n.nano-tbl thead tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n}\n.nano-tbl tfoot tr:first-of-type td,\n.nano-tbl tfoot tr:first-of-type th {\n  border-block-start: none;\n}\n.nano-tbl tfoot tr:last-of-type td,\n.nano-tbl tfoot tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n  border-block-start: 2px solid var(--table-border-color-header);\n}\n.nano-tbl .unlimited-width {\n  max-inline-size: none;\n}\n.nano-tbl__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: 0;\n}\n.nano-tbl__spinner--show {\n  scale: 1;\n  position: sticky;\n}';export{Z as N,$ as c}
+import{f as t,h as n,F as e,g as o,i,d as s,e as a,r,c as l,a as h}from"./index-BM3Om9WE.js";import{h as c,t as d}from"./renderer-DpNDfhNy.js";import{c as p}from"./math-BEqsTfVK.js";import{d as b}from"./throttle-C93FMm2Z.js";import{i as _,f as u}from"./scroll-1nFw8CNk.js";import{c as f}from"./index-BlBZYxu4.js";const m="nano-tbl",w=(t,n)=>{const e=globalThis[n];return null!=e&&t instanceof e},y=t=>{if(null!=t){if(w(t,"ArrayBuffer")||w(t,"MessagePort")||w(t,"ImageBitmap")||w(t,"OffscreenCanvas"))return[t];if("object"==typeof t)return t.constructor===Object&&(t=Object.values(t)),Array.isArray(t)?t.flatMap(y):y(t.buffer)}return[]};let v=0,g=0;const x=new Map,k=new Map,$=(n,e,o)=>{const i=new Worker(n,{name:e});return i.addEventListener("message",(({data:n})=>{if(n){const e=n[0],i=n[1],s=n[2];if(e===o){const e=n[3],[o,a,r]=x.get(i);if(x.delete(i),e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n),a(n)}else r&&r.forEach((t=>k.delete(t))),o(s)}else if(e===o+".cb")try{k.get(i)(...s)}catch(n){t(n)}}})),i},z=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let a=v++,r=0,l=o.length,h=[i,s];for(x.set(a,h);r<l;r++)if("function"==typeof o[r]){const t=g++;k.set(t,o[r]),o[r]=[n+".cb",t],(h[2]=h[2]||[]).push(t)}const c=t=>t.postMessage([n,a,e,o],y(o));t.then?t.then(c):c(t)})),C=import("./table.worker-DftFV8Z7.js").then((t=>t.worker)),S=z(C,"stencil.table.worker","createWorkerStore"),T=z(C,"stencil.table.worker","syncConfigToWorker"),R=z(C,"stencil.table.worker","syncDataToWorker"),I=z(C,"stencil.table.worker","workerFilter"),F=z(C,"stencil.table.worker","workerSearch"),B=z(C,"stencil.table.worker","workerSort");function D(t){const n=JSON.parse(JSON.stringify(t));return t.forEach((t=>{t?.sortCompareFn&&(n.find((n=>n.prop===t.prop)).sortCompareFn=t.sortCompareFn.toString())})),n}const P=new WeakMap;function A(t,n){const e=M(),o=e.config.state.columns,i=e.data.state.rows,s=o[n],a=s?.prop,r=i[t];return{prop:a,cellModel:r?r[o[n].prop]:"",column:s,rowIndex:t,rowModel:r}}function E(t,n){if(!n)return t;const e={...n,...t};return n.class&&("object"==typeof n.class&&"object"==typeof e.class?e.class={...n.class,...e.class}:"string"==typeof n.class&&"object"==typeof e.class?e.class[n.class]=!0:"string"==typeof e.class&&"string"==typeof n.class&&(e.class+=" "+n.class)),n.style&&(e.style={...n.style,...e.style}),e}function M(){return t=o(i()),P.get(t);var t}function N(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function j(t,n,e=!1){const o={[`${m}__${t}`]:!0,[`${m}__pin`]:!!n,[`${m}__pin--top`]:"top"===n,[`${m}__pin--bottom`]:"bottom"===n};return e?O(o):o}function O(t){let n="";return Object.entries(t).forEach((([t,e])=>{e&&(n+=t+" ")})),n}const W=({column:t,onColumnSortClick:n,defaults:o})=>{if(t.hidden)return c(e,null);function i(){return!!o.sortable&&!1!==t.sortable||!o.sortable&&!0===t.sortable}let s={};t.columnProperties&&(s=t.columnProperties(t)||s);const a={class:{...j("th",t.pinned),[`${m}__pin--start`]:"start"===t.pinned,[`${m}__pin--end`]:"end"===t.pinned,[`${m}__ordered`]:!!t.order,[`${m}__filtered`]:null!=t.filter}};let r=s?E(a,s):a;if(!N(t))return c(e,null);if(r=Number(r.colSpan)>1?{...r,scope:"colgroup"}:{...r,scope:"col"},i()){const n=t.order?"asc"===t.order?"ascending":"descending":"none";r={...r,"aria-sort":n}}return c("th",{...r,key:t.prop},i()?c("button",{class:{[`${m}__order-btn`]:!0,[`${m}__cell-content`]:!0},onClick:function(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}},N(t),null!=t.filter&&c("nano-icon",{name:"light/filter"}),!!t.order&&c("nano-icon","desc"===t.order?{name:"solid/arrow-down-long"}:{name:"solid/arrow-up-long"}),c("div",{class:`${m}__status-icons`},c("nano-icon",{name:"light/chevron-down"}))):c("div",{class:`${m}__cell-content`},N(t),null!=t.filter&&c("nano-icon",{name:"light/bars-filter"})))},H=(t,n=!1)=>{const e=M().config.state.columns[t],o={[`${m}__td`]:!0,[`${m}__ordered`]:!!e.order,[`${m}__pin`]:!!e.pinned,[`${m}__pin--start`]:"start"===e.pinned,[`${m}__pin--end`]:"end"===e.pinned};return n?O(o):o},L=({rowIndex:t,colIndex:n,nestedContent:o})=>{const s=()=>o?o():function(t,n){const o=M().config.state.columns,s=o[n]?.cellTemplate,a=A(t,n),r=i();if(a.cellModel&&"date"===o[n].type){const t=new Date(a.cellModel);t instanceof Date&&!isNaN(t)&&(a.cellModel=s?t:`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`)}let l=!1,h=s?s(((...t)=>(l=!0,c(...t))),a):void 0;if(h&&r.customRenderer&&void 0===h.t&&!(h instanceof Element)&&"string"!=typeof h&&!l){const t=document.createElement("template"),n=r.customRenderer(h,t.content);h=n&&n.then?n:t}return h||(null!=a.cellModel?c(e,null,a.cellModel?.toString()):"")}(t,n)||c("span",{class:"placeholder"}," ");let a="td";const r=M().config.state.columns[n];if(r.hidden)return c(e,null);let l=function(t,n,e){const o={...e},i=M().config.state.columns[n]?.cellProperties;if(!i)return o;const s=i(A(t,n));return s?E(o,s):o}(t,n,{class:H(n)});r.rowHeader&&(l=Number(l.rowSpan)>1?{...l,scope:"rowgroup"}:{...l,scope:"row"},a="th");const h=t=>{const n=s();return c("div",{ref:t=>{t&&(n instanceof Element?(t.replaceChildren(),t.append(n.content||n)):n.then&&n.then((n=>t.innerHTML=n)))},...t,class:{[`${m}__cell-content`]:!0,[`${m}__cell-content--wrap`]:!!r.wrap},innerHTML:"string"==typeof n&&n.includes("<")?n:void 0},("string"!=typeof n||!n.includes("<"))&&!n.then&&!(n instanceof Element)&&n)};return c(a,{...l},r.autoTooltip&&!r.wrap?c("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},c("nano-tooltip",{disabled:!0,placement:"top",onNanoShow:t=>t.target.closest(a).style.zIndex="100",onNanoHide:t=>t.target.closest(a).style.zIndex=""},c(h,null),c("span",{slot:"content"},c(s,null)))):c(h,null))},Y=(t,n,e)=>{const o=c("div",{...t.wrapperProps,class:{[`${m}__cell-content`]:!0,[`${m}__cell-content--wrap`]:t.wrap}},n);return t.header?c("th",{scope:e,...t.cellProps},o):c("td",{...t.cellProps},o)},K=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>Y({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let a,r={};if(!e){const t=function(t){return{rowModel:M().data.state.rows[t],rowIndex:t}}(n);e=t.rowModel}t?.rowProperties&&(r=t.rowProperties({rowModel:e,rowIndex:n})||r),t?.pinned&&"function"==typeof t.pinned&&(a=t.pinned({rowModel:e,rowIndex:n}));const l=E({class:j("tr",a,!0)},r),h=t?.template,d=t=>i.map(t,((t,n)=>(["td","th"].includes(t.vtag.toString())&&(t.vattrs=E({class:H(n,!0)},t.vattrs)),t)));if(h){let t=h(c,{renderedRow:c("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);return Array.isArray(t)&&(t=i.map(t,((t,n)=>("tr"===t.vtag&&(t.vkey||(t.vkey=`${e.__uuid}_${n}`),t.vattrs=E({class:j("tr",a,!0)},t.vattrs),t.vchildren&&(t.vchildren=d(t.vchildren))),t)))),t}return c("tr",{...l,key:e.__uuid},d(o))},q=({rowRenderer:t},n,e)=>{let o={};t.rowProperties&&(o=t.rowProperties()||{});const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>Y({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col"),s=t.pinned||null,a={class:j("tr",s)},r=o?E(a,o):a,l=t?.template;if(l){let t=l(c,{renderedRow:c("tr",{...r},n)},i);return Array.isArray(t)&&(t=e.map(t,(t=>("tr"===t.vtag&&(t.vattrs=E({class:j("tr",s,!0)},t.vattrs),t.vchildren&&(t.vchildren=e.map(t.vchildren,(t=>(["td","th"].includes(t.vtag.toString())&&(t.vattrs=E({class:j(t.vtag.toString(),s,!0)},t.vattrs)),t))))),t)))),t}return c("tr",{...r},n)};class J{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t,this.tableId=this.tableEle.id,this.scrollElement=n,this.startColumns=t.querySelector("thead").getElementsByClassName(`${m}__pin--start`),this.endColumns=t.querySelector("thead").getElementsByClassName(`${m}__pin--end`),this.topRows=t.getElementsByClassName(`${m}__pin--top`),this.bottomRows=t.getElementsByClassName(`${m}__pin--bottom`),this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t,this.handlePinnedStartChange()}_pinnedStart=[];addStyleSheet(t,n){const e=this.tableEle.getRootNode(),o=e.getElementById(t)||document.createElement("style");o.id=t,o.innerHTML=n,o.isConnected||(e.head?e.head.append(o):e.append(o))}handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${m}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);this.addStyleSheet(`${this.tableId}-col-start-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) {\n            --pin-start-active: 1;\n          }\n        `)}else this.tableEle.classList.remove(`${m}__pinned--start`),this.addStyleSheet(`${this.tableId}-col-start-active-style`,"")}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t,this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${m}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);this.addStyleSheet(`${this.tableId}-col-end-active-style`,`\n          #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n        `)}else this.tableEle.classList.remove(`${m}__pinned--end`),this.addStyleSheet(`${this.tableId}-col-end-active-style`,"")}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){t!==this._cssColDimensionCacheKey&&(this._cssColDimensionCacheKey=t,this.createPinnedColDimensionStyles())}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0,n=0;const e=Array.from(this.startColumns),o=Array.from(this.endColumns).reverse(),i=`\n      ${e.map((n=>{const e=this.cachedColMeta.get(n);return t+=e.width-1||-1,`\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n            #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n              --pin-start: ${t-1}px;\n            }\n          `})).join("")}\n      ${o.map((t=>{const e=this.cachedColMeta.get(t);return n+=e.width-1||-1,`\n            #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n            #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n              --pin-end: ${n-1}px;\n            }\n          `})).join("")}\n    `;this.addStyleSheet(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t,o=n;return this.scrollElement===document.documentElement&&(e=this.scrollElement.offsetLeft,o=this.scrollElement.offsetTop),{offsetX:e,offsetY:o}}assessRows(){if((this.topRows.length||this.bottomRows.length)&&(this.topRows.length&&a((async()=>{let t,n=0;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:a}=o.getBoundingClientRect(),r=o.parentElement,l=getComputedStyle(o).getPropertyValue("--pin-top"),h=""!==l?parseFloat(l):n;s((()=>{i-e<=h?o.classList.add(`${m}__pinned`,`${m}__pinned--top`):o.classList.remove(`${m}__pinned`,`${m}__pinned--top`),t!==r&&(r.style.setProperty("--pin-top",n-1+"px"),n+=a-1,t=r)}))}})),this.bottomRows.length)){const t=Array.from(this.bottomRows).reverse();a((async()=>{let n,e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:a}=i.getBoundingClientRect(),r=i.parentElement,l=getComputedStyle(i).getPropertyValue("--pin-bottom"),h=""!==l?parseFloat(l):e;await new Promise((l=>s((()=>{this.tableDims.height+o-(t+a)<=h?i.classList.add(`${m}__pinned`,`${m}__pinned--bottom`):i.classList.remove(`${m}__pinned`,`${m}__pinned--bottom`),n!==r&&(r.style.setProperty("--pin-bottom",e-1+"px"),e+=a-1,n=r),l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t,n,e;const o=new Promise((o=>{this.startColumns.length&&a((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns)t=o.getBoundingClientRect(),this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)}),n=this.pinnedStart.find((t=>t===o)),t.x<s?n||(this.pinnedStart=[...this.pinnedStart,o]):n&&(this.pinnedStart=this.pinnedStart.filter((t=>t!==o))),s+=t.width;this.endColumns.length||o()})),this.endColumns.length&&a((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let a=0;for(const o of i)t=o.getBoundingClientRect(),this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)}),n=this.pinnedEnd.find((t=>t===o)),this.tableDims.width+s-t.right<=a?n||(this.pinnedEnd=[o,...this.pinnedEnd]):n&&(this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))),a+=t.width;o()}))}));await o,this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){this.cacheX!==t.x&&(this.cacheX=t.x,this.assessCols()),this.cacheY!==t.y&&(this.cacheY=t.y,this.assessRows())}onResize(){this.tableDims={width:this.scrollElement.clientWidth,height:this.scrollElement.clientHeight},this.assessCols(),this.assessRows()}}let X=0;const Z=class{constructor(t){r(this,t),this.nanoTblReady=l(this,"nanoTblReady",7),this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7),this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7),this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7),this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7),this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7),this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7),this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7),this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7),this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;scrollable=!1;caption;showCaption=!1;loading=void 0;get _loading(){return void 0!==this.loading?this.loading:this.internalLoading}set _loading(t){void 0===this.loading&&this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=!0;placeholderSize=10;rows;handleRowsChange(){this.rows?(this._loading=!0,Promise.resolve(this.rows).then((async t=>{await function(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns,i=o.filter((t=>"date"===t.type)).reduce(((t,n)=>[...t,n.prop]),[]),s=o.filter((t=>!t.type));return n=n.map(((t,n)=>(s.length&&0===n&&(e.config.state.columns=o.map((n=>{var e;return s.includes(n)&&t[n.prop]&&!n.type&&(n.type=(e=t[n.prop])instanceof Date?"date":["number","string","boolean"].includes(typeof e)?typeof e:"unknown","date"===n.type&&i.push(n.prop)),n}))),i.forEach((n=>{const e=new Date(t[n]);e&&Number(e)&&(t[n]=Number(e))})),t.__index=n,t.__uuid=p(o.map((n=>t[n.prop])).join()),t))),e.data.state.rows=n,e.general.state.workerId?R(e.general.state.workerId,n):void 0}(this.host,t),this.customFilterApplied?this.customFilterApplied=!1:this.currentFilters="",this.currentSort="",await this.columnInit(),this.isReady||requestAnimationFrame((()=>this.setInitialBlockDimension())),this._loading=!1,this.tablePinnedService&&this.tablePinnedService.assessRows()}))):this._loading=!0}columns=[];async handleColsChange(){await function(t,n){const e=P.get(t);if(e)return e.config.state.columns=n,e.general.state.workerId?T(e.general.state.workerId,D(n)):void 0}(this.host,this.columns),this.isReady&&this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=!1;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=!0;handleSearchTermChange(){this.searchStart()}showPaginateSpinner=!1;virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(t)return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){return this.filters=[],this.filterStart()}async addFilters(t,n=!0){return n||(this.filters=[]),this.filterStart(t,n)}async removeFilters(t){return this.filters=this.filters.filter((n=>!t.includes(n.prop))),this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t),this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+X++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;activeWatcherIo;tablePinnedService;customFilterApplied=!1;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n,this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){t!==this._scrollParent&&(this._scrollParent&&(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler),(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler),this._scrollParent=t)}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){this._primaryBlockIndex!==t&&(this._primaryBlockIndex=t,this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length}))}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){t!==this._isReady&&(this._isReady=t,this.isReady&&requestAnimationFrame((()=>this.handleReady())))}_isReady=!1;handleReady(){const t=window.location.hash;if(t.length>1)try{const n=document.querySelector(t);n&&n.scrollIntoView()}catch(t){}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort!==t+":"+n&&(this._loading=!0,!this.nanoTblBeforeSort.emit({column:n,order:t}).defaultPrevented)){if(this.currentSort=t+":"+n,this.scrollToTop(e),this.customSortFn)try{if(!0===await this.customSortFn(n,t))return this.sortComplete(t,n),void(this._loading=!1)}catch(t){return console.warn("custom sort failed",t),this.currentSort="",void(this._loading=!1)}try{await async function(t,n,e){const o=P.get(t);if(o&&o.general.state.workerId)try{o.data.state.rows=await B(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}(this.host,n,t),this.sortComplete(t,n)}catch(t){console.warn("sort failed",t),this.currentSort=""}finally{this.blocks.length&&(this._loading=!1)}}};sortComplete(t,n){this.columns=this.columns.map((e=>e.prop===n?{...e,order:t}:{...e,order:null})),this.nanoTblAfterSort.emit({column:n,order:t})}async searchStart(){if(this._loading=!0,!this.nanoTblBeforeSearch.emit({term:this.searchTerm}).defaultPrevented){this.scrollToTop();try{await async function(t,n){const e=P.get(t);if(e&&e.general.state.workerId)try{e.data.state.rows=await F(e.general.state.workerId,n)}catch(t){console.warn(t)}}(this.host,this.searchTerm),this.nanoTblAfterSearch.emit({term:this.searchTerm})}catch(t){console.warn("search failed",t)}finally{this._loading=!1}}}async filterStart(t,n=!0){if(t&&(this.filters=n?[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]:t),this.currentFilters!==JSON.stringify(this.filters)&&(this._loading=!0,!this.nanoTblBeforeFilter.emit({filters:this.filters}).defaultPrevented)){if(this.currentFilters=JSON.stringify(this.filters),this.scrollToTop(),this.customFilterFn)try{if(!0===await this.customFilterFn(this.filters))return this.customFilterApplied=!0,await this.filterComplete(),void(this._loading=!1)}catch(t){return console.warn("custom filter failed",t),this.currentFilters="",void(this._loading=!1)}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=!1}}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));return n&&("boolean"!=typeof n.filter&&n.filter.length||"boolean"==typeof n.filter)?t.filter=n.filter:(null!=t.filter||t.filter&&"boolean"!=typeof t.filter&&!t.filter.length)&&(t.filter=void 0),t})),await async function(t,n){const e=P.get(t);if(e&&e.general.state.workerId)try{e.data.state.rows=await I(e.general.state.workerId,n)}catch(t){console.warn(t)}}(this.host,this.filters),this.nanoTblAfterFilter.emit({filters:this.filters})}scrollToTop(t){if(!this.scrollParent)return;const n=this.scrollParent.style?.scrollBehavior,e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto",this.topAnchorEle&&!_(this.topAnchorEle,.1)&&this.host.scrollIntoView(),t&&!_(t,1)&&setTimeout((()=>t.scrollIntoView({block:"start"})),500),e&&(this.scrollParent.scrollLeft=e),n&&(this.scrollParent.style.scrollBehavior=n),this.scrollHandler()}setMeasureElement(){return new Promise((t=>{a((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${m}__inactive`))),t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;const t=async()=>(await this.setMeasureElement(),!!this.unitHeight);new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{await t()&&(n(),e.disconnect())}),{root:this.scrollParent});e.observe(this.tableEle)}}))})).then((()=>{requestAnimationFrame((()=>this.isReady=!0))}))}async columnInit(){this.filters=this.columns.filter((t=>null!=t.filter)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}})),this.searchTerm&&await this.searchStart(),this.filters.length&&await this.filterStart();const t=this.columns.find((t=>!!t.order));t&&await this.sortStart(t.order,t.prop),this.tablePinnedService&&this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length)return void(this.blocks=[]);let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(;n<=e;n++)o.push(this.store.data.state.rows[n-1]||{__uuid:""}),n%this.perBlock==0&&(i.push({rows:o,__uuid:p(o.map((t=>t.__uuid)).join())}),o=[]);o.length&&i.push({rows:o,__uuid:p(o.map((t=>t.__uuid)).join())}),this.blocks=i}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;return n===this.perBlock&&this.measureHeight?this.measureHeight:this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];n&&a((()=>{if(n.classList.contains(`${m}__inactive`))return;const e=n.getBoundingClientRect().height,o=this.blockHeights.findIndex((n=>n.blockIndex===t));o>-1?this.blockHeights[o]={height:e,blockIndex:t}:this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;this.store?.general.state.isActive&&this.rows&&(void 0===this.primaryBlockIndex&&(this.primaryBlockIndex=0),a((()=>{t=void 0!==this.scrollParent.scrollTop?this.scrollParent.scrollTop:window.scrollY,t+=this.host.offsetTop,this.tablePinnedService&&this.tablePinnedService.onScroll({x:void 0!==this.scrollParent.scrollLeft?this.scrollParent.scrollLeft:window.scrollX,y:t});let n=this.host.offsetTop,e=0;const o=this.blocks.length;for(;e<o&&t>=n;){if(n+=this.getBlockHeight(e),t<n){const t=[e,e+1];t.toString()!==this.activeBlocks.toString()&&(this.activeBlocks=t),this.primaryBlockIndex=e}e++}})))};processSlots(){this.caption||this.host.querySelector('[slot="caption"]')||console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}setupActiveWatcher(){this.host&&this.scrollParent&&this.store&&(this.activeWatcherIo&&(this.activeWatcherIo.disconnect(),this.activeWatcherIo=void 0),(this.activeWatcherIo=new IntersectionObserver((([t])=>{this.store.general.state.isActive=!!t.isIntersecting}),{root:this.scrollParent,threshold:0})).observe(this.scrollable?this.tableEle:this.host))}async componentWillLoad(){this.store=await async function(t,n,e,o){const i={data:f({rows:[]}),config:f({columns:n}),general:f({workerId:null,scrollParent:e,host:t,isReady:o})},s=await S(i.data.state.rows,D(i.config.state.columns));return i.general.state.workerId=s,P.set(t,i),i.data.use({reset:()=>{i.general.state.workerId&&R(i.general.state.workerId,null)},dispose:()=>{i.general.state.workerId&&R(i.general.state.workerId,null)}}),i.config.use({reset:()=>{i.general.state.workerId&&T(i.general.state.workerId,null)},dispose:()=>{i.general.state.workerId&&T(i.general.state.workerId,null)}}),i}(this.host,this.columns,this.scrollParent,this.isReady),this.handleRowsChange(),this.store.general.onChange("isActive",(()=>{this.scrollHandler()})),this.store.data.onChange("rows",(()=>this.setBlocks())),this.processSlots(),this.setBlocks(),this.scrollable||(this.scrollParent=u(this.host),this.setupActiveWatcher())}connectedCallback(){this.scrollable||(this.scrollParent=u(this.host),this.setupActiveWatcher())}componentDidLoad(){this.setInitialBlockDimension(),this.scrollable&&(this.scrollParent=this.host.querySelector(d("nano-masked-overflow")).shadowRoot.querySelector(".onav__scroller"),this.setupActiveWatcher()),this.tablePinnedService||(this.tablePinnedService=new J(this.tableEle,this.scrollParent))}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return!1}componentWillRender(){}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()))}disconnectedCallback(){this.activeWatcherIo&&(this.activeWatcherIo.disconnect(),this.activeWatcherIo=void 0,(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler))}render(){return this.blockElements=[],c(h,{class:"nano-data-table"},c("div",{class:`${m}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),c("nano-resize-observe",{onNanoResize:()=>{this.tablePinnedService&&this.tablePinnedService.onResize()}}),(t=>this.scrollable?c("nano-masked-overflow",{hideScrollbars:!1,scrollControls:!1,label:this.caption},t):c("div",null,t))(c("div",{class:`${m}__wrap`},c("nano-progress-bar",{class:{[`${m}__progress-bar`]:!0,[`${m}__progress-bar--show`]:this._loading}},c("progress",null)),c("table",{"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${m}`,ref:t=>this.tableEle=t,id:"nano-data-table-"+this.renderId,"aria-busy":this._loading||void 0},c("caption",{class:{[`${m}__caption`]:!0,[`${m}__caption--hide`]:!this.showCaption}},c("slot",{name:"caption"},this.caption)),c("thead",null,c(q,{rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[c(W,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&c("tbody",{class:`${m}__active ${m}__loading`},[...Array(this.placeholderSize).keys()].map((t=>c("tr",null,this.store.config.state.columns.map(((n,e)=>c(L,{rowIndex:t,colIndex:e,nestedContent:()=>c("span",{class:"n-loader-skeleton"},c("span",null,"Content loading"))}))))))),c("tr",{hidden:!!this._loading||!!this.blocks.length},c("th",{class:`${m}__th`,colSpan:this.store.config.state.columns.length},c("div",{class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},c("slot",{name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>c("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${m}__inactive`]:!this.activeBlocks.includes(n),[`${m}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return c(K,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>c(L,{rowIndex:o,colIndex:n}))))})):c("tr",{class:`${m}__tr--placeholder`},c("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&c("tfoot",null,c(q,{rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[c(W,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&this.showPaginateSpinner&&c("nano-spinner",{class:{[`${m}__spinner`]:!0,[`${m}__spinner--show`]:this._loading}}))))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};Z.style=':host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }.nano-data-table {\n  /**\n   * @prop --table-padding. The padding of the table cells. Defaults to `var(--table-compact-padding)`\n   * @prop --table-border-color. The border color of the table cells. Defaults to `var(--nano-color-neutral-200)`\n   * @prop --table-border-color-header. The border color of the table header and footer cells. Defaults to `var(--nano-color-primary-1000)`\n   * @prop --table-background. The background color of the table cells. Defaults to `var(--nano-color-base-0)`\n   * @prop --table-max-col-width. The maximum width of the table columns. Defaults to `clamp(200px, 500px, 50vw)`\n   * @prop --table-ordered-bg. The background color of the ordered table rows. Defaults to `var(--nano-color-neutral-100)`\n   * @prop --table-wrapper-max-height: maximum height of the table when table is scrollable. Defaults to 80vh;\n   * @prop --table-wrapper-max-width: maximum width of the table when table is scrollable. Defaults to 100%;\n   */\n  --table-padding: var(--nano-spacing-sm) calc(var(--nano-spacing-md) - (var(--nano-spacing-md) / 3));\n  --table-border-color: var(--nano-color-neutral-200);\n  --table-border-color-header: var(--nano-color-primary-1000);\n  --table-background: var(--nano-color-base-0);\n  --table-max-col-width: clamp(200px, 500px, 50vw);\n  --table-ordered-bg: var(--nano-color-neutral-100);\n  --table-wrapper-max-height: 80vh;\n  --table-wrapper-max-width: 100%;\n  display: block;\n  inline-size: 100%;\n  color: var(--nano-color-neutral-1400);\n  container-type: inline-size;\n  --isLtR: 1;\n}\n.nano-data-table:dir(rtl) {\n  --isLtR: -1;\n}\n.nano-data-table .nano-sortable__dragged {\n  background: var(--nano-color-base-0);\n  opacity: 0.9;\n  box-shadow: var(--nano-shadow-l0);\n  z-index: 10 !important;\n}\n\n.nano-tbl__wrap {\n  display: table;\n  min-inline-size: 100%;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap {\n  max-inline-size: var(--table-wrapper-max-width);\n  max-block-size: var(--table-wrapper-max-height);\n  position: relative;\n  display: block;\n}\n.nano-data-table:not([scrollable=false]) .nano-tbl__wrap table {\n  margin-block-end: var(--nano-spacing-l);\n}\n\n.nano-data-table:not([scrollable=false]) .nano-masked-overflow {\n  --fade-size: 30px;\n}\n.nano-data-table:not([scrollable=false]):has(.nano-tbl__pin--start, .nano-tbl__pin--end) .nano-masked-overflow {\n  --fade-size: 0;\n}\n\n.nano-tbl {\n  text-align: start;\n  inline-size: 100%;\n  border-spacing: 0 0;\n  border-collapse: separate;\n  border-inline-end: 1px solid transparent;\n  border-block-start: 1px solid transparent;\n  position: relative;\n  z-index: 1;\n}\n.nano-tbl__top-anchor {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n  position: relative;\n}\n.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg);\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__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: var(--nano-spacing-sm);\n  align-items: center;\n  inline-size: 100%;\n}\n.nano-tbl__order-btn:focus-visible {\n  outline: var(--nano-focus-ring);\n  outline-offset: var(--nano-focus-ring-offset);\n}\n.nano-tbl__status-icons {\n  margin-inline: auto 10px;\n  display: flex;\n  gap: 10px;\n}\n.nano-tbl__progress-bar {\n  --height: 0.2125rem;\n  position: sticky;\n  inset-block-start: 0;\n  inset-inline: 0;\n  z-index: 10;\n  transition: transform 0.25s;\n  transform: scale(0);\n  inline-size: 100%;\n}\n.nano-tbl__progress-bar--show {\n  transform: scale(1);\n}\n.nano-tbl__caption--hide {\n  clip-path: inset(50%);\n  block-size: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  inline-size: 1px;\n}\n.nano-tbl__td, .nano-tbl__th {\n  max-inline-size: var(--table-max-col-width);\n}\nthead .nano-tbl__td .nano-sortable__keyboard-handle, thead .nano-tbl__th .nano-sortable__keyboard-handle {\n  position: absolute;\n  inset-inline-end: 5px;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  background: white;\n  z-index: 10;\n}\n.nano-tbl__td.nano-tbl__ordered, .nano-tbl__th.nano-tbl__ordered {\n  background-color: var(--table-ordered-bg) !important;\n  --table-border-color: var(--nano-color-neutral-300);\n}\n.nano-tbl__cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.nano-tbl__cell-content--no-result {\n  padding-block: var(--nano-spacing-md);\n}\n.nano-tbl__cell-content--wrap {\n  white-space: normal;\n  overflow: visible;\n}\n.nano-tbl tbody {\n  opacity: 1;\n  transition: 0.1s ease opacity;\n}\n.nano-tbl tbody.nano-tbl__loading {\n  z-index: -1;\n  position: relative;\n}\n.nano-tbl tbody.nano-tbl__inactive {\n  opacity: 0;\n}\n.nano-tbl tbody .nano-tbl__tr:has(~ .nano-tbl__tr--placeholder) {\n  display: none;\n}\n.nano-tbl tbody .nano-tbl__tr--placeholder ~ .nano-tbl__tr {\n  display: none;\n}\n.nano-tbl th[scope=row] {\n  margin: 0;\n}\n.nano-tbl__tr {\n  --base-z: 0;\n}\n.nano-tbl__pin {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin .nano-tbl__th, .nano-tbl__pin .nano-tbl__td {\n  z-index: var(--z, var(--base-z, 0));\n}\n.nano-tbl__pin--start {\n  position: sticky;\n  inset-inline-start: var(--pin-start, -1px);\n}\n.nano-tbl__pin--start::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-start-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--start .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 3) !important;\n}\n.nano-tbl__pin--end {\n  position: sticky;\n  inset-inline-end: var(--pin-end, -1px);\n  max-inline-size: min(50vw, 200px);\n}\n@container (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n@media (width <= 500px) {\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end {\n    --z: 0 !important;\n    inset-inline-end: auto !important;\n  }\n  .nano-tbl__pin--start ~ .nano-tbl__pin--end::after {\n    display: none !important;\n  }\n}\n.nano-tbl__pin--end::after {\n  display: block;\n  content: "";\n  position: absolute;\n  inset: 0;\n  box-shadow: calc(-4px * var(--isLtR)) 0 4px -3px rgb(var(--nano-color-base-rgb-1000)/25%);\n  opacity: var(--pin-end-active, 0);\n  z-index: -1;\n}\n.nano-tbl__pinned--end .nano-tbl__pin--end {\n  --z: calc(var(--base-z) + 2);\n}\n.nano-tbl__pin--top .nano-tbl__th, .nano-tbl__pin--top .nano-tbl__td {\n  position: sticky;\n  inset-block-start: var(--pin-top, -1px);\n}\n.nano-tbl__pin--top .nano-tbl__pin--end, .nano-tbl__pin--top .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--top.nano-tbl__pinned--top {\n  --base-z: 4;\n}\ntbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th, tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td {\n  border-block-end: 1px solid var(--table-border-color-header);\n}\n.nano-tbl__pin--bottom .nano-tbl__th, .nano-tbl__pin--bottom .nano-tbl__td {\n  position: sticky;\n  inset-block-end: var(--pin-bottom, -1px);\n}\n.nano-tbl__pin--bottom .nano-tbl__pin--end, .nano-tbl__pin--bottom .nano-tbl__pin--start {\n  --z: calc(var(--base-z) + 1);\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom {\n  --base-z: 5;\n}\n.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin {\n  --base-z: 6;\n}\ntbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th, tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td {\n  border-block-start: 1px solid var(--table-border-color-header);\n}\n.nano-tbl thead tr:last-of-type td,\n.nano-tbl thead tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n}\n.nano-tbl tfoot tr:first-of-type td,\n.nano-tbl tfoot tr:first-of-type th {\n  border-block-start: none;\n}\n.nano-tbl tfoot tr:last-of-type td,\n.nano-tbl tfoot tr:last-of-type th {\n  border-block-end: 2px solid var(--table-border-color-header);\n  border-block-start: 2px solid var(--table-border-color-header);\n}\n.nano-tbl .unlimited-width {\n  max-inline-size: none;\n}\n.nano-tbl__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: 0;\n}\n.nano-tbl__spinner--show {\n  scale: 1;\n  position: sticky;\n}';export{Z as N,$ as c}

package/dist/nano-components/nano-data-table.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-export{N as nano_data_table}from"./nano-data-table-B3_-hFqj.js";import"./index-BM3Om9WE.js";import"./renderer-DpNDfhNy.js";import"./math-BEqsTfVK.js";import"./throttle-C93FMm2Z.js";import"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";import"./index-BlBZYxu4.js";
+export{N as nano_data_table}from"./nano-data-table-BXdzSqWC.js";import"./index-BM3Om9WE.js";import"./renderer-DpNDfhNy.js";import"./math-BEqsTfVK.js";import"./throttle-C93FMm2Z.js";import"./scroll-1nFw8CNk.js";import"./dom-dlicJTEJ.js";import"./index-BlBZYxu4.js";

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{g as t,r as i,c as e,d as n,a as o}from"./index-BM3Om9WE.js";import{t as s,h as a}from"./renderer-DpNDfhNy.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as d}from"./dom-dlicJTEJ.js";let l=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+l++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown.open=this.open,this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(d(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key)?"Tab"===t.key&&(this.shouldOpen=!1):"select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout?this.open&&["ArrowDown","ArrowUp"].includes(t.key)?this.listBox.setFocus():(this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)):(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.handleOptionsChange(),this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"269f57e6eccd251685f84a94d53f380d6545a3cb",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"ee6398b356dc1a0ff9fa35e84955314fc95435b6",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"f80006a5ba62c227094da52672b4abf6ee6335dc",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"8a2d3160b990c99baeaf4fd9bdd7bb04229d642c",name:"list-top"}),a("slot",{key:"2230e4458be0998d59d18250e1d22188baf2f6b1"}),a("slot",{key:"fca84cbd01495e4b62ba95c4c07681f506939d3f",name:"internal-opts"}),a("slot",{key:"076fd81c15f5ac6590e5311503262a07f60e8454",name:"list-bottom"})),a("nano-menu",{key:"d4878bc502b4fcc0de01f67b5065ad017f445f75",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"2ac583af3ac8b24ace627637ab86471999df9465",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"4971780255baf694fcc447756ca02e1115ece871",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-neutral-1000);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return d(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-400);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const b=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{c as nano_datalist,u as nano_option,b as nano_tag}
+import{g as t,r as i,c as e,d as n,a as o}from"./index-BM3Om9WE.js";import{t as s,h as a}from"./renderer-DpNDfhNy.js";import{g as r}from"./active-element-CKJIkX0R.js";import{d as h}from"./throttle-C93FMm2Z.js";import{g as d}from"./dom-dlicJTEJ.js";let l=0;const c=class{isNanoInput=!1;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId="nano-datalist-"+l++;isFiltered=!1;shouldFocus=!1;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t,this.connectedInput?.value||t.forEach((t=>{t.selected&&!this.selected.includes(t.value)&&this.changeInputValue(t)}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=!0;optionIds=[];constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.nanoDeselect=e(this,"nanoDeselect",7),this.nanoOptionsUpdated=e(this,"nanoOptionsUpdated",7),this.inputChange=h(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=!1;openWatcher(){n((()=>{if(this.open&&this.nanoDropdown.tetherTo){const{height:t,top:i}=this.nanoDropdown.tetherTo.getBoundingClientRect();this.nanoDropdown.style.setProperty("--max-height",`max(${window.innerHeight-(t+i+40)}px, 48vw)`)}this.nanoDropdown.open=this.open,this.connectedInput&&this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=!1;disabled=!1;async watchInputChange(){let t;(t=this.host.closest(s("nano-input")))?(this.isNanoInput=!0,this.connectedInput=await t.getInputElement()):this.input&&"string"==typeof this.input&&(t=document.querySelector(this.input))?(this.isNanoInput=!1,this.connectedInput=t):"object"==typeof this.input&&(this.connectedInput=this.input)}handleOptionsChange(){if(this.host)if(d(this.host,":not(nano-nav-item):not(nano-option):not([role])",!0).forEach((t=>t.setAttribute("role","none"))),this.options&&this.options.length||this.mo){if(this.options?.length){this.mo&&(this.mo.disconnect(),this.mo=void 0);const t=this.host.querySelectorAll(s("nano-option"));n((()=>{t?.length&&t.forEach((t=>t.remove())),this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement(s("nano-option")),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});return this.host.append(e),e}})),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=[...this.allOptEles]}))}}else(this.mo=new MutationObserver((()=>this.processSlottedContent()))).observe(this.host,{childList:!0,subtree:!0}),this.processSlottedContent()}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:!1},i="both",e=!1;switch(this.type){case"input":t={closeOnSelect:!0};break;case"select":i="list",e=!0,t={closeOnSelect:!0}}this.isNanoInput||(t.tetherTo=this.connectedInput),this.dropDownConfig={...this.dropDownConfig,...t},this.connectedInput.setAttribute("aria-autocomplete",i),this.connectedInput.readOnly=e}manageInputEvents(t,i){if(i){const t=i.closest(s("nano-input"));t&&t.removeEventListener("nanoChange",this.inputChange),this.removeEventListeners(i),this.inputLabel=null,n((()=>{i.removeAttribute("role"),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-controls"),i.removeAttribute("aria-owns"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-autocomplete"),i.removeAttribute("autocomplete")}))}if(t){const i=t.closest(s("nano-input"));i&&i.addEventListener("nanoChange",this.inputChange),t.addEventListener("change",this.inputChange),t.addEventListener("click",this.inputClick),t.addEventListener("keydown",this.inputKeydown),t.addEventListener("input",this.inputChange),this.listId=this.host.id||this.listId,this.inputLabel=t?.labels?.item(0)||function(t){let i;return t.id&&(i=document.querySelector(`label[for='${t.id}']`)),i||(i=t.closest("label")),i}(t),n((()=>{this.host.id=this.listId,t.setAttribute("role","combobox"),t.setAttribute("aria-expanded","false"),t.setAttribute("aria-controls",this.listId),t.setAttribute("aria-owns",this.listId),t.setAttribute("aria-haspopup","listbox"),t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const i=this.connectedInput?.value||"",e=[];n((()=>{this.allOptEles.forEach(((n,o)=>{this.actvOptEles.includes(n)?(t++,n.setAttribute("aria-posinset",t+""),n.setAttribute("aria-setsize",this.actvOptEles.length+""),n.hidden=!1,this.isSelected(n,i)):(n.removeAttribute("aria-posinset"),n.removeAttribute("aria-setsize"),n.hidden=!0,n.selected=!1),n.id=this.listId+"-option-"+o,e.push(n.id)})),this.optionIds=e}))}manageCanOpen(){this.canOpen=!(!this.actvOptEles.length&&!this.hasNoResult)}manageDropdownDisplay(){this.shouldOpen&&this.canOpen&&!this.disabled&&(this.open=!0),this.shouldOpen&&this.canOpen||(this.open=!1),this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,i){t&&(t.selected=!(i!==t.value&&!this.selected.includes(t.value)))}get dropwdownOpen(){return!(!this.nanoDropdown||!this.open)}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let i;if(this.selected.includes(t.value)?(this.selected=this.selected.filter((i=>i!==t.value)),i=this.nanoDeselect.emit(t)):(this.selected=[...this.selected],i=this.nanoSelect.emit(t)),!i.defaultPrevented){this.connectedInput&&(this.connectedInput.value=t.value);const i=new window.Event("change");this.connectedInput?.dispatchEvent(i)}}optSelected=t=>{t.stopPropagation(),this.changeInputValue(t.detail),requestAnimationFrame((()=>this.inputChange())),"selectMulti"!==this.type&&(this.shouldOpen=!1)};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect,i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));i&&this.changeInputValue(i)}removeEventListeners(t){const i=t.closest(s("nano-input"));i&&i.removeEventListener("nanoChange",this.inputChange),t.removeEventListener("change",this.inputChange),t.removeEventListener("click",this.inputClick),t.removeEventListener("keydown",this.inputKeydown),t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(s("nano-option"))),this.hasNoResult=!!this.host.querySelector('[slot="no-result"]'),this.connectedInput?.value.length&&"select"!==this.type?this.inputChange():this.actvOptEles=this.allOptEles}))}handleShow=async()=>{this.shouldFocus?(this.shouldFocus=!1,this.listBox.setFocus()):"select"===this.type&&this.listBox.showActiveElement()};handleHide=()=>{this.open=!1,r().closest(this.host.tagName.toLowerCase())&&this.connectedInput.select()};inputChange(){if(!this.connectedInput)return;if(this.disableFilter)return void(this.actvOptEles=this.allOptEles);const t=this.connectedInput?.value,i=t.trim().toLowerCase();let e=!1;const n=[],o=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{t!==i.value&&t!==i.label||"selectMulti"===this.type?this.isSelected(i,t):(i.selected=!0,e=!0)})),this.allOptEles.forEach((t=>{(!i.length||e||t.value.trim().length>0&&!t.disabled&&(o(t.textContent)||o(t.value)||o(t.label)||o(t.filterMeta)))&&n.push(t)})),this.isFiltered=i.length&&!e,this.actvOptEles=n}inputClick=()=>{this.open||(this.shouldOpen=!0,this.manageDropdownDisplay())};inputKeydown=t=>{["Shift","ArrowRight","ArrowLeft","Escape","Tab"].includes(t.key)?"Tab"===t.key&&(this.shouldOpen=!1):"select"!==this.type||["ArrowDown","ArrowUp","Enter"].includes(t.key)||" "===t.key&&!this.typeToSelectTimeout?this.open&&["ArrowDown","ArrowUp"].includes(t.key)?this.listBox.setFocus():(this.shouldOpen=!0,this.manageDropdownDisplay(),["ArrowDown","ArrowUp","Enter"].includes(t.key)&&(t.preventDefault(),this.shouldFocus=!0)):(" "===t.key||/^[a-zA0-9]+$/i.test(t.key))&&(clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="",this.typeToSelectTimeout=0}),750),this.typeToSelect+=t.key,this.setOptStartsWith())};optionKeyDown=t=>{["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "].includes(t.key)?"Escape"===t.key&&this.connectedInput.focus():"select"===this.type||this.exactMatch&&!["Delete","Backspace"].includes(t.key)||this.connectedInput.focus()};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.handleOptionsChange(),this.openWatcher()}componentDidRender(){setTimeout((()=>{!this.connectedInput&&this.host.isConnected&&console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.connectedInput&&(this.connectedInput=void 0)}render(){return a(o,{key:"8acb3be76246d665171db96444cff3a5141e1132",class:"nano-datalist",role:this.actvOptEles.length?"listbox":void 0,"aria-owns":this.optionIds.length?this.optionIds.join(" "):void 0,"aria-label":this.optionIds.length?"Select options from the list below":void 0},a("nano-dropdown",{key:"56c051873a20a3dab17a36eec1a2f040f83247fa",part:"dropdown",exportparts:"trigger:dropdown__trigger, panel:dropdown__panel",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:!0,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"7559b648617c8d32f61c670e4dc78c0d60d36dc4",part:"main-menu",ref:t=>this.listBox=t,hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:void 0,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown},a("slot",{key:"02bd8ba511db314637e8991d29234a22967cf27d",name:"list-top"}),a("slot",{key:"cb0234e0dd103293c1f1292af62575dd766af730"}),a("slot",{key:"0adac42b20ee0338de74217e6e91c00be6b5b6a7",name:"internal-opts"}),a("slot",{key:"906255e4e6fdc87fa8bf6e278ad076f179553925",name:"list-bottom"})),a("nano-menu",{key:"9aa978054227c9bb928c06ce93303ceda48cbf29",part:"no-result-menu",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:!0,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};c.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-neutral-1000);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";let p=0;const u=class{optId="nano-option-"+p++;get host(){return t(this)}constructor(t){i(this,t),this.nanoSelect=e(this,"nanoSelect",7),this.handleClick=h(this.handleClick.bind(this),5)}value="";valueChanged(){this.value&&this.value.length||this.label||(this.value=this.labelContent)}label="";labelChanged(){this.label&&this.label.length||(this.label=this.labelContent.length?this.labelContent:this.value)}selected=!1;disabled=!1;filterMeta="";href;nanoSelect;handleKeyDown(t){this.disabled||this.href||("Enter"===t.key&&this.nanoSelect.emit(this.host)," "===t.key&&t.preventDefault())}handleClick(){this.disabled||this.href||this.nanoSelect.emit(this.host)}get labelContent(){return d(this.host,"*:not([slot])",!1).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged(),this.labelChanged()}render(){return a(o,{key:"193c0fa2c765f3bed98dd18261c615c3171c97d4",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a(this.href?"a":"div",{key:"0a6c64fbec219970a4bd7d28e177176cf36b9d27",href:this.href||void 0,onMouseDown:this.handleClick,id:this.optId,class:{option:!0,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"6e6aceb3acd0b854562b0de41b905b013f5ea71c",part:"check-icon",class:"option__check"},a("slot",{key:"82770c1ddc501f2d8dde42c14827fd596fd30172",name:"check-icon"},a("nano-icon",{key:"a25365aa49a3694fa1c956f5645e48fe904c4e19",name:"light/check","aria-hidden":"true"}))),a("div",{key:"9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6",part:"start",class:"option__start"},a("slot",{key:"194a2647aeaeeac8d8268e1386dba7feabb16d40",name:"start"})),a("div",{key:"4eb3a838d9510432b5614e0de0e958b45d132cc5",part:"label",class:"option__label"},a("slot",{key:"6db178c30cd08c9a15ed6c5996d263da86d28285"},this.label||this.value)),a("div",{key:"aac32437be089e438b419545d2659778de1119f2",part:"end",class:"option__end"},a("slot",{key:"c108eff1c579522f4ead3e2fc157930bc329ceb2",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-400);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const b=class{constructor(t){i(this,t),this.nanoClose=e(this,"nanoClose",7)}closable=!1;size="regular";selected=!1;get el(){return t(this)}nanoClose;onKeyDown=t=>{switch(t.key){case"Enter":case" ":t.preventDefault(),this.close()}};handleClick=()=>{this.close()};close(){this.nanoClose.emit()}containsAnchor=()=>!!this.el.querySelector("a");render(){return this.closable&&!this.containsAnchor()?[a("slot",null),a("nano-icon-button",{label:"Close","icon-name":"light/xmark-large",onKeyDown:this.onKeyDown,onClick:this.handleClick})]:a("slot",null)}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";export{c as nano_datalist,u as nano_option,b as nano_tag}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as e,a as i}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DpNDfhNy.js";import{H as a}from"./slot-D31cEKyt.js";import"./dom-dlicJTEJ.js";const o=class{constructor(i){t(this,i),this.nanoOpen=e(this,"nanoOpen",7),this.nanoClose=e(this,"nanoClose",7),this.nanoAfterOpen=e(this,"nanoAfterOpen",7),this.nanoAfterClose=e(this,"nanoAfterClose",7)}mo;stateChanging=!1;slotCtrl=new a(this,"icon-start","icon-end","icon-collapse","icon-expand");detailsEl;headerEl;_bodyEl;get bodyEl(){return this._bodyEl}set bodyEl(t){this.bodyEl&&this.bodyEl===this._bodyEl||(this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd),t.addEventListener("transitionend",this.handleTransitionEnd),this._bodyEl=t)}label="";open=!1;disabled=!1;size="medium";nanoOpen;nanoClose;nanoAfterOpen;nanoAfterClose;toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}onKeyDown=t=>{if(!this.stateChanging&&!this.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),this.open=!this.open;break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.open=!1;break;case"ArrowDown":case"ArrowRight":t.preventDefault(),this.open=!0}};onMouseDown=t=>{t.preventDefault(),this.headerEl.focus(),this.stateChanging||this.disabled||(this.open=!this.open)};handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.bodyEl))&&(this.open?(this.nanoAfterOpen.emit(),requestAnimationFrame((()=>this.stateChanging=!1))):(this.detailsEl.open=!1,this.nanoAfterClose.emit(),requestAnimationFrame((()=>this.stateChanging=!1))))};hide(){if(this.nanoClose.emit(this.open).defaultPrevented)return this.open=!0,void(this.detailsEl.open=!0)}show(){const t=this.nanoOpen.emit();if(this.detailsEl.open=!0,t.defaultPrevented)return this.open=!1,void(this.detailsEl.open=!1)}attachMo(){!this.mo&&this.detailsEl&&(this.mo=new MutationObserver((t=>{if(!this.stateChanging)for(const e of t)"attributes"!==e.type||"open"!==e.attributeName||this.disabled||(this.open=this.detailsEl.open)})),this.mo.observe(this.detailsEl,{attributes:!0}))}componentDidLoad(){this.open&&this.detailsEl.setAttribute("open","true"),this.attachMo()}connectedCallback(){this.bodyEl&&this.bodyEl.addEventListener("transitionend",this.handleTransitionEnd),this.attachMo()}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return n(i,{key:"1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480",class:"nano-details"},n("details",{key:"22659218ba7d1ec936523ff33c7ed2a1efb2af74",part:"base",ref:t=>this.detailsEl=t,class:{details:!0,disabled:this.disabled}},n("summary",{key:"3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.slotCtrl.has("icon-start")&&n("span",{key:"4a8de08dca34823e162019e2d4dddef2ed2c123d",part:"icon icon--start",class:"icon icon--start"},n("slot",{key:"cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a",name:"icon-start"})),n("div",{key:"0b11c544cfbb5852dfeae66b482154f1780a2569",part:"label",class:"label"},this.label?this.label:n("slot",{name:"label"})),n("span",{key:"5470af7891318c513870c473a8ad1f501174f51b",part:"icon icon--end",class:"icon icon--end"},n("slot",this.open?{name:"icon-collapse"}:{name:"icon-expand"}),n("slot",{key:"45960716eeec5d5ad08b63fd536608fcd33ab8f2",name:"icon-end"},!this.slotCtrl.has("icon-start")&&!this.slotCtrl.has("icon-end")&&!this.slotCtrl.has("icon-expand")&&!this.slotCtrl.has("icon-collapse")&&n("nano-icon",{key:"5357b61cb197dc4a1ceccf415a34defdfeb6b290",class:"default-icon",name:"light/chevron-down"})))),n("div",{key:"aa7f850c8415c2cd40fd7a965fba8eb98fca62b5",part:"body",class:"body",ref:t=>this.bodyEl=t,role:"region","aria-labelledby":"header"},n("div",{key:"e98e6a68e4c15525b4377d4229fb4a1855650732",part:"content-wrapper",class:"content-wrapper"},n("div",{key:"6710e302f7e2a5987ccd6703ea3c6cc0bf705d23",part:"content",class:"content",id:"content"},n("slot",{key:"891525e66383979e621787f766bcfbcea78a9630"}))))))}static get watchers(){return{open:["toggleClick"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-lg);line-height:var(--nano-line-height-dense);text-wrap:balance}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-md);line-height:var(--nano-line-height-dense);text-wrap:balance}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";export{o as nano_details}
+import{r as t,c as e,a as i}from"./index-BM3Om9WE.js";import{h as n}from"./renderer-DpNDfhNy.js";import{H as a}from"./slot-BeXeAw-u.js";import"./dom-dlicJTEJ.js";const o=class{constructor(i){t(this,i),this.nanoOpen=e(this,"nanoOpen",7),this.nanoClose=e(this,"nanoClose",7),this.nanoAfterOpen=e(this,"nanoAfterOpen",7),this.nanoAfterClose=e(this,"nanoAfterClose",7)}mo;stateChanging=!1;slotCtrl=new a(this,"icon-start","icon-end","icon-collapse","icon-expand");detailsEl;headerEl;_bodyEl;get bodyEl(){return this._bodyEl}set bodyEl(t){this.bodyEl&&this.bodyEl===this._bodyEl||(this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd),t.addEventListener("transitionend",this.handleTransitionEnd),this._bodyEl=t)}label="";open=!1;disabled=!1;size="medium";nanoOpen;nanoClose;nanoAfterOpen;nanoAfterClose;toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}onKeyDown=t=>{if(!this.stateChanging&&!this.disabled)switch(t.key){case"Enter":case" ":t.preventDefault(),this.open=!this.open;break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.open=!1;break;case"ArrowDown":case"ArrowRight":t.preventDefault(),this.open=!0}};onMouseDown=t=>{t.preventDefault(),this.headerEl.focus(),this.stateChanging||this.disabled||(this.open=!this.open)};handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.bodyEl))&&(this.open?(this.nanoAfterOpen.emit(),requestAnimationFrame((()=>this.stateChanging=!1))):(this.detailsEl.open=!1,this.nanoAfterClose.emit(),requestAnimationFrame((()=>this.stateChanging=!1))))};hide(){if(this.nanoClose.emit(this.open).defaultPrevented)return this.open=!0,void(this.detailsEl.open=!0)}show(){const t=this.nanoOpen.emit();if(this.detailsEl.open=!0,t.defaultPrevented)return this.open=!1,void(this.detailsEl.open=!1)}attachMo(){!this.mo&&this.detailsEl&&(this.mo=new MutationObserver((t=>{if(!this.stateChanging)for(const e of t)"attributes"!==e.type||"open"!==e.attributeName||this.disabled||(this.open=this.detailsEl.open)})),this.mo.observe(this.detailsEl,{attributes:!0}))}componentDidLoad(){this.open&&this.detailsEl.setAttribute("open","true"),this.attachMo()}connectedCallback(){this.bodyEl&&this.bodyEl.addEventListener("transitionend",this.handleTransitionEnd),this.attachMo()}disconnectedCallback(){this.mo&&(this.mo.disconnect(),this.mo=void 0),this.bodyEl&&this.bodyEl.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return n(i,{key:"1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480",class:"nano-details"},n("details",{key:"22659218ba7d1ec936523ff33c7ed2a1efb2af74",part:"base",ref:t=>this.detailsEl=t,class:{details:!0,disabled:this.disabled}},n("summary",{key:"3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.slotCtrl.has("icon-start")&&n("span",{key:"4a8de08dca34823e162019e2d4dddef2ed2c123d",part:"icon icon--start",class:"icon icon--start"},n("slot",{key:"cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a",name:"icon-start"})),n("div",{key:"0b11c544cfbb5852dfeae66b482154f1780a2569",part:"label",class:"label"},this.label?this.label:n("slot",{name:"label"})),n("span",{key:"5470af7891318c513870c473a8ad1f501174f51b",part:"icon icon--end",class:"icon icon--end"},n("slot",this.open?{name:"icon-collapse"}:{name:"icon-expand"}),n("slot",{key:"45960716eeec5d5ad08b63fd536608fcd33ab8f2",name:"icon-end"},!this.slotCtrl.has("icon-start")&&!this.slotCtrl.has("icon-end")&&!this.slotCtrl.has("icon-expand")&&!this.slotCtrl.has("icon-collapse")&&n("nano-icon",{key:"5357b61cb197dc4a1ceccf415a34defdfeb6b290",class:"default-icon",name:"light/chevron-down"})))),n("div",{key:"aa7f850c8415c2cd40fd7a965fba8eb98fca62b5",part:"body",class:"body",ref:t=>this.bodyEl=t,role:"region","aria-labelledby":"header"},n("div",{key:"e98e6a68e4c15525b4377d4229fb4a1855650732",part:"content-wrapper",class:"content-wrapper"},n("div",{key:"6710e302f7e2a5987ccd6703ea3c6cc0bf705d23",part:"content",class:"content",id:"content"},n("slot",{key:"891525e66383979e621787f766bcfbcea78a9630"}))))))}static get watchers(){return{open:["toggleClick"]}}};o.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-lg);line-height:var(--nano-line-height-dense);text-wrap:balance}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-md);line-height:var(--nano-line-height-dense);text-wrap:balance}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";export{o as nano_details}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,c as o,g as i,a as t}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DpNDfhNy.js";import{M as n}from"./modal-CY_3_LJ7.js";import{l as r,u as s}from"./scroll-1nFw8CNk.js";import{H as d}from"./slot-D31cEKyt.js";import{C as l}from"./component-store-JYVuxwvK.js";import{g as h}from"./tabbable-BgopY-vd.js";import"./dom-dlicJTEJ.js";import"./throttle-C93FMm2Z.js";let c=0;const b=class{constructor(i){a(this,i),this.nanoShow=o(this,"nanoShow",7),this.nanoAfterShow=o(this,"nanoAfterShow",7),this.nanoHide=o(this,"nanoHide",7),this.nanoAfterHide=o(this,"nanoAfterHide",7),this.nanoInitialFocus=o(this,"nanoInitialFocus",7),this.nanoRequestClose=o(this,"nanoRequestClose",7)}componentId="dialog-"+ ++c;modal;willShow=!1;willHide=!1;originalTrigger;overlay;dialog;slotCtrl=new d(this,"footer");get panel(){return this._panel}set panel(a){this._panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd),a.addEventListener("transitionend",this.handleTransitionEnd),this._panel=a}_panel;get host(){return i(this)}noDismiss=!1;hidden=!0;showRibbon=!0;open=!1;handleOpenChange(){this.open?this.show():this.hide()}label;noHeader=!1;noUserDismiss=!1;storeId;storeMethod="url-hash";hoist=!1;handleHoistChange(){"popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host)||document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow)return;if(this.nanoShow.emit().defaultPrevented)return void(this.open=!1);this.dialog&&(this.dialog.hidden=!1),this.originalTrigger=document.activeElement,this.willShow=!0,this.hidden=!1,this.open=!0,this.modal.activate(),"function"==typeof this.dialog?.showPopover&&this.dialog.showPopover(),r(this.host);const a=this.host.querySelector("[autofocus]");a&&a.removeAttribute("autofocus"),this.host.addEventListener("nanoAfterShow",(()=>{this.nanoInitialFocus.emit().defaultPrevented||(a||h(this.host,!0,!0,!0)[0]||this.panel).focus({preventScroll:!0})}),{once:!0})}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),this.stopVideos();const a=this.originalTrigger;a&&(a.setFocus&&"function"==typeof a.setFocus?a.setFocus():a.focus()),setTimeout((()=>{this.open||"function"!=typeof this.dialog?.hidePopover||this.dialog.hidePopover(),s(this.host)}),300)}handleKeyDown=a=>{"Escape"===a.key&&this.requestClose()};requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()};handleTransitionEnd=a=>{"opacity"===a.propertyName&&a.composedPath().find((a=>a===this.panel||a===this.overlay))&&(this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open||(this.dialog.hidden=!0,this.hidden=!0))};stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((a=>{"video"===a.tagName.toLowerCase()?a.pause():a.src=a.src}))}connectedCallback(){this.handleHoistChange(),this.modal=new n(this.host)}componentWillLoad(){this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open,this.open&&(this.show(),this.nanoAfterShow.emit())}disconnectedCallback(){s(this.host),this.panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"b6ba3eea63e7aee1da10dca2a653a6c9f7d66266",class:"nano-dialog"},e("div",{key:"8ac30cda032a4fbc89b432f16ce3e9adb88ca68e",part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.slotCtrl.has("footer"),"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},e("div",{key:"4d2cde77fa9c8796daa2591eb425d1694f211d90",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),e("div",{key:"a99ea663fbb2560aaa8f49f23325a661f96dece6",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.hidden?"true":"false","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:-1},e("div",{key:"0e0bab9c4307d64cd9d7deb14603d1a5e1f9d27c",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"6f1ea1f827d3a18622515f57b5c55d9cb4daa8a0"},e("header",{key:"d1cb39f7c1878810f85c7641fdae2217180327b3",part:"header",class:"dialog__header"},e("span",{key:"7f0ac92358b64688eca01979fd68a665802636d6",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"9b53b34fa5f815a46e9bbd961acecbe592b14cb5",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"4b110b4b490ede1f757046d252de8e2015f50d6e",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"f2225d9d4753b91afd697466b897e20441704f82",part:"body",class:"dialog__body"},e("slot",{key:"1bc02a8964d47650a45dd047bac390615823b176"})),this.slotCtrl.has("footer")&&e("nano-sticker",{key:"9cca925aa007316b93475d54194278ee69fcfdd6",position:"bottom"},e("footer",{key:"8b1b57752c43c3e010361c90da2cd3e647243828",part:"footer",class:"dialog__footer"},e("slot",{key:"3fdf3ec86fb5efd8a97a8ddee887dac53d3f58be",name:"footer"})))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-surface-300);--content-color:var(--nano-color-base-1000);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:var(--content-color);background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";export{b as nano_dialog}
+import{r as a,c as o,g as i,a as t}from"./index-BM3Om9WE.js";import{h as e}from"./renderer-DpNDfhNy.js";import{M as n}from"./modal-CY_3_LJ7.js";import{l as r,u as s}from"./scroll-1nFw8CNk.js";import{H as d}from"./slot-BeXeAw-u.js";import{C as l}from"./component-store-JYVuxwvK.js";import{g as h}from"./tabbable-BgopY-vd.js";import"./dom-dlicJTEJ.js";import"./throttle-C93FMm2Z.js";let c=0;const b=class{constructor(i){a(this,i),this.nanoShow=o(this,"nanoShow",7),this.nanoAfterShow=o(this,"nanoAfterShow",7),this.nanoHide=o(this,"nanoHide",7),this.nanoAfterHide=o(this,"nanoAfterHide",7),this.nanoInitialFocus=o(this,"nanoInitialFocus",7),this.nanoRequestClose=o(this,"nanoRequestClose",7)}componentId="dialog-"+ ++c;modal;willShow=!1;willHide=!1;originalTrigger;overlay;dialog;slotCtrl=new d(this,"footer");get panel(){return this._panel}set panel(a){this._panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd),a.addEventListener("transitionend",this.handleTransitionEnd),this._panel=a}_panel;get host(){return i(this)}noDismiss=!1;hidden=!0;showRibbon=!0;open=!1;handleOpenChange(){this.open?this.show():this.hide()}label;noHeader=!1;noUserDismiss=!1;storeId;storeMethod="url-hash";hoist=!1;handleHoistChange(){"popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host)||document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow)return;if(this.nanoShow.emit().defaultPrevented)return void(this.open=!1);this.dialog&&(this.dialog.hidden=!1),this.originalTrigger=document.activeElement,this.willShow=!0,this.hidden=!1,this.open=!0,this.modal.activate(),"function"==typeof this.dialog?.showPopover&&this.dialog.showPopover(),r(this.host);const a=this.host.querySelector("[autofocus]");a&&a.removeAttribute("autofocus"),this.host.addEventListener("nanoAfterShow",(()=>{this.nanoInitialFocus.emit().defaultPrevented||(a||h(this.host,!0,!0,!0)[0]||this.panel).focus({preventScroll:!0})}),{once:!0})}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),this.stopVideos();const a=this.originalTrigger;a&&(a.setFocus&&"function"==typeof a.setFocus?a.setFocus():a.focus()),setTimeout((()=>{this.open||"function"!=typeof this.dialog?.hidePopover||this.dialog.hidePopover(),s(this.host)}),300)}handleKeyDown=a=>{"Escape"===a.key&&this.requestClose()};requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()};handleTransitionEnd=a=>{"opacity"===a.propertyName&&a.composedPath().find((a=>a===this.panel||a===this.overlay))&&(this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit(),this.open||(this.dialog.hidden=!0,this.hidden=!0))};stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((a=>{"video"===a.tagName.toLowerCase()?a.pause():a.src=a.src}))}connectedCallback(){this.handleHoistChange(),this.modal=new n(this.host)}componentWillLoad(){this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open,this.open&&(this.show(),this.nanoAfterShow.emit())}disconnectedCallback(){s(this.host),this.panel&&this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"b6ba3eea63e7aee1da10dca2a653a6c9f7d66266",class:"nano-dialog"},e("div",{key:"8ac30cda032a4fbc89b432f16ce3e9adb88ca68e",part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--has-footer":this.slotCtrl.has("footer"),"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},e("div",{key:"4d2cde77fa9c8796daa2591eb425d1694f211d90",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),e("div",{key:"a99ea663fbb2560aaa8f49f23325a661f96dece6",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.hidden?"true":"false","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:-1},e("div",{key:"0e0bab9c4307d64cd9d7deb14603d1a5e1f9d27c",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"6f1ea1f827d3a18622515f57b5c55d9cb4daa8a0"},e("header",{key:"d1cb39f7c1878810f85c7641fdae2217180327b3",part:"header",class:"dialog__header"},e("span",{key:"7f0ac92358b64688eca01979fd68a665802636d6",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"9b53b34fa5f815a46e9bbd961acecbe592b14cb5",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"4b110b4b490ede1f757046d252de8e2015f50d6e",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"f2225d9d4753b91afd697466b897e20441704f82",part:"body",class:"dialog__body"},e("slot",{key:"1bc02a8964d47650a45dd047bac390615823b176"})),this.slotCtrl.has("footer")&&e("nano-sticker",{key:"9cca925aa007316b93475d54194278ee69fcfdd6",position:"bottom"},e("footer",{key:"8b1b57752c43c3e010361c90da2cd3e647243828",part:"footer",class:"dialog__footer"},e("slot",{key:"3fdf3ec86fb5efd8a97a8ddee887dac53d3f58be",name:"footer"})))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--border-radius:0;--content-background:var(--nano-color-surface-300);--content-color:var(--nano-color-base-1000);--footer-content:var(--nano-color-neutral-75);--scrim-color:var(--nano-overlay-background-color);--box-shadow:var(--nano-shadow-l3);--close-button-color:var(--nano-color-primary-1200);--width:50rem;--height:auto;--body-padding-v:var(--nano-spacing-l1-default);--body-padding-h:var(--nano-spacing-l1-default);--header-padding-v:var(--nano-spacing-l);--header-padding-h:var(--nano-spacing-l1-default);--footer-padding-v:var(--nano-spacing-l);--footer-padding-h:var(--nano-spacing-l1-default)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-z-index-modal);border:none;inline-size:unset;block-size:unset;color:var(--content-color);background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xl));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform}.dialog__panel:focus{outline:none}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-x-fast) box-shadow;min-inline-size:auto;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}[stuck] .dialog__header{box-shadow:var(--nano-shadow-l0)}.dialog__title{flex:1 1 auto;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-xl);line-height:var(--nano-line-height-denser);text-wrap:balance}.dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.375rem;position:relative;inset-inline-end:calc(var(--nano-spacing-l1-default) / 2 * -1);--color:var(--close-button-color)}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto;border-block-start:1px solid var(--nano-color-neutral-300);gap:var(--nano-spacing-md);display:inline-flex}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast) opacity}.dialog--open .dialog__overlay{opacity:1}";export{b as nano_dialog}

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

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as t,c as i,g as o,a as e}from"./index-BM3Om9WE.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-BgopY-vd.js";import{t as d,h as l}from"./renderer-DpNDfhNy.js";import{g as p}from"./dom-dlicJTEJ.js";import{g as c}from"./slot-D31cEKyt.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.hasFocus||this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"584081bb33462feb595037c47abd68aa3db1105a",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3847f51ea7fb4b0a80fe527d98e2af79468ed4bb",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"213d89d4ce752d7fa07e0f145d939679d6cb82ab",onSlotchange:this.handleSlotContent})))}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}
+import{r as t,c as i,g as o,a as e}from"./index-BM3Om9WE.js";import{f as n,g as s}from"./active-element-CKJIkX0R.js";import{P as a}from"./popover-DNdFZ1hX.js";import{a as r,g as h}from"./tabbable-BgopY-vd.js";import{t as d,h as l}from"./renderer-DpNDfhNy.js";import{g as p}from"./dom-dlicJTEJ.js";import{g as c}from"./slot-BeXeAw-u.js";let m=0;const u=class{constructor(o){t(this,o),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId="dropdown-"+m++;labelId=this.dropdownId+"-title";ignoreOpenWatcher=!1;panel;popover;trigger;positioner;accessibleTrigger;didLoad=!1;focusFirstEle=!0;get menu(){return this.host.querySelector(d("nano-menu"))}get host(){return o(this)}autoOpen=!0;open=!1;handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.accessibleTrigger?this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString()):this.updateAccessibleTrigger())}closeOnSelect=!0;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover(),this.updateAccessibleTrigger()}placement="bottom-start";distance=5;skidding=0;hoist=!1;handlePopoverOptionsChange(){this.popover&&this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:!0}),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}handlePanelSelect(t){this.closeOnSelect&&t.target.tagName.toLowerCase()===d("nano-menu")&&this.hide()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);"function"==typeof this.positioner?.showPopover?(this.hoist=!0,this.popover.show(),this.positioner.showPopover()):this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}afterHide(){"function"==typeof this.positioner?.hidePopover&&this.positioner.hidePopover(),this.panel.scrollTop=0,this.accessibleTrigger&&n(this.containingElement,this.trigger)&&this.accessibleTrigger.focus()}togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())};updateAccessibleTrigger(){if(!this.didLoad)return;let t;this.accessibleTrigger=null,t=this.tetherTo?r(this.tetherTo):Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(r)[0],t&&!t.getAttribute("aria-haspopup")&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"),this.accessibleTrigger=t)}handleDocumentKeyDown(t){if("Escape"!==t.key)if("Tab"===t.key)setTimeout((()=>{n(this.containingElement,this.trigger,t)||this.hide()}));else{if(this.menu&&(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"].includes(t.key)))return!this.open||n(this.containingElement,this.trigger,t)?"NANO-DROPDOWN"===this.containingElement.tagName&&this.containingElement.placement.match(/right|left/)&&"NANO-DROPDOWN"===this.trigger.getRootNode()?.host?.tagName?void this.hide():void 0:(t.preventDefault(),this.menu.setFocus(),void(this.focusFirstEle=!0));const i=t.composedPath();if(this.menu&&i.length&&!i.find((t=>t!==this.menu)))return void this.menu.dispatchEvent(new KeyboardEvent(t.type,t))}else this.hide()}handleDocumentMouseDown(t){n(this.containingElement,this.trigger,t)||this.hide()}handleTriggerKeyDown=t=>{(this.placement.match(/bottom|top/)&&["ArrowDown","ArrowUp"," ","Enter"].includes(t.key)||this.placement.match(/right|left/)&&["ArrowRight","ArrowLeft"," ","Enter"].includes(t.key))&&(this.show(),t.preventDefault(),t.stopPropagation(),this.menu&&(this.menu.setFocus(),this.focusFirstEle=!0))};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){(this.tetherTo||this.trigger)&&this.positioner&&(this.popover&&(this.open&&this.hide(),this.popover.destroy(),this.popover=null),this.popover=new a(this.tetherTo||this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>{this.nanoAfterHide.emit()},onAfterShow:()=>{this.nanoAfterShow.emit()},onTransitionEnd:()=>{this.open?this.menu&&(this.menu.showActiveElement(),this.focusFirstEle&&(this.menu.setFocus(),this.focusFirstEle=!1)):this.afterHide()}}),this.open&&this.show())}isOverflowing(){return["auto","scroll"].includes(window.getComputedStyle(this.host).getPropertyValue("--overflow"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.didLoad=!0,this.createPopover(),setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){this.host.isConnected&&this.hide(),this.popover&&this.popover.destroy()}render(){return l(e,{key:"c0ed4b8b03d27f7437c148c8df305886c6cf29d9",class:"nano-dropdown"},l("div",{key:"27165586e2caa99ba746e7db3aa1574f0e9d1576",part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open}},l("span",{key:"b401a4d341e786ae4fe8c54adf06f8da1be4f531",part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},l("slot",{key:"bd61e0f2d5e164b21d3ecba81c63ec72b0b7cc6f",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),l("div",{key:"e0cb2a8823490b70f6aa01073d3873fa785fd763",ref:t=>this.positioner=t,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},l("div",{key:"3f1b7e3911cd7616ff85d042fc0d1e3e358f36c2",ref:t=>this.panel=t,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:"group"===this.host.getAttribute("role")?"group":"dialog","aria-modal":"group"===this.host.getAttribute("role")?void 0:"true","aria-labelledby":this.dialogTitle?this.labelId:void 0,tabIndex:this.isOverflowing()?0:void 0},this.dialogTitle&&l("span",{key:"19cc4dd331a4c2cbdc73a05687681cb2830fff0c",id:this.labelId,class:"dropdown__accessible-title","aria-live":"group"===this.host.getAttribute("role")?void 0:"polite"},this.dialogTitle),l("slot",{key:"5da1881086c31481463b3b7244552e17ee66d997"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};u.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--width:auto;--border:none;--border-radius:0px;--background:var(--nano-color-neutral-75);--padding:0 0;--overflow:auto;--dropdown-z-index:var(--nano-z-index-dropdown);--min-width:0;--max-height:none;--box-shadow:var(--nano-shadow-l2);--menu-height:calc(100vh - 200px);display:inline-block}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:var(--nano-transition-x-fast) ease opacity, var(--nano-transition-x-fast) ease transform, var(--nano-transition-fast) ease min-block-size;min-block-size:20px;overflow:var(--overflow);max-block-size:var(--max-height);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";const b=class{constructor(o){t(this,o),this.nanoFocus=i(this,"nanoFocus",7),this.nanoBlur=i(this,"nanoBlur",7),this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=!1;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return o(this)}get hasFocus(){return this._hasFocus}_hasFocus=!1;type;_type;label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){this.menu?.focus&&this.menu.focus({preventScroll:!0})}async removeFocus(){this.menu?.blur&&this.menu.blur()}async showActiveElement(){this.selectedItem&&this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;if("listbox"===this._type)t=p(this.el,`${d("nano-nav-item")}, ${d("nano-option")}`,"slot");else{const i=this.el.querySelectorAll("[open]");t=h(i[i.length-1]||this.el)}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=s();return this.getItems.find((i=>"0"===i.getAttribute("tabindex")||i===t||i===document.activeElement||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=!0){const o=this.getItems,e=t||o.find((t=>t.selected))||o[0];o.filter((t=>t.tagName.toLowerCase()===d("nano-option"))).map((t=>t.setAttribute("tabindex",t===e?"0":"-1"))),i&&(e?e.setFocus?e.setFocus():e.focus():this.hasFocus||this.menu.focus())}handleBlur(t){if(!this.hasFocus)return;let i;if(t.key){if("Tab"!==t.key)return;i=s()&&s().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));i||(this.resetActiveItem(),this._hasFocus=!1,this.nanoBlur.emit())}handleFocus=()=>{this._hasFocus=!0,this.setActiveFocusItem(this.selectedItem||this.getItems[0]),this.nanoFocus.emit()};handleClick=t=>{const i=t.target.closest(d("nano-nav-item"));i&&!i.disabled&&this.nanoSelect.emit(i)};handleKeyDown=t=>{switch(clearTimeout(this.ignoreMouseTimeout),this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=!1),500),this.ignoreMouseEvents=!0,t.key){case" ":this.activeItem&&(t.stopPropagation(),"BUTTON"!==this.activeItem.nodeName&&this.activeItem.click());break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const i=this.getItems;let o=i.indexOf(this.activeItem);if(i.length)return t.preventDefault(),"ArrowDown"===t.key?o++:"ArrowUp"===t.key?o--:"Home"===t.key||"PageUp"===t.key?o=0:"End"!==t.key&&"PageDown"!==t.key||(o=i.length-1),o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.setActiveFocusItem(i[o]),void(i[o]&&i[o].scrollIntoView({block:"nearest"}));break}}if(" "===t.key||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750),this.typeToSelect+=t.key;const i=this.getItems;for(const t of i)if(c(t).toLowerCase().trim().substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}};handleMouseOver=t=>{const i=t.target,o=i.closest(d("nano-nav-item"))||i.closest(d("nano-option"))||i.closest("a");o&&!this.ignoreMouseEvents&&this.setActiveFocusItem(o)};handleSlotContent=()=>{if(this._type=this.type||null,!this._type){let t,i=0;h(this.el).forEach((o=>{"A"===o.tagName||"link"===o.role?t++:i++})),this._type=t>i?"nav":"menu"}"nav"!==this._type&&(p(this.el,`*:not(${d("nano-nav-item")}, a, ${d("nano-option")}, ${d("nano-dropdown")})`,!0).forEach((t=>{this.getItems.indexOf(t)<0&&t.setAttribute("role","none")})),this.el.querySelectorAll(`a, ${d("nano-dropdown")}`).forEach((t=>{t.setAttribute("role","A"===t.tagName?"menuitem":"group")})))};componentWillLoad(){this.handleSlotContent()}render(){return l(e,{key:"584081bb33462feb595037c47abd68aa3db1105a",role:"listbox"===this._type?"group":this._type,class:"nano-menu"},l("div",{key:"3847f51ea7fb4b0a80fe527d98e2af79468ed4bb",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:void 0,ref:t=>this.menu=t,part:"base",class:{menu:!0,["menu--"+this._type]:!0,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},l("slot",{key:"213d89d4ce752d7fa07e0f145d939679d6cb82ab",onSlotchange:this.handleSlotContent})))}};b.style=":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding:var(--nano-spacing-sm) var(--nano-spacing-sm);--font-size:1rem;--background:var(--nano-color-neutral-75);--nav-item-padding:var(--padding);display:block;background:var(--background);color:var(--nano-color-neutral-1400);overflow-x:clip}.menu{font-size:var(--font-size);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item,.nano-option,hr,slot)){padding:var(--padding);display:block}";export{u as nano_dropdown,b as nano_menu}

package/dist/nano-components/nano-in-page-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * Custom elements for Nanopore-Digital Web applications
  */
-import{r as a,g as e,a as r}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{H as i}from"./slot-D31cEKyt.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],r=n(a,"ul",!0)[0];if(e&&r){const t=this.createDetails(e.textContent?.trim()||"",r);e.remove(),a.prepend(t)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const r=document.createElement("nano-details");return r.setAttribute("label",a),r.classList.add("nav-details"),r.appendChild(e),r}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],r=o(this.host);a.forEach((a=>{const r=a.getAttribute("href")?.substring(1);if(!r)return;const t=document.getElementById(r);t&&e.push(t)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((r=>{r.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const t=e.filter((a=>a.classList.contains("in-view")));if(t.length){t.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=t[0].getAttribute("id"),r=this.host.querySelector(`a[href="#${e}"]`);r?.classList.add("is-active")}}),{root:r===document.documentElement?null:r,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return t(r,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},t("nav",{key:"26a999b2b5282f8e39f8e07e6e4190374e3c68c9",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&t("div",{key:"507955a2092b3c1c5bfcaefe4debb97ba8ce1063",class:"header"},t("slot",{key:"5e3cd2413baf55b8905912316a1a17358e8597b5",name:"back"}),t("slot",{key:"ea39a03ba015a9bd2d031e839ae379699ba96d1a",name:"accessory"})),t("div",{key:"e6db628b6f4d1dc036a945554cfd8c90e8308307",class:"desktop-nav"},t("slot",{key:"1adc8091b920e22b54d8b83e0b60200f2ff1d45d",onSlotchange:()=>this.handleSlotChange})),t("nano-details",{key:"61fe2ef173d090faed09515c16df421cda50c11c",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper nano-details.is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}
+import{r as a,g as e,a as r}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{H as i}from"./slot-BeXeAw-u.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],r=n(a,"ul",!0)[0];if(e&&r){const t=this.createDetails(e.textContent?.trim()||"",r);e.remove(),a.prepend(t)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const r=document.createElement("nano-details");return r.setAttribute("label",a),r.classList.add("nav-details"),r.appendChild(e),r}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],r=o(this.host);a.forEach((a=>{const r=a.getAttribute("href")?.substring(1);if(!r)return;const t=document.getElementById(r);t&&e.push(t)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((r=>{r.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const t=e.filter((a=>a.classList.contains("in-view")));if(t.length){t.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=t[0].getAttribute("id"),r=this.host.querySelector(`a[href="#${e}"]`);r?.classList.add("is-active")}}),{root:r===document.documentElement?null:r,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return t(r,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},t("nav",{key:"26a999b2b5282f8e39f8e07e6e4190374e3c68c9",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&t("div",{key:"507955a2092b3c1c5bfcaefe4debb97ba8ce1063",class:"header"},t("slot",{key:"5e3cd2413baf55b8905912316a1a17358e8597b5",name:"back"}),t("slot",{key:"ea39a03ba015a9bd2d031e839ae379699ba96d1a",name:"accessory"})),t("div",{key:"e6db628b6f4d1dc036a945554cfd8c90e8308307",class:"desktop-nav"},t("slot",{key:"1adc8091b920e22b54d8b83e0b60200f2ff1d45d",onSlotchange:()=>this.handleSlotChange})),t("nano-details",{key:"61fe2ef173d090faed09515c16df421cda50c11c",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper nano-details.is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}