@scania/tegel/dist/cjs/tds-table-header.cjs.entry.js

Tegel Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca8040ad.js');

const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
const TdsTableHeaderStyle0 = tableHeaderCss;

const relevantTableProps = [
    'multiselect',
    'expandableRows',
    'verticalDividers',
    'compactDesign',
    'noMinWidth',
];
const TdsTableHeaderRow = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
        this.allSelected = false;
        this.selected = undefined;
        this.disabled = false;
        this.indeterminate = false;
        this.multiselect = false;
        this.expandableRows = false;
        this.mainCheckboxSelected = false;
        this.mainExpendSelected = false;
        this.verticalDividers = false;
        this.compactDesign = false;
        this.noMinWidth = false;
        this.whiteBackground = false;
        this.enableToolbarDesign = 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];
            });
        }
    }
    internalTdsRowExpandedListener(event) {
        if (this.tableId === event.detail[0]) {
            // TODO: Improve this logic. Why we get late repose in DOM?
            setTimeout(() => {
                this.bodyExpandClicked();
            }, 100);
        }
    }
    bodyExpandClicked() {
        const numberOfExtendRowsActive = this.host.parentElement
            .querySelector('tds-table-body')
            .getElementsByClassName('tds-table__row-extend--active').length;
        const numberOfExtendRows = this.host.parentElement
            .querySelector('tds-table-body')
            .getElementsByTagName('tds-table-body-row-expendable').length;
        if (numberOfExtendRows === numberOfExtendRowsActive) {
            this.mainExpendSelected = true;
        }
        else {
            this.mainExpendSelected = false;
        }
    }
    connectedCallback() {
        this.tableEl = this.host.closest('tds-table');
        this.tableId = this.tableEl.tableId;
    }
    componentWillLoad() {
        relevantTableProps.forEach((tablePropName) => {
            this[tablePropName] = this.tableEl[tablePropName];
        });
    }
    componentWillRender() {
        this.enableToolbarDesign =
            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
    }
    async handleCheckboxChange(event) {
        this.allSelected = event.detail.checked;
        this.tdsSelectAll.emit({
            tableId: this.tableId,
            checked: event.detail.checked,
            selectedRows: await this.tableEl.getSelectedRows(),
        });
    }
    render() {
        return (index.h(index.Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
                'tds-table--compact': this.compactDesign,
                'tds-table--divider': this.verticalDividers,
                'tds-table--toolbar-available': this.enableToolbarDesign,
            } }, index.h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (index.h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
    }
    get host() { return index.getElement(this); }
};
TdsTableHeaderRow.style = TdsTableHeaderStyle0;

exports.tds_table_header = TdsTableHeaderRow;