https://www.lyleandscott.com/cdn/shop/t/458/assets/lyle-csv-table.js?v=122428103366816237891788364383

1import UniversalScrollbar from"universal-scrollbar";const THUMB_COLOR="var(--color-border-primary)",TRACK_COLOR="var(--color-border-secondary)";class LyleCsvTable extends HTMLElement{#abortController=null;#sectionObserver=null;#overflowObserver=null;#scrollbar=null;#trackSyncBound=null;connectedCallback(){const url=this.dataset.url;if(!url){this.#finish();return}this.#abortController=new AbortController;const hiddenSection=this.closest(".is-hidden");hiddenSection&&hiddenSection.id!==window.location.hash.slice(1)?this.#deferUntilVisible(hiddenSection):this.#loadTable(url)}disconnectedCallback(){this.#abortController?.abort(),this.#abortController=null,this.#sectionObserver?.disconnect(),this.#sectionObserver=null,this.#stopWatchOverflow(),this.#destroyScrollbar()}refreshScrollbar(){this.#initScrollbar()}#deferUntilVisible(section){this.#sectionObserver=new MutationObserver(()=>{if(!section.isConnected){this.#sectionObserver.disconnect(),this.#sectionObserver=null;return}section.classList.contains("is-hidden")||(this.#sectionObserver.disconnect(),this.#sectionObserver=null,this.#loadTable(this.dataset.url))}),this.#sectionObserver.observe(section,{attributes:!0,attributeFilter:["class"]})}get#hasHeaderRow(){return this.hasAttribute("data-header-row")}get#hasHeaderColumn(){return this.hasAttribute("data-header-column")}async#loadTable(url){try{const response=await fetch(url,{signal:this.#abortController?.signal});if(!response.ok)throw new Error(`Request failed with status ${response.status}`);const rows=this.#parseCsv(await response.text());rows.length>0&&this.#renderTable(rows)}catch(error){if(error?.name==="AbortError")return;console.error("CSV table: unable to load data",error)}finally{this.#finish()}}#renderTable(rows){const table=document.createElement("table");table.className="csv-table__table";const fragment=document.createDocumentFragment();rows.forEach((cells,rowIndex)=>{const tr=document.createElement("tr");cells.forEach((value,cellIndex)=>{const isHeaderColumn=cellIndex===0&&this.#hasHeaderColumn,isHeaderRow=rowIndex===0&&this.#hasHeaderRow,isHeader=isHeaderColumn||isHeaderRow,cell=document.createElement(isHeader?"th":"td");cell.textContent=value,cell.classList.add(isHeaderRow?"text-body-md-bold":"text-body-md"),isHeader&&cell.classList.add("highlight"),isHeaderRow?cell.setAttribute("scope","col"):isHeaderColumn&&cell.setAttribute("scope","row"),tr.appendChild(cell)}),fragment.appendChild(tr)}),table.appendChild(fragment),this.replaceChildren(table),this.#initScrollbar()}#initScrollbar(){if(this.#destroyScrollbar(),!this.isConnected||this.scrollWidth<=this.clientWidth){this.#watchOverflow();return}this.#stopWatchOverflow(),this.#scrollbar=new UniversalScrollbar({target:this,width:1,minThumbSize:40,autoHide:!1,smoothScroll:!1,observeDOM:!1,trackColor:TRACK_COLOR,thumbColor:THUMB_COLOR,thumbHoverColor:THUMB_COLOR,thumbActiveColor:THUMB_COLOR,zIndex:2}),this.#trackSyncBound=()=>{requestAnimationFrame(()=>this.#syncInsetTrack())},this.addEventListener("scroll",this.#trackSyncBound,{passive:!0}),window.addEventListener("resize",this.#trackSyncBound),this.#trackSyncBound()}#watchOverflow(){this.#overflowObserver||!this.isConnected||(this.#overflowObserver=new ResizeObserver(()=>{this.scrollWidth<=this.clientWidth||(this.#stopWatchOverflow(),this.#initScrollbar())}),this.#overflowObserver.observe(this))}#stopWatchOverflow(){this.#overflowObserver?.disconnect(),this.#overflowObserver=null}#syncInsetTrack(){if(!this.closest(".csv-table-section__scroll"))return;const wrapper=this.parentElement;if(!wrapper?.classList.contains("us-wrapper"))return;const track=wrapper.querySelector(".us-track.us-horizontal"),thumb=track?.querySelector(".us-thumb");if(!track||!thumb)return;const trackWidth=track.clientWidth;if(trackWidth<=0)return;const thumbWidth=Math.max(40,this.clientWidth/this.scrollWidth*trackWidth),maxScroll=this.scrollWidth-this.clientWidth,maxOffset=Math.max(0,trackWidth-thumbWidth),offset=maxScroll>0?this.scrollLeft/maxScroll*maxOffset:0;thumb.style.width=`${thumbWidth}px`,thumb.style.transform=`translateX(${offset}px)`}#destroyScrollbar(){if(this.#trackSyncBound&&(this.removeEventListener("scroll",this.#trackSyncBound),window.removeEventListener("resize",this.#trackSyncBound),this.#trackSyncBound=null),!this.#scrollbar)return;const sharedStyles=document.getElementById("universal-scrollbar-styles");this.#scrollbar.destroy(),this.#scrollbar=null,sharedStyles&&!document.getElementById("universal-scrollbar-styles")&&document.head.appendChild(sharedStyles)}#finish(){if(!this.isConnected)return;this.removeAttribute("aria-busy"),this.querySelector(".csv-table__placeholder")?.remove()}#parseCsv(text){const rows=[];let row=[],field="",inQuotes=!1,index=0;for(;index<text.length;){const char=text[index];if(inQuotes){if(char==='"'){if(text[index+1]==='"'){field+='"',index+=2;continue}inQuotes=!1,index+=1;continue}field+=char,index+=1;continue}

1if(char==='"'){inQuotes=!0,index+=1;continue}if(char===","){row.push(field),field="",index+=1;continue}if(char===`
2`||char==="\r"){char==="\r"&&text[index+1]===`
3`&&(index+=1),row.push(field),rows.push(row),row=[],field="",index+=1;continue}field+=char,index+=1}return(field!==""||row.length>0)&&(row.push(field),rows.push(row)),rows.filter(cells=>cells.some(cell=>cell!==""))}}customElements.get("lyle-csv-table")||customElements.define("lyle-csv-table",LyleCsvTable);
4//# sourceMappingURL=/cdn/shop/t/458/assets/lyle-csv-table.js.map?v=122428103366816237891788364383