@scania/tegel
Version:
Tegel Design System
164 lines (159 loc) • 9.04 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
const tableCss = () => `:host,:root{--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-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} 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 TdsTable = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.internalTdsTablePropChange = index.createEvent(this, "internalTdsTablePropChange", 6);
/** Enables style with vertical dividers between columns */
this.verticalDividers = false;
/** Enables style where Table toolbar, rows and footer are less high */
this.compactDesign = false;
// TODO: Due to unknown reason, one of this items has to be left as is.
// If all are false, it seems like emitting is not properly done and it affects other events in Table.
// Try setting it and observe text-align set on header cell
/** Enables multiselect feature of Table */
this.multiselect = false;
/** Enables extended row feature of Table */
this.expandableRows = false;
/** Enables Table to take 100% available width with equal spacing of columns */
this.responsive = false;
/** Variant of the component, based on current mode. */
this.modeVariant = null;
/** Enables zebra stripe mode on the table rows or columns. */
this.zebraMode = 'none';
/** Width of the table, used as the constraint for horizontal scrolling.
* **NOTE**: this will disable usage of the responsive flag
* */
this.horizontalScrollWidth = null;
/** ID used for internal Table functionality and events, must be unique.
*
* **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
* as the default ID is random and will be different every time.
*/
this.tableId = generateUniqueId.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() {
var _a, _b;
let selectedRowsData = [];
const tableBody = this.host.querySelector('tds-table-body');
// Get both regular rows and expandable rows
const regularRows = Array.from((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row')) !== null && _a !== void 0 ? _a : []).filter((element) => element.selected);
const expandableRows = Array.from((_b = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row-expandable')) !== null && _b !== void 0 ? _b : []).filter((element) => element.selected);
const selectedRows = [...regularRows, ...expandableRows];
selectedRows.forEach((row) => {
let selectedRow = [];
const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
rowCells.forEach((cell) => {
var _a, _b;
const cellObject = {
cellKey: (_a = cell.cellKey) !== null && _a !== void 0 ? _a : '',
cellValue: ((_b = cell.cellValue) !== null && _b !== void 0 ? _b : 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) {
const closestTable = this.host.closest('tds-table');
if (closestTable) {
this.enableHorizontalScrollToolbarDesign =
closestTable.getElementsByTagName('tds-table-toolbar').length >= 1;
this.enableHorizontalScrollFooterDesign =
closestTable.getElementsByTagName('tds-table-footer').length >= 1;
}
}
}
render() {
return (index.h(index.Host, { key: '677bf0b8c1df0154c90438ad8af1c947b701a1f8', class: {
'tds-table--responsive': this.responsive,
'tds-mode-variant-primary': this.modeVariant === 'primary',
'tds-mode-variant-secondary': this.modeVariant === 'secondary',
} }, index.h("table", { key: '673a4b1bae0b0430760697b0312611d0a91421bf', 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,
} }, index.h("slot", { key: '218dfb52cd9498b0c72839dd6d0c2f4bb71a89cb' }))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"multiselect": [{
"multiselectChanged": 0
}],
"expandableRows": [{
"enableExpandableRowsChanged": 0
}],
"compactDesign": [{
"compactDesignChanged": 0
}],
"verticalDividers": [{
"verticalDividersChanged": 0
}],
"noMinWidth": [{
"noMinWidthChanged": 0
}],
"zebraMode": [{
"zebraModeChanged": 0
}],
"modeVariant": [{
"modeVariantChanged": 0
}],
"horizontalScrollWidth": [{
"widthChanged": 0
}]
}; }
};
TdsTable.style = tableCss();
exports.tds_table = TdsTable;