import { Host, h } from "@stencil/core";
export class CpslTable {
    constructor() {
        this.resizeOb = new ResizeObserver(entries => {
            // since we are observing only a single element, so we access the first element in entries array
            const rect = entries[0].contentRect;
            // current width & height
            const containerWidth = Math.round(rect.width);
            const containerHeight = Math.round(rect.height);
            const contentWidth = this.containerSlotEl.clientWidth;
            const contentHeight = this.containerSlotEl.clientHeight;
            if (contentWidth > containerWidth) {
                this.hasHorizontalScroll = true;
            }
            else {
                this.hasHorizontalScroll = false;
            }
            if (contentHeight > containerHeight) {
                this.hasVerticalScroll = true;
            }
            else {
                this.hasVerticalScroll = false;
            }
        });
        this.hasHorizontalScroll = false;
        this.hasVerticalScroll = false;
    }
    componentDidLoad() {
        this.resizeOb.observe(this.contentContainerEl);
    }
    get containerHeaderEl() {
        return this.el.querySelector('[slot="header"]');
    }
    get containerFooterEl() {
        return this.el.querySelector('[slot="footer"]');
    }
    get contentContainerEl() {
        return this.el.shadowRoot.getElementById('content-container');
    }
    get headerEl() {
        return this.el.shadowRoot.getElementById('header-container');
    }
    get containerSlotEl() {
        return this.el.querySelector('[slot="content"]');
    }
    get footerEl() {
        return this.el.shadowRoot.getElementById('footer-container');
    }
    render() {
        return (h(Host, { key: 'e17bc67faff39c948bb585e03e2eef580a1ec46a' }, h("cpsl-card", { key: '50fbee874acdd360c92f8db003b021434515ac50', part: "table-container", style: { position: 'relative' } }, h("div", { key: '7c2452e83fd449277290ee067e050015f829ee6a', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '97371b6e8601ecf48c3d361388f45b02447de4d4', name: "header" })), h("div", { key: 'ceac73d82a4d2f9ade616104675051d0676ca604', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, h("slot", { key: '1d88e9d621b434e5495e91f9e7076664a36a233b', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (h("div", { key: '95da7f057492601a15e767974b6f2791c433c58b', style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '6a9d1821b46b8e0f113228d6a12b1832bf4c3bc4', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: 'eef31e34b0e40fae697d86fe58a40cc46981e0cc', name: "footer" })))));
    }
    static get is() { return "cpsl-table"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-table.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-table.css"]
        };
    }
    static get states() {
        return {
            "hasHorizontalScroll": {},
            "hasVerticalScroll": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=cpsl-table.js.map
