@scania/tegel
Version:
Tegel Design System
196 lines (195 loc) • 7.94 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() {
/** Adds title to the Table */
this.tableTitle = '';
/** Enables preview of searchbar */
this.filter = false;
/** Aria label for the search input, providing an accessible description */
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() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
if (!this.tdsSearchAriaLabel) {
console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
}
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[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: 'f8a4f02533b392cdef06823c0a8f3fc7eb65dac1', class: {
'tds-table--compact': this.compactDesign,
'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'a4d5d8b3a1f874ad6cf8b6c2f0387abb80dc6c7c', class: "tds-table__upper-bar-flex" }, h("div", { key: 'fdda25df918b94db38efec19b67486c27ecef944', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '835fa2f6230dffd4e30f219d5753959d66833717', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '1e55264456b36bfee36674ced3ab6b7a4767dd24', name: "start" })), h("div", { key: '6bbc6ca3917171e610ae162bc2ffce3e5b190874', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '49acb858ed5fefb5ef3cd7e84a11d22a8ffbbfa4', class: "tds-table__searchbar" }, h("input", { key: '72e41aef9c82e018e03c95dc3c48f1901cf1ce84', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: 'c9825e7843f1460f2d9d2aa1122790b2d2c8fd01', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '3f772922cc80abbb127ff675f4e0e9db79cd6c9a', name: "search", size: "20px" })))), h("slot", { key: '20128d959ea3a1fc97eeb4dcf41313db088feae5', 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"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "table-title",
"defaultValue": "''"
},
"filter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enables preview of searchbar"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "filter",
"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"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-search-aria-label",
"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 | undefined;\n query: string;\n }",
"resolved": "{ tableId: string | undefined; query: string; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}