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: '144ebe0917ce215a128b6653c8ed47138be7b319' }, h("cpsl-card", { key: '8197bc383734a332a2e0ee7221a1990ba20b1f84', part: "table-container", style: { position: 'relative' } }, h("div", { key: 'dd8d0026515ce96a848ae4a6cdf5cdab7bb7ddf2', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '1b5a2cbae0fa49bb0b5b4d89fef4b44ce8a46439', name: "header" })), h("div", { key: 'e22bd3b94832ded10fe7b152d2d0c68165853529', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, h("slot", { key: 'f1bbfc01f1c25f820d9d4846ac1a7f64c21ee03b', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (h("div", { key: 'ad1e130185b6621b763892ae693ffab1d6243ae5', 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: 'fb8b26f5d97b3965c50676b0541a14f21c675fe6', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '70a40dfe9bb80e3c825c895d12cb971467898e6a', 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
