import { Host, h } from "@stencil/core";
export class CpslTabs {
    constructor() {
        this.onTabClicked = (ev) => {
            const { tab } = ev.detail;
            if (tab !== this.selectedTab) {
                this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
                this.cpslTabsChanged.emit({
                    tab,
                });
            }
        };
        this.selectedTabRect = undefined;
        this.loaded = false;
        this.fullWidth = undefined;
        this.selectedTab = undefined;
    }
    updateSlider() {
        // Allow component to condense or expand before recalculating silder
        setTimeout(() => {
            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
        }, 50);
    }
    updateTab(newValue, oldValue) {
        if (Boolean(newValue) && !oldValue) {
            this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();
        }
    }
    onTabSizeChange(ev) {
        const { tab } = ev.detail;
        if (tab === this.selectedTab) {
            this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();
        }
    }
    componentWillLoad() {
        var _a, _b;
        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
        this.cpslTabsInit.emit({
            tab: this.selectedTab,
        });
    }
    componentDidLoad() {
        var _a, _b;
        this.selectedTabRect = (_b = (_a = getTab(this.tabs, this.selectedTab)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { width: 0, x: 0 };
        // Allow slider to be rendered with the correct initial style before the transition is added
        setTimeout(() => {
            this.loaded = true;
        }, 50);
    }
    get tabs() {
        return Array.from(this.el.querySelectorAll('cpsl-tab'));
    }
    render() {
        const tabsPosition = this.el.getBoundingClientRect();
        // Get border width as a number
        const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
        const selectedTabRect = this.selectedTabRect;
        return (h(Host, { key: '7444f880d49aefdc6dacfa0893639e67f81e339c', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '029b41848f1ab89faa2e6bc03fc4c24fba4409e5', class: "tabs-container" }, h("slot", { key: '706b489cfd13e988d44d91e5ec8b451c937cd5f3' }), h("div", { key: '2b3d844134235863e85cecb09c31e18918ac32f4', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width - 8}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth}px` } }))));
    }
    static get is() { return "cpsl-tabs"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-tabs.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-tabs.css"]
        };
    }
    static get properties() {
        return {
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether or not the tabs take the full width of their container."
                },
                "attribute": "full-width",
                "reflect": false
            },
            "selectedTab": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The selected tab component"
                },
                "attribute": "selected-tab",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "selectedTabRect": {},
            "loaded": {}
        };
    }
    static get events() {
        return [{
                "method": "cpslTabsChanged",
                "name": "cpslTabsChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a tab is changed"
                },
                "complexType": {
                    "original": "TabsChangedEventDetail",
                    "resolved": "TabsChangedEventDetail",
                    "references": {
                        "TabsChangedEventDetail": {
                            "location": "import",
                            "path": "./tabs-interface.js",
                            "id": "src/components/cpsl-tabs/tabs-interface.ts::TabsChangedEventDetail"
                        }
                    }
                }
            }, {
                "method": "cpslTabsInit",
                "name": "cpslTabsInit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Emitted when tabs are initialized"
                },
                "complexType": {
                    "original": "TabsChangedEventDetail",
                    "resolved": "TabsChangedEventDetail",
                    "references": {
                        "TabsChangedEventDetail": {
                            "location": "import",
                            "path": "./tabs-interface.js",
                            "id": "src/components/cpsl-tabs/tabs-interface.ts::TabsChangedEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "fullWidth",
                "methodName": "updateSlider"
            }, {
                "propName": "selectedTab",
                "methodName": "updateTab"
            }];
    }
    static get listeners() {
        return [{
                "name": "cpslTabButtonSizeChange",
                "method": "onTabSizeChange",
                "target": "window",
                "capture": false,
                "passive": false
            }];
    }
}
const getTab = (tabs, tab) => {
    const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;
    return tabEl;
};
//# sourceMappingURL=cpsl-tabs.js.map
