@scania/tegel
Version:
Tegel Design System
125 lines (121 loc) • 7.15 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
const tableCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-table--horizontal-scroll::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
const TdsTableStyle0 = tableCss;
const TdsTable = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.internalTdsTablePropChange = createEvent(this, "internalTdsTablePropChange", 6);
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = undefined;
this.multiselect = false;
this.expandableRows = false;
this.responsive = false;
this.modeVariant = null;
this.zebraMode = 'none';
this.horizontalScrollWidth = null;
this.tableId = generateUniqueId();
this.enableHorizontalScrollToolbarDesign = false;
this.enableHorizontalScrollFooterDesign = false;
}
emitInternalTdsPropChange(changedValueName, changedValue) {
this.internalTdsTablePropChange.emit({
tableId: this.tableId,
changed: [changedValueName],
[changedValueName]: changedValue,
});
}
/** Returns all selected rows data. */
async getSelectedRows() {
let selectedRowsData = [];
const tableBody = this.host.querySelector('tds-table-body');
const selectedRows = Array.from(tableBody.querySelectorAll('tds-table-body-row')).filter((element) => element.selected);
selectedRows.forEach((row) => {
let selectedRow = [];
const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
rowCells.forEach((cell) => {
var _a;
const cellObject = {
cellKey: null,
cellValue: null,
};
cellObject.cellKey = cell.cellKey;
cellObject.cellValue = (_a = cell.cellValue) !== null && _a !== void 0 ? _a : cell.innerText;
selectedRow = [...selectedRow, cellObject];
});
selectedRowsData = [...selectedRowsData, selectedRow];
});
return selectedRowsData;
}
getStyles() {
const styles = {};
if (this.horizontalScrollWidth) {
styles.width = `${this.horizontalScrollWidth}px`;
}
return styles;
}
multiselectChanged(newValue) {
this.emitInternalTdsPropChange('multiselect', newValue);
}
enableExpandableRowsChanged(newValue) {
this.emitInternalTdsPropChange('expandableRows', newValue);
}
compactDesignChanged(newValue) {
this.emitInternalTdsPropChange('compactDesign', newValue);
}
verticalDividersChanged(newValue) {
this.emitInternalTdsPropChange('verticalDividers', newValue);
}
noMinWidthChanged(newValue) {
this.emitInternalTdsPropChange('noMinWidth', newValue);
}
zebraModeChanged(newValue) {
this.emitInternalTdsPropChange('zebraMode', newValue);
}
modeVariantChanged(newValue) {
this.emitInternalTdsPropChange('modeVariant', newValue);
}
widthChanged(newValue) {
this.emitInternalTdsPropChange('horizontalScrollWidth', newValue);
}
componentWillRender() {
if (this.horizontalScrollWidth) {
this.enableHorizontalScrollToolbarDesign =
this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
this.enableHorizontalScrollFooterDesign =
this.host.closest('tds-table').getElementsByTagName('tds-table-footer').length >= 1;
}
}
render() {
return (h(Host, { key: '7a9b7fb545f7c4cd4c0f118910ce8af6d407851e', class: {
'tds-table--responsive': this.responsive,
'tds-mode-variant-primary': this.modeVariant === 'primary',
'tds-mode-variant-secondary': this.modeVariant === 'secondary',
} }, h("table", { key: '8a1c7e74c38a55e17d7cf322997f6690d6b29f3f', style: this.getStyles(), class: {
'tds-table': true,
'tds-table--compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--no-min-width': this.noMinWidth,
'tds-table--responsive': this.responsive,
'tds-table--horizontal-scroll': !!this.horizontalScrollWidth,
'tds-table--horizontal-scroll-toolbar': this.enableHorizontalScrollToolbarDesign && !this.compactDesign,
'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
} }, h("slot", { key: 'a47351a50dbd07b15f969ffaeb75f62045693968' }))));
}
get host() { return getElement(this); }
static get watchers() { return {
"multiselect": ["multiselectChanged"],
"expandableRows": ["enableExpandableRowsChanged"],
"compactDesign": ["compactDesignChanged"],
"verticalDividers": ["verticalDividersChanged"],
"noMinWidth": ["noMinWidthChanged"],
"zebraMode": ["zebraModeChanged"],
"modeVariant": ["modeVariantChanged"],
"horizontalScrollWidth": ["widthChanged"]
}; }
};
TdsTable.style = TdsTableStyle0;
export { TdsTable as tds_table };