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

Tegel Design System

import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';

const tableBodyCellCss = () => `:host{display:contents}:host(.tds-table__body-cell) td{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);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}:host(.tds-table__body-cell) td *{box-sizing:border-box}:host(.tds-table__body-cell--hover) td{background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact) td{padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider) td{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type) td{border-right:none}:host(.tds-table--no-min-width) td{min-width:unset}`;

const relevantTableProps = [
    'verticalDividers',
    'compactDesign',
    'noMinWidth',
];
const TdsTableBodyCell = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Disables internal padding. Useful when passing other components to cell. */
        this.disablePadding = false;
        this.textAlignState = undefined;
        this.activeSorting = false;
        this.verticalDividers = false;
        this.compactDesign = false;
        this.noMinWidth = 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') {
                    throw new Error(`Table prop is not supported: ${changedProp}`);
                }
                this[changedProp] = event.detail[changedProp];
            });
        }
    }
    // Listen to headKey from table-header-element
    internalTdsHoverListener(event) {
        const { tableId, key } = event.detail;
        if (tableId === this.tableId) {
            this.activeSorting = this.cellKey === key;
        }
    }
    // Listen to internalTdsTextAlign from table-header-element
    internalTdsTextAlignListener(event) {
        const [receivedID, receivedKey, receivedTextAlign] = event.detail;
        if (this.tableId === receivedID) {
            if (this.cellKey === receivedKey) {
                if (this.textAlign) {
                    this.textAlignState = this.textAlign;
                }
                else {
                    this.textAlignState = (['left', 'start', 'right', 'end', 'center'].includes(receivedTextAlign)
                        ? receivedTextAlign
                        : 'left');
                }
            }
        }
    }
    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];
            });
        }
        if (this.textAlign) {
            this.textAlignState = this.textAlign;
        }
    }
    render() {
        let paddingStyle = 'var(--tds-spacing-element-16)'; // Default padding
        if (this.disablePadding) {
            paddingStyle = '0';
        }
        else if (this.compactDesign) {
            paddingStyle = 'var(--tds-spacing-element-8) var(--tds-spacing-element-16)';
        }
        const dynamicStyles = {
            textAlign: this.textAlignState,
            // Conditionally set padding style
            padding: paddingStyle,
        };
        return (h(Host, { key: '8344d3c796f2f56305924347e161d08039ae9c72', class: {
                'tds-table__body-cell': true,
                'tds-table__body-cell--hover': this.activeSorting,
                'tds-table__compact': this.compactDesign,
                'tds-table--divider': this.verticalDividers,
                'tds-table--no-min-width': this.noMinWidth,
            } }, h("td", { key: '330bec9031af90243469ab548b638a4be86dd40d', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '0af9c581a3cf0db8c94cd68cd9e500ba51fe2501' }))));
    }
    get host() { return getElement(this); }
};
TdsTableBodyCell.style = tableBodyCellCss();

export { TdsTableBodyCell as tds_body_cell };