@scania/tegel
Version:
Tegel Design System
208 lines (207 loc) • 7.59 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() {
this.selected = false;
this.disabled = false;
this.clickable = false;
this.multiselect = false;
this.mainCheckBoxStatus = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.tableId = '';
}
async handleCheckboxChange(event) {
this.selected = event.detail.checked;
this.tdsSelect.emit({
tableId: this.tableId,
checked: this.selected,
selectedRows: await this.tableEl.getSelectedRows(),
});
}
handleRowClick(e) {
if (!this.clickable)
return;
let rowIndex = Array.from(this.host.parentElement.children).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) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
}
render() {
return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', 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: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
}
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."
},
"attribute": "selected",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Marks the row as disabled, used for multiselect table."
},
"attribute": "disabled",
"reflect": true,
"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."
},
"attribute": "clickable",
"reflect": true,
"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;\n checked: boolean;\n selectedRows: any[];\n }",
"resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
"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;\n rowIndex: number;\n }",
"resolved": "{ event: MouseEvent; tableId: string; 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
}];
}
}