@scania/tegel/dist/components/tds-table-body-row.js

Tegel Design System

import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$2 } from './p-23aab3b9.js';

const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
const TdsTableBodyRowStyle0 = tableBodyRowCss;

const relevantTableProps = [
    'multiselect',
    'verticalDividers',
    'compactDesign',
];
const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.tdsSelect = createEvent(this, "tdsSelect", 6);
        this.tdsClick = createEvent(this, "tdsClick", 6);
        this.selected = false;
        this.disabled = false;
        this.clickable = false;
        this.multiselect = false;
        this.mainCheckBoxStatus = false;
        this.verticalDividers = false;
        this.compactDesign = false;
        this.noMinWidth = false;
        this.tableId = '';
    }
    async handleCheckboxChange(event) {
        this.selected = event.detail.checked;
        this.tdsSelect.emit({
            tableId: this.tableId,
            checked: this.selected,
            selectedRows: await this.tableEl.getSelectedRows(),
        });
    }
    handleRowClick(e) {
        if (!this.clickable)
            return;
        let rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);
        this.tdsClick.emit({
            event: e,
            tableId: this.tableId,
            rowIndex: rowIndex,
        });
    }
    handleKeyDown(e) {
        if (this.clickable && (e.key === 'Enter' || e.key === ' ')) {
            e.preventDefault();
            this.handleRowClick(e);
        }
    }
    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;
    }
    componentWillLoad() {
        if (this.tableEl) {
            relevantTableProps.forEach((tablePropName) => {
                this[tablePropName] = this.tableEl[tablePropName];
            });
        }
    }
    render() {
        return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', tabindex: this.clickable ? '0' : null, class: {
                'tds-table__row': true,
                'tds-table__row--selected': this.selected,
                'tds-table__compact': this.compactDesign,
                'tds-table--divider': this.verticalDividers,
                'tds-table__row--clickable': this.clickable,
            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
    }
    get host() { return this; }
    static get style() { return TdsTableBodyRowStyle0; }
}, [1, "tds-table-body-row", {
        "selected": [516],
        "disabled": [516],
        "clickable": [516],
        "multiselect": [32],
        "mainCheckBoxStatus": [32],
        "verticalDividers": [32],
        "compactDesign": [32],
        "noMinWidth": [32],
        "tableId": [32]
    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-table-body-row", "tds-checkbox"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-table-body-row":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTableBodyRow$1);
            }
            break;
        case "tds-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const TdsTableBodyRow = TdsTableBodyRow$1;
const defineCustomElement = defineCustomElement$1;

export { TdsTableBodyRow, defineCustomElement };