@scania/tegel/dist/components/tds-table-header-input-wrapper.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$2 } from './p-b390ece5.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 TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;

const relevantTableProps = ['compactDesign'];
const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderInputWrapper extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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));
    }
    get host() { return this; }
    static get style() { return TdsTableHeaderInputWrapperStyle0; }
}, [1, "tds-table-header-input-wrapper", {
        "showIcon": [4, "show-icon"],
        "compactDesign": [4, "compact-design"],
        "renderSlot": [32],
        "inputFocused": [32],
        "tableId": [32]
    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-table-header-input-wrapper", "tds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-table-header-input-wrapper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTableHeaderInputWrapper$1);
            }
            break;
        case "tds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const TdsTableHeaderInputWrapper = TdsTableHeaderInputWrapper$1;
const defineCustomElement = defineCustomElement$1;

export { TdsTableHeaderInputWrapper, defineCustomElement };