import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

const pdsTableCss = ":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";
const PdsTableStyle0 = pdsTableCss;

const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.pdsTableSelect = createEvent(this, "pdsTableSelect", 7);
        this.pdsTableSelectAll = createEvent(this, "pdsTableSelectAll", 7);
        this.compact = undefined;
        this.componentId = undefined;
        this.responsive = undefined;
        this.fixedColumn = undefined;
        this.selectable = undefined;
        this.sortingColumn = null;
        this.sortingDirection = 'asc';
    }
    componentWillLoad() {
        this.sortingColumn = null;
    }
    classNames() {
        const classNames = ['pds-table'];
        if (this.compact) {
            classNames.push('is-compact');
        }
        if (this.responsive) {
            classNames.push('is-responsive');
        }
        return classNames.join('  ');
    }
    sortTable(column, direction) {
        const tableBody = this.el.querySelector('pds-table-body');
        // Get the rows in the table body
        const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
        // Find the column index based on the column name
        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
        const columnHeaderCell = columnHeaderCells.find((cell) => cell.innerText.trim() === column);
        if (!columnHeaderCell) {
            console.warn(`Column "${column}" not found.`);
            return;
        }
        const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);
        // Sort the rows based on the content of the specified column
        tableRows.sort((a, b) => {
            const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
            const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
            if (direction === 'asc') {
                return valueA.localeCompare(valueB);
            }
            else {
                return valueB.localeCompare(valueA);
            }
        });
        // Clear and append the sorted rows back to the table body
        tableBody.innerHTML = '';
        tableRows.forEach((row) => {
            tableBody.appendChild(row);
        });
    }
    handleTableSort(event) {
        const { direction } = event.detail;
        this.sortTable(event.detail.column, direction);
        this.sortingColumn = event.detail.column;
        this.sortingDirection = direction;
    }
    handleTableSelectAll(event) {
        if (event.defaultPrevented)
            return;
        const pdsTableBody = this.el.querySelector('pds-table-body');
        const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));
        tableRows.forEach((row) => {
            row.isSelected = event.detail.isSelected;
        });
    }
    async handleTableSelect(event) {
        if (event.defaultPrevented)
            return;
        const allTableRows = this.el.querySelectorAll('pds-table-row');
        const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);
        const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);
        const pdsTableHead = this.el.querySelector('pds-table-head');
        if (!pdsTableHead)
            return;
        const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
        headerCheckbox.checked = allSelectedRows;
        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
    }
    render() {
        return (h(Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
    }
    get el() { return this; }
    static get style() { return PdsTableStyle0; }
}, [1, "pds-table", {
        "compact": [4],
        "componentId": [1, "component-id"],
        "responsive": [4],
        "fixedColumn": [4, "fixed-column"],
        "selectable": [4],
        "sortingColumn": [32],
        "sortingDirection": [32]
    }, [[0, "pdsTableSort", "handleTableSort"], [0, "pdsTableSelectAll", "handleTableSelectAll"], [0, "pdsTableRowSelected", "handleTableSelect"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-table"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-table":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsTable$1);
            }
            break;
    } });
}

const PdsTable = PdsTable$1;
const defineCustomElement = defineCustomElement$1;

export { PdsTable, defineCustomElement };

//# sourceMappingURL=pds-table.js.map