@scania/tegel
Version:
Tegel Design System
80 lines (76 loc) • 5.25 kB
JavaScript
import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
const tableBodyCss = () => `:host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}`;
const relevantTableProps = [
'multiselect',
'expandableRows',
'zebraMode',
];
const TdsTableBody = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.multiselect = false;
this.enablePaginationTableBody = false;
this.expandableRows = false;
this.multiselectArray = [];
this.multiselectArrayJSON = '';
this.mainCheckboxStatus = false;
this.columnsNumber = 0;
this.zebraMode = 'none';
this.tableId = '';
this.bodyCheckBoxClicked = () => {
const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
};
}
internalTdsPropChangeListener(event) {
if (this.tableId === event.detail.tableId) {
event.detail.changed
.filter((changedProp) => relevantTableProps.includes(changedProp))
.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
// No need to read the value, event is here just to trigger another function
bodyCheckboxListener() {
this.bodyCheckBoxClicked();
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
}
componentWillRender() {
var _a, _b;
const headrColumn = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
const headerColumnsNo = (_b = headrColumn === null || headrColumn === void 0 ? void 0 : headrColumn.children.length) !== null && _b !== void 0 ? _b : 0;
// multiselect and expended features requires one extra column for controls...
if (this.multiselect || this.expandableRows) {
this.columnsNumber = headerColumnsNo + 1;
}
else {
this.columnsNumber = headerColumnsNo;
}
}
render() {
return (h(Host, { key: 'adce986c270e066e38b0ec79e7d33e6db616c2a2', "data-selected-rows": this.multiselectArrayJSON, class: {
'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
} }, h("slot", { key: '52a8e58d426fe4997808baadf591be93d260f701' })));
}
get host() { return getElement(this); }
};
TdsTableBody.style = tableBodyCss();
export { TdsTableBody as tds_table_body };