@scania/tegel
Version:
Tegel Design System
142 lines (141 loc) • 4.91 kB
JavaScript
import { h, Host } from "@stencil/core";
const relevantTableProps = ['compactDesign'];
export class TdsTableHeaderInputWrapper {
constructor() {
this.showIcon = true;
this.renderSlot = true;
this.inputFocused = false;
this.compactDesign = 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') {
console.error(`Table prop is not supported: ${changedProp}`); // More informative error
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
connectedCallback() {
const tableEl = this.host.closest('tds-table');
if (tableEl) {
this.tableId = tableEl.getAttribute('table-id');
}
else {
console.error('Failed to find parent tds-table element.');
}
}
componentWillLoad() {
const tableEl = this.host.closest('tds-table');
if (tableEl) {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = tableEl[tablePropName];
});
}
else {
console.error('Failed to find parent tds-table element.');
}
}
handleSlotChange() {
this.validateSlot();
}
validateSlot() {
const children = Array.from(this.host.children).filter((element) => element.tagName === 'INPUT');
if (children.length !== 1) {
console.warn('TABLE-HEADER-INPUT-WRAPPER: Wrapper only accepts input as children.');
this.renderSlot = false;
}
else {
if (!this.renderSlot)
this.renderSlot = true;
const input = children[0];
input.addEventListener('focus', () => {
this.inputFocused = true;
});
input.addEventListener('blur', () => {
this.inputFocused = false;
});
}
}
render() {
return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
'focused-input-wrapper': this.inputFocused,
'show-icon': this.showIcon,
'tds-table__compact': this.compactDesign,
} }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
}
static get is() { return "tds-table-header-input-wrapper"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-header-input-wrapper.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-header-input-wrapper.css"]
};
}
static get properties() {
return {
"showIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls if the search icon is shown"
},
"attribute": "show-icon",
"reflect": false,
"defaultValue": "true"
},
"compactDesign": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "compact-design",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"renderSlot": {},
"inputFocused": {},
"tableId": {}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}