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

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.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 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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 this; }
    static get style() { return TdsBodyCellStyle0; }
}, [1, "tds-body-cell", {
        "cellValue": [520, "cell-value"],
        "cellKey": [520, "cell-key"],
        "disablePadding": [516, "disable-padding"],
        "textAlign": [513, "text-align"],
        "textAlignState": [32],
        "activeSorting": [32],
        "verticalDividers": [32],
        "compactDesign": [32],
        "noMinWidth": [32],
        "tableId": [32]
    }, [[16, "internalTdsPropChange", "internalTdsPropChangeListener"], [16, "internalTdsHover", "internalTdsHoverListener"], [16, "internalTdsTextAlign", "internalTdsTextAlignListener"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-body-cell"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-body-cell":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTableBodyCell);
            }
            break;
    } });
}
defineCustomElement$1();

const TdsBodyCell = TdsTableBodyCell;
const defineCustomElement = defineCustomElement$1;

export { TdsBodyCell, defineCustomElement };