@cbpds/web-components/dist/esm/cbp-table.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { s as setCSSProps } from './utils-475ba472.js';

const cbpTableCss = ":root{--cbp-table-color:var(--cbp-color-text-darkest);--cbp-table-color-dark:var(--cbp-color-text-lightest);--cbp-table-header-color:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-focus:var(--cbp-color-text-lightest);--cbp-table-header-color-focus-dark:var(--cbp-color-text-darkest);--cbp-table-header-color-active:var(--cbp-color-text-darkest);--cbp-table-header-color-active-dark:var(--cbp-color-text-darkest);--cbp-table-header-color-bg:var(--cbp-color-gray-cool-20);--cbp-table-header-color-bg-dark:var(--cbp-color-gray-cool-60);--cbp-table-header-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-table-header-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-table-header-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-table-header-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-table-header-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-table-header-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-table-header-color-outline:var(--cbp-color-white);--cbp-table-header-color-outline-dark:var(--cbp-color-black);--cbp-table-row-color-bg:var(--cbp-color-white);--cbp-table-row-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-table-row-color-bg-striped:var(--cbp-color-gray-cool-4);--cbp-table-row-color-bg-striped-dark:var(--cbp-color-gray-cool-80);--cbp-table-row-color-bg-hover:var(--cbp-color-gray-cool-10);--cbp-table-row-color-bg-hover-dark:var(--cbp-color-gray-cool-90);--cbp-table-row-color-bg-selected:var(--cbp-color-interactive-selected-light);--cbp-table-row-color-bg-selected-dark:var(--cbp-color-interactive-selected-dark);--cbp-table-row-color-border:var(--cbp-color-gray-cool-30);--cbp-table-row-color-border-dark:var(--cbp-color-gray-cool-50);--cbp-table-row-border-size:var(--cbp-border-size-md);--cbp-table-cell-padding:var(--cbp-space-4x) var(--cbp-space-3x)}[data-cbp-theme=light] cbp-table[context*=dark],[data-cbp-theme=dark] cbp-table:not([context=dark-inverts]):not([context=light-always]){--cbp-table-color:var(--cbp-table-color-dark);--cbp-table-header-color:var(--cbp-table-header-color-dark);--cbp-table-header-color-hover:var(--cbp-table-header-color-hover-dark);--cbp-table-header-color-focus:var(--cbp-table-header-color-focus-dark);--cbp-table-header-color-active:var(--cbp-table-header-color-active-dark);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-dark);--cbp-table-header-color-bg-hover:var(--cbp-table-header-color-bg-hover-dark);--cbp-table-header-color-bg-focus:var(--cbp-table-header-color-bg-focus-dark);--cbp-table-header-color-bg-active:var(--cbp-table-header-color-bg-active-dark);--cbp-table-header-color-outline:var(--cbp-table-header-color-outline-dark);--cbp-table-row-color-bg:var(--cbp-table-row-color-bg-dark);--cbp-table-row-color-bg-striped:var(--cbp-table-row-color-bg-striped-dark);--cbp-table-row-color-bg-hover:var(--cbp-table-row-color-bg-hover-dark);--cbp-table-row-color-bg-selected:var(--cbp-table-row-color-bg-selected-dark);--cbp-table-row-color-border:var(--cbp-table-row-color-border-dark)}cbp-table{display:block;max-width:100%;overflow-x:auto}cbp-table[striped=odd] tbody tr:nth-child(odd){background-color:var(--cbp-table-row-color-bg-striped)}cbp-table[striped=even] tbody tr:nth-child(even){background-color:var(--cbp-table-row-color-bg-striped)}cbp-table[hover=row] tbody tr:hover td{background-color:var(--cbp-table-row-color-bg-hover)}cbp-table[hover=cell] tbody td:hover{background-color:var(--cbp-table-row-color-bg-hover)}cbp-table[column-hover] table:has(thead tr>*:nth-child(1):hover) tr>*:nth-child(1):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(2):hover) tr>*:nth-child(2):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(3):hover) tr>*:nth-child(3):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(4):hover) tr>*:nth-child(4):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(5):hover) tr>*:nth-child(5):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(6):hover) tr>*:nth-child(6):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(7):hover) tr>*:nth-child(7):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(8):hover) tr>*:nth-child(8):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(9):hover) tr>*:nth-child(9):not([aria-sort]),cbp-table[column-hover] table:has(thead tr>*:nth-child(10):hover) tr>*:nth-child(10):not([aria-sort]){background-color:var(--cbp-table-row-color-bg-hover)}cbp-table table{margin:0;padding:0;max-width:100%;border-collapse:collapse}cbp-table table caption{text-align:left;font-size:var(--cbp-font-size-heading-xl);line-height:var(--cbp-line-height-xl)}cbp-table table th,cbp-table table td{color:var(--cbp-table-color);text-align:left;vertical-align:top;padding:var(--cbp-table-cell-padding)}cbp-table table th:has(input[type=checkbox]),cbp-table table td:has(input[type=checkbox]){vertical-align:middle;padding-block:var(--cbp-space-2x)}cbp-table table th:has(button),cbp-table table td:has(button){padding:0}cbp-table table th cbp-checkbox,cbp-table table td cbp-checkbox{--cbp-checkbox-min-height:0;--cbp-checkbox-margin:0}cbp-table table thead th{font-size:var(--cbp-font-size-heading-xs);vertical-align:bottom;transition:width 2s}cbp-table table thead th[aria-sort=none] button{padding-inline-end:var(--cbp-space-9x)}cbp-table table thead th:has(button:hover){--cbp-table-header-color:var(--cbp-table-header-color-hover);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-hover);--cbp-table-header-color-dark:var(--cbp-table-header-color-hover-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-hover-dark)}cbp-table table thead th:has(button:hover) cbp-button[fill][color]{--cbp-button-color-hover:var(--cbp-table-header-color-hover);--cbp-button-color-hover-dark:var(--cbp-table-header-color-hover-dark)}cbp-table table thead th:has(cbp-button[fill][color] button:focus){--cbp-table-header-color:var(--cbp-table-header-color-focus);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-focus);--cbp-table-header-color-dark:var(--cbp-table-header-color-focus-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-focus-dark);outline-width:var(--cbp-border-size-md)}cbp-table table thead th:has(cbp-button[fill][color] button:active){--cbp-table-header-color:var(--cbp-table-header-color-active);--cbp-table-header-color-bg:var(--cbp-table-header-color-bg-active);--cbp-table-header-color-dark:var(--cbp-table-header-color-active-dark);--cbp-table-header-color-bg-dark:var(--cbp-table-header-color-bg-active-dark)}cbp-table table thead th cbp-button{--cbp-button-border-radius:0;--cbp-button-border-width:0;--cbp-button-focus-outline-width:0;--cbp-button-color-bg:transparent !important;--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-focus:transparent !important;--cbp-button-color-bg-active:transparent !important;--cbp-button-color-bg-dark:transparent !important;--cbp-button-color-bg-hover-dark:transparent !important;--cbp-button-color-bg-focus-dark:transparent !important;--cbp-button-color-bg-active-dark:transparent !important;--cbp-button-padding:var(--cbp-table-cell-padding)}cbp-table table thead th cbp-button button{justify-content:flex-start;text-align:left;text-transform:unset;letter-spacing:unset;white-space:normal;text-wrap:balance;margin:0;transition:width 2s}cbp-table table thead th:has(button:hover){--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-hover-dark:transparent !important}cbp-table table thead th:has(button:focus){--cbp-button-color-bg-focus:var(--cbp-color-interactive-focus-dark) !important;--cbp-button-color-bg-focus-dark:var(--cbp-color-interactive-focus-light) !important}cbp-table table tbody tr{background-color:var(--cbp-table-row-color-bg)}cbp-table table tbody tr:has(input[type=checkbox]:checked){background-color:var(--cbp-table-row-color-bg-selected)}cbp-table table tr{border-bottom:solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border)}cbp-table table th{--cbp-button-color:var(--cbp-table-header-color);--cbp-button-color-dark:var(--cbp-table-header-color-dark);color:var(--cbp-table-header-color);background-color:var(--cbp-table-header-color-bg);font-weight:var(--cbp-font-weight-medium);text-wrap:balance;outline-width:0;outline-style:solid;outline-color:var(--cbp-table-header-color-outline);outline-offset:calc(var(--cbp-space-1x) * -1)}cbp-table table td{text-wrap:pretty}";
const CbpTableStyle0 = cbpTableCss;

const CbpTable = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tableSort = createEvent(this, "tableSort", 7);
        this.sortableColumns = [];
        this.striped = undefined;
        this.hover = 'row';
        this.columnHover = undefined;
        this.context = undefined;
        this.sx = {};
        this.sort = undefined;
    }
    addScope() {
        const columnHeadings = Array.from(this.host.querySelectorAll('thead th'));
        const rowHeadings = Array.from(this.host.querySelectorAll('tbody th'));
        columnHeadings.forEach(item => {
            item.setAttribute('scope', 'col');
        });
        rowHeadings.forEach(item => {
            item.setAttribute('scope', 'row');
        });
    }
    makeSortable() {
        this.columnHeadings = Array.from(this.host.querySelectorAll('thead th'));
        this.columnHeadings.forEach(item => {
            const control = item.querySelector('cbp-button');
            if (control) {
                this.sortableColumns = [...this.sortableColumns, item];
                const icon = control.querySelector('button cbp-icon');
                if (item.getAttribute('aria-sort') == "ascending")
                    icon.rotate = 270;
                if (item.getAttribute('aria-sort') == "descending")
                    icon.rotate = 90;
                if (!item.getAttribute('aria-sort')) {
                    item.setAttribute("aria-sort", "none");
                    icon.setAttribute('hidden', '');
                    control.pressed = "false";
                }
                else {
                    icon.name = "arrow-right";
                    control.pressed = "true";
                }
                control.addEventListener("buttonClick", e => {
                    this.doSort(this.columnHeadings.indexOf(item), e);
                });
            }
        });
        const sortedColumn = this.host.querySelector('th[aria-sort]');
        if (sortedColumn) {
            this.sort = {
                columnHeading: sortedColumn,
                direction: sortedColumn.getAttribute('aria-sort')
            };
        }
    }
    async doSort(column, e = undefined) {
        const ColumnHeading = this.columnHeadings[column];
        const CbpButton = ColumnHeading.querySelector('cbp-button');
        const Icon = ColumnHeading.querySelector('button cbp-icon');
        let direction = "ascending";
        if (ColumnHeading == this.sort.columnHeading) {
            ColumnHeading.getAttribute('aria-sort') == "ascending"
                ? direction = "descending"
                : direction = "ascending";
        }
        else {
            this.sort.columnHeading.setAttribute('aria-sort', 'none');
            this.sort.columnHeading.querySelector('cbp-button').pressed = "false";
            this.sort.columnHeading.querySelector('button cbp-icon').name = undefined;
            (this.sort.columnHeading.querySelector('button cbp-icon')).setAttribute('hidden', '');
            CbpButton.pressed = "true";
        }
        Icon.removeAttribute('hidden');
        Icon.rotate = (direction == 'descending') ? 90 : 270;
        Icon.name = "arrow-right";
        ColumnHeading.setAttribute('aria-sort', direction);
        let newSort = {
            columnHeading: ColumnHeading,
            direction: direction
        };
        this.sort = newSort;
        this.tableSort.emit({
            host: this.host,
            column: column,
            direction: direction,
            nativeEvent: e
        });
    }
    componentWillLoad() {
        var _a;
        this.table = this.host.querySelector('table');
        this.caption = (_a = this.table) === null || _a === void 0 ? void 0 : _a.querySelector('caption');
        if (!this.caption)
            console.warn(`cbp-table: A caption tag is required for accessibility. If you don't want a visible caption, add a 'hidden' attribute to it.`);
        this.columnHeadings = Array.from(this.host.querySelectorAll('thead > th'));
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        setCSSProps(this.host, Object.assign({}, this.sx));
    }
    componentDidLoad() {
        this.addScope();
        this.makeSortable();
    }
    render() {
        return (h(Host, { key: 'e1e51fea95c6c985962c46057b59a775f3473d24' }, h("slot", { key: '8d4ee921236d6b99a5a0bcf51b7f1130587d68d8', name: "cbp-table-toolbar" }), h("slot", { key: '8f275deb9b7b3938075815c30c171cecd0821967' })));
    }
    get host() { return getElement(this); }
};
CbpTable.style = CbpTableStyle0;

export { CbpTable as cbp_table };

//# sourceMappingURL=cbp-table.entry.js.map