@scania/tegel
Version:
Tegel Design System
462 lines (460 loc) • 19.1 kB
JavaScript
import { h, Host, } from "@stencil/core";
import generateUniqueId from "../../../utils/generateUniqueId";
const relevantTableProps = [
'verticalDividers',
'compactDesign',
'noMinWidth',
'modeVariant',
'multiselect',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For the cells.
* @slot expand-row - Slot for the expanded row.
* @part row - Selector for the main row of the table.
* @part expand-row - Selector for the expanded row of the table.
* @part expand-row-cell - Selector for the cell in the expanded row of the table.
*/
export class TdsTableBodyRowExpandable {
constructor() {
/** In case that automatic count of columns does not work, user can manually set this one.
* Take in mind that expandable control is column too */
this.colSpan = null;
/** ID for the table row. Randomly generated if not specified. */
this.rowId = generateUniqueId();
/** Controls the overflow behavior of the expandable row content */
this.overflow = 'auto';
/** Sets isExpanded state to true or false internally */
/** Enables auto-collapse of other expandable rows when one row is expanded */
this.autoCollapse = false;
/** Aria label for the expand button, providing an accessible description */
this.tdsAriaLabelExpandButton = '';
/** Marks the row as selected, used for multiselect table. */
this.selected = false;
/** Marks the row as disabled, used for multiselect table. */
this.disabled = false;
/** Sets isExpanded state to true or fals internally */
this.isExpanded = false;
this.tableId = '';
this.columnsNumber = null;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.modeVariant = null;
this.multiselect = false;
}
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];
});
}
}
handleRowExpand(event) {
/** Collapse all other rows when autoCollapse is true and a row is expanded */
if (this.autoCollapse &&
event.detail.isExpanded &&
event.detail.rowId !== this.rowId &&
event.detail.tableId === this.tableId) {
this.collapse();
}
}
watchExpanded(newValue) {
if (newValue !== this.isExpanded) {
this.isExpanded = newValue;
this.tdsChange.emit({
rowId: this.rowId,
isExpanded: this.isExpanded,
tableId: this.tableId,
});
}
}
/** Method to expand table row */
async expand() {
this.isExpanded = true;
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
/** Method to collapse table row */
async collapse() {
this.isExpanded = false;
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
connectedCallback() {
var _a;
/* if user did set a prop we use that as default behaviour */
if (this.expanded !== undefined) {
this.isExpanded = this.expanded;
}
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() {
var _a;
if (this.colSpan !== null) {
this.columnsNumber = this.colSpan;
}
else {
const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
if (header) {
// Start with the number of data columns (header cells from slot)
let totalColumns = header.childElementCount;
// Add 1 for the expandable row control column
totalColumns += 1;
// Add 1 if multiselect is enabled (checkbox column)
if (this.multiselect) {
totalColumns += 1;
}
this.columnsNumber = totalColumns;
}
}
}
sendValue() {
this.internalTdsRowExpanded.emit([this.tableId, this.isExpanded]);
this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
}
onChangeHandler(event) {
this.isExpanded = event.currentTarget.checked === true;
this.sendValue();
}
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()),
});
}
render() {
var _a;
return (h(Host, { key: 'a9d04614f8d871750cb2fa00b1a337d6f9e28ace', class: {
'tds-table__row': true,
'tds-table__row-expand--active': this.isExpanded,
'tds-table__compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
} }, h("tr", { key: '3793225d2c27f912c163412d60a20b02bd2371d8', id: `expandable-content-${this.rowId}`, class: {
'tds-table__row': true,
'tds-table__row--expanded': this.isExpanded,
'tds-table__row--selected': this.selected,
}, part: "row" }, this.multiselect && (h("td", { key: 'e3f677c5a981643bd962322c2af8fa5f211dfedf', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'afc00dda710e7e264c37211b4f616899939d1430', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: 'b6ec0d7bd81f5006cd3947b2c3381db72b879e37', class: {
'tds-table__cell-expand': true,
} }, h("label", { key: '4f509a0334697c59ee574a9913ced773923c7e8d', class: "tds-table__expand-control-container" }, h("input", { key: 'b9dc3b631f37bf872c4e0072a9bca78980d69252', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'bf6624feb9e7be71c1abf792c8ea9d9009d08ff2', class: "tds-expendable-row-icon" }, h("svg", { key: '6cd57f6ab7df0bed1a5253c4cad14c488ca9b086', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1f06b5699c21f9ba200ceb6fe2103510061c86cb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'dff5aa77425f0bae12cf17bbdd2e46c4d7e54e68' })), h("tr", { key: '1e087bbf254e7fb07a7673ebef3008be850c33db', class: {
'tds-table__row-expand': true,
'tds-table__row-expand--expanded': this.isExpanded,
}, part: "expand-row" }, h("td", { key: 'bd1c81dcbadd11aca4483f481e06392d0a508a25', class: {
'tds-table__cell-expand': true,
'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
}, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: 'c99022dc16a229a351bc800989c1b500701b8678', style: {
overflow: this.overflow,
} }, h("slot", { key: '2e8dbbb470f6ac21eee98a712a3542774d5445a5', name: "expand-row" }))))));
}
static get is() { return "tds-table-body-row-expandable"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-body-row-expandable.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-body-row-expandable.css"]
};
}
static get properties() {
return {
"colSpan": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number | null",
"resolved": "null | number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "In case that automatic count of columns does not work, user can manually set this one.\nTake in mind that expandable control is column too"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "col-span",
"defaultValue": "null"
},
"rowId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "ID for the table row. Randomly generated if not specified."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "row-id",
"defaultValue": "generateUniqueId()"
},
"expanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Sets isExpanded state to true or false externally"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "expanded"
},
"overflow": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'auto' | 'hidden' | 'visible'",
"resolved": "\"auto\" | \"hidden\" | \"visible\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the overflow behavior of the expandable row content"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "overflow",
"defaultValue": "'auto'"
},
"autoCollapse": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables auto-collapse of other expandable rows when one row is expanded"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "auto-collapse",
"defaultValue": "false"
},
"tdsAriaLabelExpandButton": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aria label for the expand button, providing an accessible description"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "tds-aria-label-expand-button",
"defaultValue": "''"
},
"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"
}
};
}
static get states() {
return {
"isExpanded": {},
"tableId": {},
"columnsNumber": {},
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"modeVariant": {},
"multiselect": {}
};
}
static get events() {
return [{
"method": "internalTdsRowExpanded",
"name": "internalTdsRowExpanded",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Sends out expanded status which is used by the Table header component"
}],
"text": ""
},
"complexType": {
"original": "object",
"resolved": "object",
"references": {}
}
}, {
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique table row identifier and isExpanded status when it is expanded/collapsed."
},
"complexType": {
"original": "{\n rowId: string;\n isExpanded: boolean;\n tableId: string | undefined;\n }",
"resolved": "{ rowId: string; isExpanded: boolean; tableId: string | undefined; }",
"references": {}
}
}, {
"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": {}
}
}];
}
static get methods() {
return {
"expand": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to expand table row",
"tags": []
}
},
"collapse": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to collapse table row",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "expanded",
"methodName": "watchExpanded"
}];
}
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "tdsChange",
"method": "handleRowExpand",
"target": "body",
"capture": false,
"passive": false
}];
}
}