v4web-components
Version:
Stencil Component Starter
194 lines (189 loc) • 14.4 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$d } from './lab-ds-avatar2.js';
import { d as defineCustomElement$c } from './lab-ds-badge2.js';
import { d as defineCustomElement$b } from './lab-ds-checkbox2.js';
import { d as defineCustomElement$a } from './lab-ds-chip2.js';
import { d as defineCustomElement$9 } from './lab-ds-context-menu2.js';
import { d as defineCustomElement$8 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$7 } from './lab-ds-icon-selectable2.js';
import { d as defineCustomElement$6 } from './lab-ds-quantify2.js';
import { d as defineCustomElement$5 } from './lab-ds-radio-button2.js';
import { d as defineCustomElement$4 } from './lab-ds-search-bar2.js';
import { d as defineCustomElement$3 } from './lab-ds-select2.js';
import { d as defineCustomElement$2 } from './lab-ds-skeleton2.js';
const labDsTableCss = ".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 LabDsTable$1 = /*@__PURE__*/ proxyCustomElement(class LabDsTable extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.finalLineNextPage = createEvent(this, "finalLineNextPage", 7);
this.sortAsc = createEvent(this, "sortAsc", 7);
this.sortDesc = createEvent(this, "sortDesc", 7);
this.data = undefined;
this.actionField = false;
this.loading = false;
this.headerPosition = 'left';
this.sortConfig = undefined;
}
handleSortAsc(d) {
if (d === null || d === void 0 ? void 0 : d.sortable) {
if (d.customSort) {
this.sortAsc.emit(d.colKey);
return;
}
this.sortConfig = { key: d.colKey, direction: 'asc' };
}
}
handleSortDesc(d) {
if (d === null || d === void 0 ? void 0 : d.sortable) {
if (d.customSort) {
this.sortDesc.emit(d.colKey);
return;
}
this.sortConfig = { key: d.colKey, direction: 'desc' };
}
}
sortData(sortConfig) {
if (!sortConfig) {
return;
}
const { key, direction } = sortConfig;
this.data.rows.sort((a, b) => {
var _a, _b;
let aSort = ((_a = a[key].number) === null || _a === void 0 ? void 0 : _a.title) ? a[key].number.title : a[key].text.title;
let bSort = ((_b = b[key].number) === null || _b === void 0 ? void 0 : _b.title) ? b[key].number.title : b[key].text.title;
if (direction === 'asc') {
return aSort > bSort ? 1 : -1;
}
if (direction === 'desc') {
return aSort < bSort ? 1 : -1;
}
});
}
componentDidRender() {
const scroll = this.el.querySelector('.v4-table');
scroll.addEventListener('scroll', () => {
if (Math.abs(scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop) < 1) {
this.finalLineNextPage.emit(true);
}
}, {
passive: true,
});
}
render() {
var _a, _b, _c, _d;
return (h("div", { class: `v4-table scroll-customized header-${this.headerPosition}` }, h("table", null, h("thead", null, h("tr", { class: "table-header" }, (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.headers) === null || _b === void 0 ? void 0 :
_b.map(d => (h("th", { class: "header-cell" }, this.headerPosition === 'right' || d.type === 'number' ? (h("div", { class: "cell-container" }, d.sortable && (h("div", { class: "cell-order" }, h("lab-ds-icon-selectable", { onClick: () => {
this.handleSortAsc(d);
}, size: "x-small", icon: "expand_less" }), h("lab-ds-icon-selectable", { onClick: () => {
this.handleSortDesc(d);
}, size: "x-small", icon: "expand_more" }))), h("div", { class: `cell-content ${d.type === 'number' ? 'cell-number' : ''} ${d.sortable ? 'sortable' : ''}` }, d.icon && !d.sortable && h("lab-ds-icon-not-selectable", { class: "header-cell-icon", size: "small", icon: d.icon }), h("span", { class: "header-title" }, d.title)))) : (h("div", { class: "cell-container" }, h("div", { class: "cell-content" }, h("span", { class: "header-title" }, d.title), d.icon && !d.sortable && h("lab-ds-icon-not-selectable", { class: "header-cell-icon", size: "small", icon: d.icon })), d.sortable && (h("div", { class: "cell-order" }, h("lab-ds-icon-selectable", { onClick: () => {
this.handleSortAsc(d);
}, size: "x-small", icon: "expand_less" }), h("lab-ds-icon-selectable", { onClick: () => {
this.handleSortDesc(d);
}, size: "x-small", icon: "expand_more" })))))))), this.actionField && h("th", { class: "header-cell" }))), !this.loading && (h("tbody", null, (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.rows) === null || _d === void 0 ? void 0 : _d.map((row, index) => {
var _a;
return (h("tr", { key: index, tabIndex: 0, class: "row" }, this.data.headers.map(header => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
return (h("td", { onClick: e => {
var _a, _b;
if (header.type === 'text' || 'number') {
e.preventDefault();
((_a = row[header.colKey]) === null || _a === void 0 ? void 0 : _a.handleRow) && ((_b = row[header.colKey]) === null || _b === void 0 ? void 0 : _b.handleRow());
}
else {
return;
}
}, style: { width: `${100 / this.data.headers.length}%` }, class: `cell-row ${header.type === 'text' || 'number' ? 'cell-row-clickable' : ''}` }, header.type === 'text' && (h("div", { class: "cell-row-container" }, h("div", { class: "cell-row-container-avatar" }, ((_b = (_a = row[header.colKey]) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.avatar) && h("lab-ds-avatar", { size: "small", imageSRC: (_d = (_c = row[header.colKey]) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.avatarImgSRC }), h("div", { class: "cell-row-container-text" }, h("span", { title: ((_f = (_e = row[header.colKey]) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f.title) || '-', class: "cell-row-text" }, ((_h = (_g = row[header.colKey]) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h.title) || '-'))), h("div", { class: "cell-row-text-icon" }, ((_k = (_j = row[header.colKey]) === null || _j === void 0 ? void 0 : _j.text) === null || _k === void 0 ? void 0 : _k.icon) && h("lab-ds-icon-not-selectable", { class: "cell-row-text-icon", icon: (_m = (_l = row[header.colKey]) === null || _l === void 0 ? void 0 : _l.text) === null || _m === void 0 ? void 0 : _m.icon, size: "small" })))), header.type === 'number' && h("span", { class: "cell-row-number" }, ((_p = (_o = row[header.colKey]) === null || _o === void 0 ? void 0 : _o.number) === null || _p === void 0 ? void 0 : _p.title) || '-'), header.type === 'badge' && (h("div", { class: "cell-row-components" }, h("lab-ds-badge", Object.assign({}, (_q = row[header.colKey]) === null || _q === void 0 ? void 0 : _q.badge)))), header.type === 'select' && (h("div", { class: "cell-row-components" }, h("lab-ds-select", Object.assign({ style: { width: '100%' } }, (_r = row[header.colKey]) === null || _r === void 0 ? void 0 : _r.select)))), header.type === 'quantify' && (h("div", { class: "cell-row-components" }, h("lab-ds-quantify", Object.assign({}, (_s = row[header.colKey]) === null || _s === void 0 ? void 0 : _s.quantify)))), header.type === 'customize' && (h("div", { class: "cell-row-components" }, h("div", Object.assign({}, (_u = (_t = row[header.colKey]) === null || _t === void 0 ? void 0 : _t.customize) === null || _u === void 0 ? void 0 : _u.props.props, { innerHTML: (_v = row[header.colKey]) === null || _v === void 0 ? void 0 : _v.customize.component }))))));
}), this.actionField && (h("td", { class: "cell-row" }, h("lab-ds-context-menu", Object.assign({ listPosition: "right" }, (_a = row === null || row === void 0 ? void 0 : row.action) === null || _a === void 0 ? void 0 : _a.action))))));
})))), this.loading && (h("div", { class: "table-loading" }, h("lab-ds-skeleton", null)))));
}
get el() { return this; }
static get watchers() { return {
"sortConfig": ["sortData"]
}; }
static get style() { return labDsTableCss; }
}, [0, "lab-ds-table", {
"data": [16],
"actionField": [4, "action-field"],
"loading": [4],
"headerPosition": [1, "header-position"],
"sortConfig": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-table", "lab-ds-avatar", "lab-ds-badge", "lab-ds-checkbox", "lab-ds-chip", "lab-ds-context-menu", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable", "lab-ds-quantify", "lab-ds-radio-button", "lab-ds-search-bar", "lab-ds-select", "lab-ds-skeleton"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-table":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsTable$1);
}
break;
case "lab-ds-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "lab-ds-badge":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "lab-ds-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "lab-ds-chip":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "lab-ds-context-menu":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "lab-ds-quantify":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "lab-ds-radio-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "lab-ds-search-bar":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lab-ds-select":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lab-ds-skeleton":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsTable = LabDsTable$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsTable, defineCustomElement };
//# sourceMappingURL=lab-ds-table.js.map