import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './pds-icon2.js';

const pdsTableHeadCellCss = ":host{--background-fixed:var(--pine-color-base-white);--border:var(--pine-border-default);--box-shadow:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-sorting:var(--pine-color-neutral-charcoal-500);--color:var(--pine-color-neutral-charcoal-200);--fixed-cell-position:0;--font-size:var(--pine-font-size-body-sm);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-sm);--margin-arrow:var(--pine-spacing-xxs);--padding-arrow:calc(var(--pine-spacing-xxs) / 2);--padding-compact:var(--pine-spacing-xxs);--padding:calc(var(--pine-spacing-md) / 2);-webkit-border-after:var(--border);border-block-end:var(--border);color:var(--color);display:table-cell;font-size:var(--font-size);font-style:normal;font-weight:var(--font-weight);line-height:var(--line-height);padding:var(--padding);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--padding-compact)}:host(.is-fixed){background:var(--background-fixed);left:var(--fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--margin-arrow);margin-inline-start:var(--margin-arrow);-webkit-padding-before:var(--padding-arrow);padding-block-start:var(--padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;

const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(class PdsTableHeadCell extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.pdsTableSort = createEvent(this, "pdsTableSort", 7);
        this.handleScroll = () => {
            if (this.tableRef.scrollLeft > 0) {
                this.tableScrolling = true;
            }
            else {
                this.tableScrolling = false;
            }
        };
        this.toggleSort = () => {
            if (this.sortable) {
                const column = this.hostElement.innerText.trim();
                this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
                    headCell.classList.remove('is-active');
                });
                this.hostElement.classList.toggle('is-active');
                this.pdsTableSort.emit({ column, direction: this.sortingDirection });
            }
        };
        this.sortable = undefined;
        this.sortingDirection = 'asc';
        this.tableScrolling = false;
    }
    componentWillRender() {
        this.tableRef = this.hostElement.closest('pds-table');
    }
    componentDidLoad() {
        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
            this.tableRef.addEventListener('scroll', this.handleScroll);
        }
    }
    classNames() {
        const classNames = [];
        if (this.tableRef && this.tableRef.compact) {
            classNames.push('is-compact');
        }
        if (this.sortable) {
            classNames.push('is-sortable');
        }
        if (this.sortable && this.sortingDirection !== null) {
            classNames.push('sort-' + this.sortingDirection);
        }
        if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
            classNames.push('has-scrolled');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: '855185382f83a8434abb9b1ccf222c8ef47e399a', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                this.tableRef.fixedColumn &&
                this.tableRef.selectable
                ? { '--fixed-cell-position': '40px' }
                : {} }, h("slot", { key: '78f3f9551be753e3be9953dfa57a9924d2dd4950' }), this.sortable && (h("pds-icon", { name: this.sortingDirection === 'asc' ? 'up-small' : 'down-small' }))));
    }
    get hostElement() { return this; }
    static get style() { return PdsTableHeadCellStyle0; }
}, [1, "pds-table-head-cell", {
        "sortable": [4],
        "sortingDirection": [32],
        "tableScrolling": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-table-head-cell", "pds-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-table-head-cell":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsTableHeadCell);
            }
            break;
        case "pds-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PdsTableHeadCell as P, defineCustomElement as d };

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