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

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.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$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends H {
    constructor() {
        super();
        this.__registerHost();
        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 this; }
    static get style() { return TdsTableBodyStyle0; }
}, [4, "tds-table-body", {
        "multiselect": [32],
        "enablePaginationTableBody": [32],
        "expandableRows": [32],
        "multiselectArray": [32],
        "multiselectArrayJSON": [32],
        "mainCheckboxStatus": [32],
        "columnsNumber": [32],
        "zebraMode": [32],
        "tableId": [32]
    }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsRowChange", "bodyCheckboxListener"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-table-body"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-table-body":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTableBody$1);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsTableBody = TdsTableBody$1;
const defineCustomElement = defineCustomElement$1;

export { TdsTableBody, defineCustomElement };