@scania/tegel
Version:
Tegel Design System
84 lines (79 loc) • 4.19 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
const tableHeaderInputWrapperCss = () => `:host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}`;
const relevantTableProps = ['compactDesign'];
const TdsTableHeaderInputWrapper = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** Controls if the search icon is shown */
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 (index.h(index.Host, { key: '84cc720addbfd6252297b0fd67114f7dfa920cc9', class: {
'focused-input-wrapper': this.inputFocused,
'show-icon': this.showIcon,
'tds-table__compact': this.compactDesign,
} }, this.renderSlot ? index.h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (index.h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
}
get host() { return index.getElement(this); }
};
TdsTableHeaderInputWrapper.style = tableHeaderInputWrapperCss();
exports.tds_table_header_input_wrapper = TdsTableHeaderInputWrapper;