import { Host, h } from "@stencil/core";
export class CpslNavButton {
    constructor() {
        this.handleNavButtonClick = () => {
            this.cpslNavButtonClick.emit(this.route);
        };
        this.handleSubRouteClick = (route) => () => {
            this.cpslNavButtonSubRouteClick.emit(route);
        };
        this.disabled = false;
        this.exactMainRouteMatch = undefined;
        this.exactSubRouteMatch = undefined;
        this.route = undefined;
        this.subRoutes = undefined;
        this.path = undefined;
    }
    render() {
        var _a, _b;
        const selectedSubRoute = (_a = this.subRoutes) === null || _a === void 0 ? void 0 : _a.find(sr => (this.exactSubRouteMatch ? this.path === `${this.route}/${sr.value}` : this.path.includes(`${this.route}/${sr.value}`)));
        const isMainRouteSelected = this.exactMainRouteMatch ? this.path === this.route : this.path.includes(this.route);
        return (h(Host, { key: '502ee237751a59264f26e3cc0bb1d98c3b27416c' }, h("cpsl-button", { key: 'bd3ad1ae9cf793a62c706912cabcf944b1519684', id: this.route, class: { 'main-route': true, 'selected': !!selectedSubRoute || isMainRouteSelected }, fullWidth: true, variant: "primary", disabled: this.disabled, onClick: this.handleNavButtonClick }, h("slot", { key: '45f67ecbb581fda045d786bf4d82ef7740fd4ee7', name: "start" }), h("slot", { key: '53ef86ef731b99344e398162429217adc8807b3f' }), h("slot", { key: '248fdf014c63862a45a9faa5b03a9994c9ddd50c', name: "end" })), (!!selectedSubRoute || isMainRouteSelected) && !!((_b = this.subRoutes) === null || _b === void 0 ? void 0 : _b.length) && (h("div", { key: '766e04ef327cb4291a5cde6c38e267b97703dbb0', class: "sub-route-container" }, this.subRoutes.map(sr => (h("cpsl-button", { key: sr.value, id: `${this.route}/${sr.value}`, class: { 'sub-route': true, 'selected': sr.value === (selectedSubRoute === null || selectedSubRoute === void 0 ? void 0 : selectedSubRoute.value) }, onClick: this.handleSubRouteClick(`${this.route}/${sr.value}`), fullWidth: true, variant: "primary" }, sr.label)))))));
    }
    static get is() { return "cpsl-nav-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-nav-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-nav-button.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If the button is disabled.\nDefault is: false."
                },
                "attribute": "disabled",
                "reflect": true,
                "defaultValue": "false"
            },
            "exactMainRouteMatch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to use exact matching for the selected main route."
                },
                "attribute": "exact-main-route-match",
                "reflect": false
            },
            "exactSubRouteMatch": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to use exact matching for the selected sub route."
                },
                "attribute": "exact-sub-route-match",
                "reflect": false
            },
            "route": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The route for the button."
                },
                "attribute": "route",
                "reflect": false
            },
            "subRoutes": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ label: string; value: string }[]",
                    "resolved": "{ label: string; value: string; }[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The id of the selected button."
                }
            },
            "path": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Path used to determine what button is selected"
                },
                "attribute": "path",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "cpslNavButtonClick",
                "name": "cpslNavButtonClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the nav button is clicked."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "cpslNavButtonSubRouteClick",
                "name": "cpslNavButtonSubRouteClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when a nav button sub route is clicked."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=cpsl-nav-button.js.map
