@scania/tegel
Version:
Tegel Design System
185 lines (184 loc) • 7.42 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'compactDesign',
'noMinWidth',
'verticalDividers',
'horizontalScrollWidth',
];
/**
* @slot start - Slot for the start (left side) of the Table Toolbar.
* @slot end - Slot for the end (right side) of the Table Toolbar.
*/
export class TdsTableToolbar {
constructor() {
this.tableTitle = '';
this.filter = false;
this.tdsSearchAriaLabel = '';
this.verticalDividers = false;
this.compactDesign = false;
this.noMinWidth = false;
this.whiteBackground = false;
this.tableId = '';
this.horizontalScrollWidth = null;
}
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() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
if (!this.tdsSearchAriaLabel) {
console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
}
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
}
handleSearch(event) {
const searchTerm = event.currentTarget.value.toLowerCase();
const tdsTableSearchBar = event.currentTarget.parentElement;
this.tdsFilter.emit({
tableId: this.tableId,
query: searchTerm,
});
/** NOTE: Could these be handles in pure CSS? */
if (searchTerm.length > 0) {
tdsTableSearchBar.classList.add('tds-table__searchbar--active');
}
else {
tdsTableSearchBar.classList.remove('tds-table__searchbar--active');
}
}
getStyles() {
const styles = {};
if (this.horizontalScrollWidth) {
styles.width = `${this.horizontalScrollWidth}px`;
}
return styles;
}
render() {
return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
'tds-table--compact': this.compactDesign,
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
}
static get is() { return "tds-table-toolbar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-toolbar.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-toolbar.css"]
};
}
static get properties() {
return {
"tableTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Adds title to the Table"
},
"attribute": "table-title",
"reflect": true,
"defaultValue": "''"
},
"filter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables preview of searchbar"
},
"attribute": "filter",
"reflect": true,
"defaultValue": "false"
},
"tdsSearchAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Aria label for the search input, providing an accessible description"
},
"attribute": "tds-search-aria-label",
"reflect": false,
"defaultValue": "''"
}
};
}
static get states() {
return {
"verticalDividers": {},
"compactDesign": {},
"noMinWidth": {},
"whiteBackground": {},
"tableId": {},
"horizontalScrollWidth": {}
};
}
static get events() {
return [{
"method": "tdsFilter",
"name": "tdsFilter",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Used for sending users' input to the main parent tds-table the component,\ncan also be listened to in order to implement custom sorting logic."
},
"complexType": {
"original": "{\n tableId: string;\n query: string;\n }",
"resolved": "{ tableId: string; query: string; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}