@scania/tegel/dist/components/tds-table-body-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 tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;

const relevantTableProps = ['compactDesign'];
const TdsTableBodyInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyInputWrapper 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-BODY-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;
            });
            // Handle Enter key event
            input.addEventListener('keydown', (event) => {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    this.moveToNextEditableCell();
                }
            });
        }
    }
    moveToNextEditableCell() {
        const allEditableCells = Array.from(document.querySelectorAll('tds-table-body-input-wrapper'));
        const currentIndex = allEditableCells.indexOf(this.host);
        if (currentIndex !== -1 && currentIndex < allEditableCells.length - 1) {
            const nextCell = allEditableCells[currentIndex + 1];
            const nextInput = nextCell.querySelector('input');
            if (nextInput) {
                nextInput.focus();
            }
        }
    }
    render() {
        return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', 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", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
    }
    get host() { return this; }
    static get style() { return TdsTableBodyInputWrapperStyle0; }
}, [1, "tds-table-body-input-wrapper", {
        "showIcon": [4, "show-icon"],
        "renderSlot": [32],
        "inputFocused": [32],
        "compactDesign": [32],
        "tableId": [32]
    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-table-body-input-wrapper", "tds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-table-body-input-wrapper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTableBodyInputWrapper$1);
            }
            break;
        case "tds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const TdsTableBodyInputWrapper = TdsTableBodyInputWrapper$1;
const defineCustomElement = defineCustomElement$1;

export { TdsTableBodyInputWrapper, defineCustomElement };