v4web-components/dist/stencil-library/p-956fa403.entry.js

Stencil Component Starter

import{r as e,c as l,h as a,g as s}from"./p-c2aeec95.js";const t=".v4-table{max-width:100%;overflow-x:auto;max-height:32rem;overflow-y:auto}.scroll-customized::-webkit-scrollbar{width:0.5rem;height:0.5rem}.scroll-customized::-webkit-scrollbar-track{background-color:var(--lab-ds-semantic-selectable-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.scroll-customized::-webkit-scrollbar-thumb{background-color:var(--lab-ds-semantic-selectable-color-primary-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-pill)}.table-loading{margin-top:var(--lab-ds-semantic-container-space-padding-xs)}.table-header{border-radius:var(--lab-ds-semantic-placeholder-border-radius-s)}table{width:100%;border-spacing:0px}table thead th{position:sticky;top:0;z-index:1}.header-right .cell-content.sortable{justify-content:end}.cell-content.sortable.cell-number{justify-content:end}.header-cell:first-child{border-bottom-left-radius:var(--lab-ds-semantic-placeholder-border-radius-s);border-top-left-radius:var(--lab-ds-semantic-placeholder-border-radius-s)}.header-cell:last-child{border-bottom-right-radius:var(--lab-ds-semantic-placeholder-border-radius-s);border-top-right-radius:var(--lab-ds-semantic-placeholder-border-radius-s)}.header-cell{background-color:var(--lab-ds-semantic-selectable-color-bg-cloudy);border-color:var(--lab-ds-semantic-selectable-color-bg-cloudy)}.cell-container{display:flex;align-items:center;color:var(--lab-ds-semantic-color-fg-default);gap:var(--lab-ds-semantic-placeholder-space-gap-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m)}.cell-content{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--lab-ds-semantic-placeholder-space-gap-s);padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm)}.cell-order{display:flex;flex-direction:column}.header-cell .header-title{font:var(--lab-ds-semantic-typography-heading-h6);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cell-row-container-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cell-row-container-avatar{display:flex;align-items:center;gap:var(--lab-ds-semantic-placeholder-space-gap-xs);overflow:hidden}.cell-row-text-icon{display:grid;text-align:right;justify-content:right;color:var(--lab-ds-semantic-color-fg-default)}.cell-row-container{display:flex;align-items:center;justify-content:space-between}.cell-row-components{display:flex;justify-content:center}.cell-row{padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);text-align:center;max-width:3.125rem;border-bottom-style:solid;border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-color:var(--lab-ds-semantic-selectable-color-border-default)}.cell-row-clickable{cursor:pointer}.cell-row-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);color:var(--lab-ds-semantic-color-fg-default)}.cell-row-number{display:flex;justify-content:end;text-align:right;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);color:var(--lab-ds-semantic-color-fg-default)}.row:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.row:hover .cell-row{border-bottom-color:rgba(0, 0, 0, 0)}.row:focus{outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);outline-width:var(--lab-ds-semantic-selectable-border-width-s)}";const o=class{constructor(a){e(this,a);this.finalLineNextPage=l(this,"finalLineNextPage",7);this.sortAsc=l(this,"sortAsc",7);this.sortDesc=l(this,"sortDesc",7);this.data=undefined;this.actionField=false;this.loading=false;this.headerPosition="left";this.sortConfig=undefined}handleSortAsc(e){if(e===null||e===void 0?void 0:e.sortable){if(e.customSort){this.sortAsc.emit(e.colKey);return}this.sortConfig={key:e.colKey,direction:"asc"}}}handleSortDesc(e){if(e===null||e===void 0?void 0:e.sortable){if(e.customSort){this.sortDesc.emit(e.colKey);return}this.sortConfig={key:e.colKey,direction:"desc"}}}sortData(e){if(!e){return}const{key:l,direction:a}=e;this.data.rows.sort(((e,s)=>{var t,o;let i=((t=e[l].number)===null||t===void 0?void 0:t.title)?e[l].number.title:e[l].text.title;let r=((o=s[l].number)===null||o===void 0?void 0:o.title)?s[l].number.title:s[l].text.title;if(a==="asc"){return i>r?1:-1}if(a==="desc"){return i<r?1:-1}}))}componentDidRender(){const e=this.el.querySelector(".v4-table");e.addEventListener("scroll",(()=>{if(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<1){this.finalLineNextPage.emit(true)}}),{passive:true})}render(){var e,l,s,t;return a("div",{class:`v4-table scroll-customized header-${this.headerPosition}`},a("table",null,a("thead",null,a("tr",{class:"table-header"},(l=(e=this.data)===null||e===void 0?void 0:e.headers)===null||l===void 0?void 0:l.map((e=>a("th",{class:"header-cell"},this.headerPosition==="right"||e.type==="number"?a("div",{class:"cell-container"},e.sortable&&a("div",{class:"cell-order"},a("lab-ds-icon-selectable",{onClick:()=>{this.handleSortAsc(e)},size:"x-small",icon:"expand_less"}),a("lab-ds-icon-selectable",{onClick:()=>{this.handleSortDesc(e)},size:"x-small",icon:"expand_more"})),a("div",{class:`cell-content ${e.type==="number"?"cell-number":""} ${e.sortable?"sortable":""}`},e.icon&&!e.sortable&&a("lab-ds-icon-not-selectable",{class:"header-cell-icon",size:"small",icon:e.icon}),a("span",{class:"header-title"},e.title))):a("div",{class:"cell-container"},a("div",{class:"cell-content"},a("span",{class:"header-title"},e.title),e.icon&&!e.sortable&&a("lab-ds-icon-not-selectable",{class:"header-cell-icon",size:"small",icon:e.icon})),e.sortable&&a("div",{class:"cell-order"},a("lab-ds-icon-selectable",{onClick:()=>{this.handleSortAsc(e)},size:"x-small",icon:"expand_less"}),a("lab-ds-icon-selectable",{onClick:()=>{this.handleSortDesc(e)},size:"x-small",icon:"expand_more"})))))),this.actionField&&a("th",{class:"header-cell"}))),!this.loading&&a("tbody",null,(t=(s=this.data)===null||s===void 0?void 0:s.rows)===null||t===void 0?void 0:t.map(((e,l)=>{var s;return a("tr",{key:l,tabIndex:0,class:"row"},this.data.headers.map((l=>{var s,t,o,i,r,d,c,n,b,v,u,h,m,p,g,f,w,x,y,k;return a("td",{onClick:a=>{var s,t;if(l.type==="text"||"number"){a.preventDefault();((s=e[l.colKey])===null||s===void 0?void 0:s.handleRow)&&((t=e[l.colKey])===null||t===void 0?void 0:t.handleRow())}else{return}},style:{width:`${100/this.data.headers.length}%`},class:`cell-row ${l.type==="text"||"number"?"cell-row-clickable":""}`},l.type==="text"&&a("div",{class:"cell-row-container"},a("div",{class:"cell-row-container-avatar"},((t=(s=e[l.colKey])===null||s===void 0?void 0:s.text)===null||t===void 0?void 0:t.avatar)&&a("lab-ds-avatar",{size:"small",imageSRC:(i=(o=e[l.colKey])===null||o===void 0?void 0:o.text)===null||i===void 0?void 0:i.avatarImgSRC}),a("div",{class:"cell-row-container-text"},a("span",{title:((d=(r=e[l.colKey])===null||r===void 0?void 0:r.text)===null||d===void 0?void 0:d.title)||"-",class:"cell-row-text"},((n=(c=e[l.colKey])===null||c===void 0?void 0:c.text)===null||n===void 0?void 0:n.title)||"-"))),a("div",{class:"cell-row-text-icon"},((v=(b=e[l.colKey])===null||b===void 0?void 0:b.text)===null||v===void 0?void 0:v.icon)&&a("lab-ds-icon-not-selectable",{class:"cell-row-text-icon",icon:(h=(u=e[l.colKey])===null||u===void 0?void 0:u.text)===null||h===void 0?void 0:h.icon,size:"small"}))),l.type==="number"&&a("span",{class:"cell-row-number"},((p=(m=e[l.colKey])===null||m===void 0?void 0:m.number)===null||p===void 0?void 0:p.title)||"-"),l.type==="badge"&&a("div",{class:"cell-row-components"},a("lab-ds-badge",Object.assign({},(g=e[l.colKey])===null||g===void 0?void 0:g.badge))),l.type==="select"&&a("div",{class:"cell-row-components"},a("lab-ds-select",Object.assign({style:{width:"100%"}},(f=e[l.colKey])===null||f===void 0?void 0:f.select))),l.type==="quantify"&&a("div",{class:"cell-row-components"},a("lab-ds-quantify",Object.assign({},(w=e[l.colKey])===null||w===void 0?void 0:w.quantify))),l.type==="customize"&&a("div",{class:"cell-row-components"},a("div",Object.assign({},(y=(x=e[l.colKey])===null||x===void 0?void 0:x.customize)===null||y===void 0?void 0:y.props.props,{innerHTML:(k=e[l.colKey])===null||k===void 0?void 0:k.customize.component}))))})),this.actionField&&a("td",{class:"cell-row"},a("lab-ds-context-menu",Object.assign({listPosition:"right"},(s=e===null||e===void 0?void 0:e.action)===null||s===void 0?void 0:s.action))))})))),this.loading&&a("div",{class:"table-loading"},a("lab-ds-skeleton",null)))}get el(){return s(this)}static get watchers(){return{sortConfig:["sortData"]}}};o.style=t;export{o as lab_ds_table};
//# sourceMappingURL=p-956fa403.entry.js.map