@scania/tegel
Version:
Tegel Design System
230 lines (229 loc) • 8.76 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'multiselect',
'expandableRows',
'verticalDividers',
'compactDesign',
'noMinWidth',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For the header cells.
*/
export class TdsTableHeaderRow {
constructor() {
this.allSelected = false;
this.selected = undefined;
this.disabled = false;
this.indeterminate = false;
this.multiselect = false;
this.expandableRows = false;
this.mainCheckboxSelected = false;
this.mainExpendSelected = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.whiteBackground = false;
this.enableToolbarDesign = 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];
});
}
}
internalTdsRowExpandedListener(event) {
if (this.tableId === event.detail[0]) {
// TODO: Improve this logic. Why we get late repose in DOM?
setTimeout(() => {
this.bodyExpandClicked();
}, 100);
}
}
bodyExpandClicked() {
const numberOfExtendRowsActive = this.host.parentElement
.querySelector('tds-table-body')
.getElementsByClassName('tds-table__row-extend--active').length;
const numberOfExtendRows = this.host.parentElement
.querySelector('tds-table-body')
.getElementsByTagName('tds-table-body-row-expendable').length;
if (numberOfExtendRows === numberOfExtendRowsActive) {
this.mainExpendSelected = true;
}
else {
this.mainExpendSelected = false;
}
}
connectedCallback() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
componentWillRender() {
this.enableToolbarDesign =
this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
}
async handleCheckboxChange(event) {
this.allSelected = event.detail.checked;
this.tdsSelectAll.emit({
tableId: this.tableId,
checked: event.detail.checked,
selectedRows: await this.tableEl.getSelectedRows(),
});
}
render() {
return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
'tds-table--compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--toolbar-available': this.enableToolbarDesign,
} }, h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
}
static get is() { return "tds-table-header"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-header.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-header.css"]
};
}
static get properties() {
return {
"allSelected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Deprecated, use selected instead."
}],
"text": ""
},
"attribute": "all-selected",
"reflect": true,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prop for controlling the checked/unchecked state of the \"All selected\"-checkbox."
},
"attribute": "selected",
"reflect": true
},
"disabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Prop for controlling the enabled/disabled state of the \"All selected\"-checkbox."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prop for controlling the indeterminate state of the \"All selected\"-checkbox."
},
"attribute": "indeterminate",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"multiselect": {},
"expandableRows": {},
"mainCheckboxSelected": {},
"mainExpendSelected": {},
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"whiteBackground": {},
"enableToolbarDesign": {},
"tableId": {}
};
}
static get events() {
return [{
"method": "tdsSelectAll",
"name": "tdsSelectAll",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the status of the select all checkbox changes."
},
"complexType": {
"original": "{\n tableId: string;\n checked: boolean;\n selectedRows: any[];\n }",
"resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "internalTdsRowExpanded",
"method": "internalTdsRowExpandedListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}