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

Tegel Design System

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

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

const relevantTableProps = [
    'verticalDividers',
    'compactDesign',
    'noMinWidth',
];
const TdsTableBodyCell = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.cellValue = undefined;
        this.cellKey = undefined;
        this.disablePadding = false;
        this.textAlign = undefined;
        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', 'center', 'right', 'end'].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) => {
                this[tablePropName] = this.tableEl[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: '726912df89435650c3ad1f39729fdff7d2a497e3', 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,
            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'ff6fb6613f29e94552916cfa75932b670e22ea80' })));
    }
    get host() { return getElement(this); }
};
TdsTableBodyCell.style = TdsBodyCellStyle0;

export { TdsTableBodyCell as tds_body_cell };