@scania/tegel
Version:
Tegel Design System
246 lines (245 loc) • 9.73 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() {
/** @deprecated Deprecated, use selected instead. */
this.allSelected = false;
/** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
this.disabled = false;
/** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
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() {
var _a;
const parentBody = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-body');
if (parentBody) {
const numberOfExtendRowsActive = parentBody.getElementsByClassName('tds-table__row-extend--active').length;
const numberOfExtendRows = parentBody.getElementsByTagName('tds-table-body-row-expendable').length;
if (numberOfExtendRows === numberOfExtendRowsActive) {
this.mainExpendSelected = true;
}
else {
this.mainExpendSelected = false;
}
}
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
}
componentWillRender() {
const closestTable = this.host.closest('tds-table');
if (closestTable) {
this.enableToolbarDesign =
(closestTable === null || closestTable === void 0 ? void 0 : closestTable.getElementsByTagName('tds-table-toolbar').length) >= 1;
}
}
async handleCheckboxChange(event) {
var _a;
this.allSelected = event.detail.checked;
this.tdsSelectAll.emit({
tableId: this.tableId,
checked: event.detail.checked,
selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
});
}
render() {
return (h(Host, { key: '6694732da4046fe06dd5583dabcd7f08b1eca27e', class: {
'tds-table--compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--toolbar-available': this.enableToolbarDesign,
} }, h("tr", { key: 'ae44f1f20feedd4833dcad0f5eb166dbcb8271c2' }, this.multiselect && (h("th", { key: '7164dda86ee3eb21dc04c11ebd0dd074a8fdf00d', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '791a29bf597e9395c84bae6d408f146f8d240967', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '6bad99498d9e67dfe068e393ed15dc229a6229de', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '5818a44e2ce485265fecef36135dbbe113ac2bdf', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a8cd6f4cde24922bf8a1998a4120c7ff02cf60f3' }))));
}
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": ""
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "all-selected",
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Prop for controlling the checked/unchecked state of the \"All selected\"-checkbox."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "selected"
},
"disabled": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Prop for controlling the enabled/disabled state of the \"All selected\"-checkbox."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "indeterminate",
"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 | undefined;\n checked: boolean;\n selectedRows: object[] | undefined;\n }",
"resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
"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
}];
}
}