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

Tegel Design System

import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';

const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
const TdsTableBodyStyle0 = tableBodyCss;

const relevantTableProps = [
    'multiselect',
    'expandableRows',
    'zebraMode',
];
const TdsTableBody = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.bodyCheckBoxClicked = () => {
            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
        };
        this.multiselect = false;
        this.enablePaginationTableBody = false;
        this.expandableRows = false;
        this.multiselectArray = [];
        this.multiselectArrayJSON = undefined;
        this.mainCheckboxStatus = false;
        this.columnsNumber = 0;
        this.zebraMode = 'none';
        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') {
                    throw new Error(`Table prop is not supported: ${changedProp}`);
                }
                this[changedProp] = event.detail[changedProp];
            });
        }
    }
    // No need to read the value, event is here just to trigger another function
    bodyCheckboxListener() {
        this.bodyCheckBoxClicked();
    }
    connectedCallback() {
        this.tableEl = this.host.closest('tds-table');
        this.tableId = this.tableEl.tableId;
    }
    componentWillLoad() {
        relevantTableProps.forEach((tablePropName) => {
            this[tablePropName] = this.tableEl[tablePropName];
        });
    }
    componentWillRender() {
        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
        // multiselect and expended features requires one extra column for controls...
        if (this.multiselect || this.expandableRows) {
            this.columnsNumber = headerColumnsNo + 1;
        }
        else {
            this.columnsNumber = headerColumnsNo;
        }
    }
    render() {
        return (h(Host, { key: '22e2e49b6db83c7c71e1e674b3dbfcb1ffd04e66', "data-selected-rows": this.multiselectArrayJSON, class: {
                'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
            } }, h("slot", { key: 'deb2aa129f332b48f7b9a38b0de25c2076fd86d9' })));
    }
    get host() { return getElement(this); }
};
TdsTableBody.style = TdsTableBodyStyle0;

export { TdsTableBody as tds_table_body };