import { Host, h } from "@stencil/core";
export class CpslTab {
    constructor() {
        this.onTabClicked = () => {
            this.cpslTabButtonClick.emit({ tab: this.tab, selected: this.selected });
        };
        this.selected = false;
        this.tab = undefined;
    }
    onTabsChanged(ev) {
        this.setSelected(ev);
    }
    onTabsInit(ev) {
        this.setSelected(ev);
    }
    componentDidLoad() {
        new MutationObserver(() => {
            this.cpslTabButtonSizeChange.emit({ tab: this.tab });
        }).observe(this.el, {
            attributes: true,
        });
    }
    setSelected(ev) {
        const dispatchedFrom = ev.target;
        const parent = this.el.parentElement;
        if (ev.composedPath().includes(parent) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(this.el))) {
            this.selected = this.tab === ev.detail.tab;
        }
    }
    render() {
        return (h(Host, { key: 'dffbcb7a246b03dd586d05152b3c53d3d5af3f87', class: { selected: this.selected }, onClick: this.onTabClicked }, h("div", { key: 'a9606f29660d01f66f3474d2aa2efb99f83ee569', class: { 'tab-container': true } }, h("slot", { key: '0974381842769333c6a5cfa94e842feec5feaf56', name: "start" }), h("div", { key: 'b0d17ead876fab16b55b8a3176828ca76f553ead', class: "content" }, h("slot", { key: '6bdb9f6706881fee90d9a0cc759e29b65eeb3113' })), h("slot", { key: '7c9b87600f7e4fec0509bda1a080f3116c0fbbfe', name: "end" }))));
    }
    static get is() { return "cpsl-tab"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-tab.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-tab.css"]
        };
    }
    static get properties() {
        return {
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The selected tab component"
                },
                "attribute": "selected",
                "reflect": false,
                "defaultValue": "false"
            },
            "tab": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A tab id must be provided for each `cpsl-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
                },
                "attribute": "tab",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "cpslTabButtonClick",
                "name": "cpslTabButtonClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Emitted when tabs are clicked"
                },
                "complexType": {
                    "original": "TabClickEventDetail",
                    "resolved": "TabClickEventDetail",
                    "references": {
                        "TabClickEventDetail": {
                            "location": "import",
                            "path": "./tab-interface.js",
                            "id": "src/components/cpsl-tab/tab-interface.ts::TabClickEventDetail"
                        }
                    }
                }
            }, {
                "method": "cpslTabButtonSizeChange",
                "name": "cpslTabButtonSizeChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": "Emitted when tab size changes"
                },
                "complexType": {
                    "original": "TabSizeChangeEventDetail",
                    "resolved": "TabSizeChangeEventDetail",
                    "references": {
                        "TabSizeChangeEventDetail": {
                            "location": "import",
                            "path": "./tab-interface.js",
                            "id": "src/components/cpsl-tab/tab-interface.ts::TabSizeChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "cpslTabsChanged",
                "method": "onTabsChanged",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "cpslTabsInit",
                "method": "onTabsInit",
                "target": "window",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=cpsl-tab.js.map
