import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { g as getScrollOffsetFromStart } from './scroll.js';

const pdsTableCss = "@charset \"UTF-8\";:host{--color-background-default:var(--pine-color-background-container);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;isolation:isolate;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-end-start-radius:inherit;border-start-start-radius:inherit;inset-inline-start:0}:host-context([dir=rtl]) .scroll-shadow-left{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent)}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-end-end-radius:inherit;border-start-end-radius:inherit;inset-inline-end:0}:host-context([dir=rtl]) .scroll-shadow-right{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent)}";

const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.pdsTableSelectAll = createEvent(this, "pdsTableSelectAll", 7);
        this.scrollContainer = null;
        this._responsiveHandleScroll = null;
        this._responsiveHandleResize = null;
        this._responsiveResizeObserver = null;
        this._teardownResponsive = null;
        /**
         * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
         * Only applies when `selectable` is true.
         * @defaultValue false
         */
        this.disableSelectAll = false;
        /**
         * Adds divider borders between table rows. The last row will not have a bottom border.
         * @defaultValue false
         */
        this.rowDividers = false;
        /**
         * The direction to sort the default column on initial load.
         * Only applies if `defaultSortColumn` is set.
         * @defaultValue 'asc'
         */
        this.defaultSortDirection = 'asc';
        /**
         * The name of the column being sorted.
         * @defaultValue null
         */
        this.sortingColumn = null;
        /**
         * The direction of sorting.
         * @defaultValue 'asc'
         */
        this.sortingDirection = 'asc';
    }
    componentDidLoad() {
        if (this.responsive) {
            this.setupResponsiveScrolling();
        }
        // Apply default sort if specified
        // Use requestAnimationFrame to defer until child components are fully initialized
        if (this.defaultSortColumn) {
            requestAnimationFrame(() => {
                void this.applyDefaultSort().catch((err) => {
                    console.warn('Failed to apply default sort.', err);
                });
            });
        }
    }
    /**
     * Applies the default sort configuration on initial load.
     * Finds the matching column header and activates its sort state.
     * @private
     */
    async applyDefaultSort() {
        var _a;
        // Normalize direction to handle invalid HTML attribute values
        const direction = this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
        // Find the matching sortable header cell
        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
        const matchingCell = columnHeaderCells.find((cell) => { var _a; return ((_a = cell.textContent) !== null && _a !== void 0 ? _a : '').trim() === this.defaultSortColumn; });
        if (matchingCell) {
            const columnName = ((_a = matchingCell.textContent) !== null && _a !== void 0 ? _a : '').trim();
            // Sort the table data
            this.sortTable(columnName, direction);
            this.sortingColumn = columnName;
            this.sortingDirection = direction;
            // Activate the visual state on the header cell
            await matchingCell.setActiveSort(direction);
        }
        else {
            console.warn(`Default sort column "${this.defaultSortColumn}" not found.`);
        }
    }
    disconnectedCallback() {
        if (this._teardownResponsive) {
            this._teardownResponsive();
            this._teardownResponsive = null;
        }
    }
    /**
     * Sets up responsive scrolling behavior for the table.
     *
     * This method creates a horizontal scrolling system where:
     * - The table content can scroll horizontally when it exceeds the container width
     * - Scroll shadows appear at the inline-start/end edges to indicate scrollable content
     * - Fixed columns remain sticky during horizontal scrolling
     * - Shadows respect border-radius and don't appear when there's nothing to scroll
     *
     * Architecture:
     * - Host element: Contains everything, respects parent constraints
     * - Container element: Handles horizontal scrolling (overflow-x: auto)
     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
     *
     * @private
     */
    setupResponsiveScrolling() {
        var _a, _b, _c;
        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
        const leftShadow = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.scroll-shadow-left');
        const rightShadow = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.scroll-shadow-right');
        if (!container || !leftShadow || !rightShadow)
            return;
        // Store container reference for cleanup
        this.scrollContainer = container;
        /**
         * Updates the visibility of scroll shadows based on current scroll position.
         * Inline-start shadow: shows when scrolled away from start (hidden if fixedColumn is enabled)
         * Inline-end shadow: shows when there is content to scroll and not at the end
         */
        this._responsiveHandleScroll = () => {
            if (!this.scrollContainer)
                return;
            const { scrollWidth, clientWidth } = this.scrollContainer;
            const maxScroll = scrollWidth - clientWidth;
            const scrollOffset = getScrollOffsetFromStart(this.scrollContainer);
            // Inline-start shadow when scrolled away from start, but not if there's a fixed column
            leftShadow.style.opacity = (scrollOffset > 0 && !this.fixedColumn) ? '1' : '0';
            // Inline-end shadow when there is content to scroll and not at the end
            rightShadow.style.opacity = (maxScroll > 0 && scrollOffset < maxScroll - 1) ? '1' : '0';
        };
        // Add scroll event listener to container element
        this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });
        // Add resize observer to update shadows when container size changes
        if (typeof window !== 'undefined' && window.ResizeObserver) {
            try {
                this._responsiveResizeObserver = new ResizeObserver(() => {
                    var _a;
                    (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
                });
                this._responsiveResizeObserver.observe(this.scrollContainer);
            }
            catch (error) {
                // ResizeObserver not available in some environments (e.g., tests)
                // Fall back to window resize listener only
            }
        }
        // Listen for window resize as fallback
        if (typeof window !== 'undefined') {
            this._responsiveHandleResize = () => {
                var _a;
                (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
            };
            window.addEventListener('resize', this._responsiveHandleResize);
        }
        // Create teardown function for cleanup
        this._teardownResponsive = () => {
            if (this.scrollContainer && this._responsiveHandleScroll) {
                this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);
                this.scrollContainer = null;
            }
            if (this._responsiveResizeObserver) {
                this._responsiveResizeObserver.disconnect();
                this._responsiveResizeObserver = null;
            }
            if (typeof window !== 'undefined' && this._responsiveHandleResize) {
                window.removeEventListener('resize', this._responsiveHandleResize);
                this._responsiveHandleResize = null;
            }
            this._responsiveHandleScroll = null;
        };
        // Initial check after setup
        this._responsiveHandleScroll();
    }
    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');
        // Return early if no table body exists
        if (!tableBody)
            return;
        // 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, undefined, { sensitivity: 'base' });
            }
            else {
                return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });
            }
        });
        // Clear and append the sorted rows back to the table body
        tableBody.innerHTML = '';
        tableRows.forEach((row) => {
            tableBody.appendChild(row);
        });
    }
    handleTableSort(event) {
        if (event.defaultPrevented)
            return;
        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');
        if (headerCheckbox) {
            headerCheckbox.checked = allSelectedRows;
            headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
        }
    }
    render() {
        if (this.responsive) {
            return (h(Host, { class: "pds-table is-responsive pds-table-responsive-host", id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
        }
        return (h(Host, { class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, h("slot", null)));
    }
    get el() { return this; }
    static get style() { return pdsTableCss; }
}, [257, "pds-table", {
        "compact": [4],
        "componentId": [1, "component-id"],
        "responsive": [4],
        "fixedColumn": [4, "fixed-column"],
        "selectable": [4],
        "disableSelectAll": [4, "disable-select-all"],
        "rowDividers": [516, "row-dividers"],
        "defaultSortColumn": [1, "default-sort-column"],
        "defaultSortDirection": [1, "default-sort-direction"],
        "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

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