@scania/tegel
Version:
Tegel Design System
371 lines (370 loc) • 14.9 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'multiselect',
'expandableRows',
'compactDesign',
'noMinWidth',
'verticalDividers',
];
/**
* @slot <default> - <b>Unnamed slot.</b> For the cell contents.
*/
export class TdsTableHeaderCell {
constructor() {
this.sortButtonClick = () => {
if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
this.sortingDirection = 'asc';
}
else {
this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
}
this.sortedByMyKey = true;
this.tdsSort.emit({
tableId: this.tableId,
columnKey: this.cellKey,
sortingDirection: this.sortingDirection,
});
this.internalSortButtonClicked.emit({
tableId: this.tableId,
key: this.cellKey,
});
};
this.headerCellContent = () => {
if (this.sortable) {
return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState }, "aria-label": this.tdsAriaLabelSortButton }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { svgTitle: "sorting", class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { svgTitle: "arrow down", class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
}
return (h("p", { class: {
'tds-table__header-text': true,
'tds-table__header-text-no-padding': this.disablePadding,
}, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
};
this.onHeadCellHover = (key) => {
this.internalTdsHover.emit({
tableId: this.tableId,
key,
});
};
this.cellKey = undefined;
this.cellValue = undefined;
this.customWidth = undefined;
this.sortable = false;
this.textAlign = 'left';
this.disablePadding = false;
this.tdsAriaLabelSortButton = '';
this.textAlignState = undefined;
this.sortingDirection = undefined;
this.sortedByMyKey = false;
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.multiselect = false;
this.enableToolbarDesign = false;
this.tableId = '';
this.expandableRows = 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];
});
}
}
updateOptionsContent(event) {
const { tableId, key } = event.detail;
if (this.tableId === tableId) {
if (this.cellKey !== key) {
this.sortedByMyKey = false;
// To sync with CSS transition timing
setTimeout(() => {
this.sortingDirection = undefined;
}, 200);
}
}
}
connectedCallback() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
componentWillRender() {
// if text alignment matches any of the acceptable values, use it. Otherwise, set "left" as default
this.textAlignState = ['left', 'start', 'right', 'end', 'center'].includes(this.textAlign)
? this.textAlign
: 'left';
// To enable body cells text align per rules set in head cell
this.internalTdsTextAlign.emit([this.tableId, this.cellKey, this.textAlignState]);
this.enableToolbarDesign =
this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
}
getAriaSort() {
if (this.sortingDirection === 'asc')
return 'ascending';
if (this.sortingDirection === 'desc')
return 'descending';
return 'none';
}
render() {
return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', class: {
'tds-table__header-cell': true,
'tds-table__header-cell--sortable': this.sortable,
'tds-table__header-cell--is-sorted': this.sortedByMyKey,
'tds-table__header-cell--custom-width': this.customWidth !== '',
'tds-table--compact': this.compactDesign,
'tds-table--divider': this.verticalDividers,
'tds-table--no-min-width': this.noMinWidth,
'tds-table--extra-column': this.multiselect || this.expandableRows,
'tds-table--toolbar-available': this.enableToolbarDesign,
'tds-table--no-padding': this.disablePadding,
}, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
}
static get is() { return "tds-header-cell"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-header-cell.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-header-cell.css"]
};
}
static get properties() {
return {
"cellKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The value of column key, usually comes from JSON, needed for sorting"
},
"attribute": "cell-key",
"reflect": true
},
"cellValue": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text that displays in column cell"
},
"attribute": "cell-value",
"reflect": true
},
"customWidth": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "In case noMinWidth is set, the user has to specify the width value for each column."
},
"attribute": "custom-width",
"reflect": true
},
"sortable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables sorting on that column"
},
"attribute": "sortable",
"reflect": false,
"defaultValue": "false"
},
"textAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'left' | 'start' | 'right' | 'end' | 'center'",
"resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Setting for text align, default is \"left\". Other accepted values are \"left\", \"start\", \"right\" or \"end\"."
},
"attribute": "text-align",
"reflect": true,
"defaultValue": "'left'"
},
"disablePadding": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables internal padding. Useful when passing other components to cell."
},
"attribute": "disable-padding",
"reflect": true,
"defaultValue": "false"
},
"tdsAriaLabelSortButton": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Aria label for the sort button, providing an accessible description"
},
"attribute": "tds-aria-label-sort-button",
"reflect": true,
"defaultValue": "''"
}
};
}
static get states() {
return {
"textAlignState": {},
"sortingDirection": {},
"sortedByMyKey": {},
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"multiselect": {},
"enableToolbarDesign": {},
"tableId": {},
"expandableRows": {}
};
}
static get events() {
return [{
"method": "tdsSort",
"name": "tdsSort",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Table identifier, column key and sorting direction to the tds-table-body component,\ncan also be listened to implement custom-sorting logic."
},
"complexType": {
"original": "{\n tableId: string;\n columnKey: string;\n sortingDirection: 'asc' | 'desc';\n }",
"resolved": "{ tableId: string; columnKey: string; sortingDirection: \"desc\" | \"asc\"; }",
"references": {}
}
}, {
"method": "internalSortButtonClicked",
"name": "internalSortButtonClicked",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Sends unique Table identifier, column key and sorting direction to the tds-table-body component,\ncan also be listened to implement custom-sorting logic."
}],
"text": ""
},
"complexType": {
"original": "{\n tableId: string;\n key: string;\n }",
"resolved": "{ tableId: string; key: string; }",
"references": {}
}
}, {
"method": "internalTdsTextAlign",
"name": "internalTdsTextAlign",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Sends unique Table identifier,\ncolumn key and text align value so the body cells with a same key take the same text alignment as header cell"
}],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "internalTdsHover",
"name": "internalTdsHover",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": "Sends unique Table identifier, column key so the body cells with the same key change background when user hovers over header cell"
}],
"text": ""
},
"complexType": {
"original": "{\n tableId: string;\n key: string;\n }",
"resolved": "{ tableId: string; key: string; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsPropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}, {
"name": "internalSortButtonClicked",
"method": "updateOptionsContent",
"target": "body",
"capture": false,
"passive": false
}];
}
}