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

Tegel Design System

import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.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){border-bottom:1px solid var(--tds-table-divider-hover)}: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 relevantTableProps = [
    'multiselect',
    'verticalDividers',
    'compactDesign',
];
const TdsTableBodyRow = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tdsSelect = createEvent(this, "tdsSelect", 6);
        this.tdsClick = createEvent(this, "tdsClick", 6);
        /** Marks the row as selected, used for multiselect table. */
        this.selected = false;
        /** Marks the row as disabled, used for multiselect table. */
        this.disabled = false;
        /** Makes the row clickable and tabbable for accessibility purposes. */
        this.clickable = false;
        this.multiselect = false;
        this.mainCheckBoxStatus = false;
        this.verticalDividers = false;
        this.compactDesign = false;
        this.noMinWidth = false;
        this.tableId = '';
    }
    async handleCheckboxChange(event) {
        var _a;
        this.selected = event.detail.checked;
        this.tdsSelect.emit({
            tableId: this.tableId,
            checked: this.selected,
            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
        });
    }
    handleRowClick(e) {
        var _a, _b, _c;
        if (!this.clickable)
            return;
        const rowIndex = Array.from((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []).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) => {
                var _a;
                this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
            });
        }
    }
    render() {
        return (h(Host, { key: 'f4e5c9acd820b468b93bbd83100695c56dca306c', 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: '6c51cf7b6d7656912de72231b55c66534e0b1f41', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '3f33bb0e7acb689e1034869df00c810dee30a296', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '8944284b39ffa3b26e3f83e73a8fd98402bde105' })));
    }
    get host() { return getElement(this); }
};
TdsTableBodyRow.style = tableBodyRowCss();

export { TdsTableBodyRow as tds_table_body_row };