@scania/tegel
Version:
Tegel Design System
220 lines (219 loc) • 8.39 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'multiselect',
'verticalDividers',
'compactDesign',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For the cells.
*/
export class TdsTableBodyRow {
constructor() {
/** Marks the row as selected, used for multiselect table. */
this.selected = false;
/** Marks the row as disabled, used for multiselect table. */
this.disabled = false;
/** Makes the row clickable and tabbable for accessibility purposes. */
this.clickable = false;
this.multiselect = false;
this.mainCheckBoxStatus = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.tableId = '';
}
async handleCheckboxChange(event) {
var _a;
this.selected = event.detail.checked;
this.tdsSelect.emit({
tableId: this.tableId,
checked: this.selected,
selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
});
}
handleRowClick(e) {
var _a, _b, _c;
if (!this.clickable)
return;
const rowIndex = Array.from((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []).indexOf(this.host);
this.tdsClick.emit({
event: e,
tableId: this.tableId,
rowIndex: rowIndex,
});
}
handleKeyDown(e) {
if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
this.handleRowClick(e);
}
}
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];
});
}
}
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];
});
}
}
render() {
return (h(Host, { key: 'f4e5c9acd820b468b93bbd83100695c56dca306c', tabindex: this.clickable ? '0' : null, class: {
'tds-table__row': true,
'tds-table__row--selected': this.selected,
'tds-table__compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table__row--clickable': this.clickable,
}, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '6c51cf7b6d7656912de72231b55c66534e0b1f41', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '3f33bb0e7acb689e1034869df00c810dee30a296', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '8944284b39ffa3b26e3f83e73a8fd98402bde105' })));
}
static get is() { return "tds-table-body-row"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-body-row.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-body-row.css"]
};
}
static get properties() {
return {
"selected": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Marks the row as selected, used for multiselect table."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "selected",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Marks the row as disabled, used for multiselect table."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"clickable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Makes the row clickable and tabbable for accessibility purposes."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "clickable",
"defaultValue": "false"
}
};
}
static get states() {
return {
"multiselect": {},
"mainCheckBoxStatus": {},
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"tableId": {}
};
}
static get events() {
return [{
"method": "tdsSelect",
"name": "tdsSelect",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when a row is selected/deselected."
},
"complexType": {
"original": "{\n tableId: string | undefined;\n checked: boolean;\n selectedRows: object[] | undefined;\n }",
"resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
"references": {}
}
}, {
"method": "tdsClick",
"name": "tdsClick",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when a row is clicked."
},
"complexType": {
"original": "{\n event: MouseEvent;\n tableId: string | undefined;\n rowIndex: number;\n }",
"resolved": "{ event: MouseEvent; tableId: string | undefined; rowIndex: number; }",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}