@scania/tegel
Version:
Tegel Design System
167 lines (162 loc) • 8.74 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { g as generateUniqueId } from './p-11648030.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$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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 this; }
static get watchers() { return {
"multiselect": ["multiselectChanged"],
"expandableRows": ["enableExpandableRowsChanged"],
"compactDesign": ["compactDesignChanged"],
"verticalDividers": ["verticalDividersChanged"],
"noMinWidth": ["noMinWidthChanged"],
"zebraMode": ["zebraModeChanged"],
"modeVariant": ["modeVariantChanged"],
"horizontalScrollWidth": ["widthChanged"]
}; }
static get style() { return TdsTableStyle0; }
}, [1, "tds-table", {
"verticalDividers": [516, "vertical-dividers"],
"compactDesign": [516, "compact-design"],
"noMinWidth": [516, "no-min-width"],
"multiselect": [516],
"expandableRows": [516, "expandable-rows"],
"responsive": [516],
"modeVariant": [513, "mode-variant"],
"zebraMode": [513, "zebra-mode"],
"horizontalScrollWidth": [1, "horizontal-scroll-width"],
"tableId": [1, "table-id"],
"enableHorizontalScrollToolbarDesign": [32],
"enableHorizontalScrollFooterDesign": [32],
"getSelectedRows": [64]
}, undefined, {
"multiselect": ["multiselectChanged"],
"expandableRows": ["enableExpandableRowsChanged"],
"compactDesign": ["compactDesignChanged"],
"verticalDividers": ["verticalDividersChanged"],
"noMinWidth": ["noMinWidthChanged"],
"zebraMode": ["zebraModeChanged"],
"modeVariant": ["modeVariantChanged"],
"horizontalScrollWidth": ["widthChanged"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-table"];
components.forEach(tagName => { switch (tagName) {
case "tds-table":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsTable$1);
}
break;
} });
}
defineCustomElement$1();
const TdsTable = TdsTable$1;
const defineCustomElement = defineCustomElement$1;
export { TdsTable, defineCustomElement };