@scania/tegel
Version:
Tegel Design System
264 lines (263 loc) • 9.63 kB
JavaScript
import { h, Host } from "@stencil/core";
const relevantTableProps = [
'verticalDividers',
'compactDesign',
'noMinWidth',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For the cell contents.
*/
export class TdsTableBodyCell {
constructor() {
/** Disables internal padding. Useful when passing other components to cell. */
this.disablePadding = false;
this.textAlignState = undefined;
this.activeSorting = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.tableId = '';
}
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];
});
}
}
// Listen to headKey from table-header-element
internalTdsHoverListener(event) {
const { tableId, key } = event.detail;
if (tableId === this.tableId) {
this.activeSorting = this.cellKey === key;
}
}
// Listen to internalTdsTextAlign from table-header-element
internalTdsTextAlignListener(event) {
const [receivedID, receivedKey, receivedTextAlign] = event.detail;
if (this.tableId === receivedID) {
if (this.cellKey === receivedKey) {
if (this.textAlign) {
this.textAlignState = this.textAlign;
}
else {
this.textAlignState = (['left', 'start', 'right', 'end', 'center'].includes(receivedTextAlign)
? receivedTextAlign
: 'left');
}
}
}
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
if (this.tableEl) {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
}
if (this.textAlign) {
this.textAlignState = this.textAlign;
}
}
render() {
let paddingStyle = 'var(--tds-spacing-element-16)'; // Default padding
if (this.disablePadding) {
paddingStyle = '0';
}
else if (this.compactDesign) {
paddingStyle = 'var(--tds-spacing-element-8) var(--tds-spacing-element-16)';
}
const dynamicStyles = {
textAlign: this.textAlignState,
// Conditionally set padding style
padding: paddingStyle,
};
return (h(Host, { key: '8344d3c796f2f56305924347e161d08039ae9c72', class: {
'tds-table__body-cell': true,
'tds-table__body-cell--hover': this.activeSorting,
'tds-table__compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--no-min-width': this.noMinWidth,
} }, h("td", { key: '330bec9031af90243469ab548b638a4be86dd40d', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '0af9c581a3cf0db8c94cd68cd9e500ba51fe2501' }))));
}
static get is() { return "tds-body-cell"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-body-cell.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-body-cell.css"]
};
}
static get properties() {
return {
"cellValue": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value that will be presented as text inside a cell"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "cell-value"
},
"cellKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "cell-key"
},
"disablePadding": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables internal padding. Useful when passing other components to cell."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disable-padding",
"defaultValue": "false"
},
"textAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TextAlign",
"resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\" | undefined",
"references": {
"TextAlign": {
"location": "import",
"path": "../table/table",
"id": "src/components/table/table/table.tsx::TextAlign",
"referenceLocation": "TextAlign"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Setting for text align, default value \"left\". Other accepted values are \"left\", \"start\", \"right\", \"end\" or \"center\"."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "text-align"
},
"colSpan": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Number of columns the cell should span."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "col-span"
},
"rowSpan": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Number of rows the cell should span."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "row-span"
}
};
}
static get states() {
return {
"textAlignState": {},
"activeSorting": {},
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"tableId": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsPropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "internalTdsHover",
"method": "internalTdsHoverListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "internalTdsTextAlign",
"method": "internalTdsTextAlignListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}