'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-65f57499.js');

const cpslNavButtonCss = ":host{display:flex;flex-direction:column;gap:8px;padding:0px;box-sizing:border-box;width:100%;background:var(--cpsl-color-background-4);border-radius:var(--cpsl-border-radius-primary-button);overflow:hidden}.sub-route-container{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--cpsl-color-background-16);padding-left:16px;margin-left:16px;margin-bottom:8px;margin-right:8px;background:var(--cpsl-color-background-4)}.sub-route{--button-padding-start:8px;--button-padding-end:8px;--button-padding-top:8px;--button-padding-bottom:8px;--button-justify-content:start;--button-primary-color:var(--cpsl-color-background-48);--button-primary-background-color:var(--cpsl-color-background-4);--button-primary-border-color:var(--cpsl-color-background-4);--button-primary-icon-color:var(--cpsl-color-text-primary);--button-primary-disabled-color:var(--cpsl-color-text-primary);--button-primary-disabled-background-color:var(--cpsl-color-background-4);--button-primary-disabled-border-color:var(--cpsl-color-background-4);--button-primary-disabled-icon-color:var(--cpsl-color-text-primary);--button-primary-hover-color:var(--cpsl-color-background-48);--button-primary-hover-background-color:var(--cpsl-color-background-0);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-background-48);--button-primary-active-color:var(--cpsl-color-text-primary);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-text-primary)}.sub-route.selected{--button-primary-color:var(--cpsl-color-text-primary);--button-primary-background-color:var(--cpsl-color-background-0);--button-primary-border-color:var(--cpsl-color-background-0);--button-primary-icon-color:var(--cpsl-color-background-48);--button-primary-disabled-color:var(--cpsl-color-background-48);--button-primary-disabled-background-color:var(--cpsl-color-background-0);--button-primary-disabled-border-color:var(--cpsl-color-background-0);--button-primary-disabled-icon-color:var(--cpsl-color-background-48);--button-primary-hover-color:var(--cpsl-color-text-primary);--button-primary-hover-background-color:var(--cpsl-color-background-0);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-background-48);--button-primary-active-color:var(--cpsl-color-background-48);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-background-48)}.main-route{--button-padding-start:8px;--button-padding-end:8px;--button-padding-top:8px;--button-padding-bottom:8px;--button-justify-content:start;--button-primary-color:var(--cpsl-color-background-48);--button-primary-background-color:var(--cpsl-color-background-0);--button-primary-border-color:var(--cpsl-color-background-0);--button-primary-icon-color:var(--cpsl-color-background-48);--button-primary-disabled-color:var(--cpsl-color-background-48);--button-primary-disabled-background-color:var(--cpsl-color-background-0);--button-primary-disabled-border-color:var(--cpsl-color-background-0);--button-primary-disabled-icon-color:var(--cpsl-color-background-48);--button-primary-hover-color:var(--cpsl-color-background-48);--button-primary-hover-background-color:var(--cpsl-color-background-4);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-background-48);--button-primary-active-color:var(--cpsl-color-background-48);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-background-48)}.main-route.selected{--button-primary-color:var(--cpsl-color-text-primary);--button-primary-background-color:var(--cpsl-color-background-4);--button-primary-border-color:var(--cpsl-color-background-4);--button-primary-icon-color:var(--cpsl-color-text-primary);--button-primary-disabled-color:var(--cpsl-color-text-primary);--button-primary-disabled-background-color:var(--cpsl-color-background-4);--button-primary-disabled-border-color:var(--cpsl-color-background-4);--button-primary-disabled-icon-color:var(--cpsl-color-text-primary);--button-primary-hover-color:var(--cpsl-color-text-primary);--button-primary-hover-background-color:var(--cpsl-color-background-4);--button-primary-hover-border-color:var(--cpsl-color-background-4);--button-primary-hover-icon-color:var(--cpsl-color-text-primary);--button-primary-active-color:var(--cpsl-color-text-primary);--button-primary-active-background-color:var(--cpsl-color-background-4);--button-primary-active-border-color:var(--cpsl-color-background-4);--button-primary-active-icon-color:var(--cpsl-color-text-primary)}";
const CpslNavButtonStyle0 = cpslNavButtonCss;

const CpslNavButton = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cpslNavButtonClick = index.createEvent(this, "cpslNavButtonClick", 7);
        this.cpslNavButtonSubRouteClick = index.createEvent(this, "cpslNavButtonSubRouteClick", 7);
        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 (index.h(index.Host, { key: '502ee237751a59264f26e3cc0bb1d98c3b27416c' }, index.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 }, index.h("slot", { key: '45f67ecbb581fda045d786bf4d82ef7740fd4ee7', name: "start" }), index.h("slot", { key: '53ef86ef731b99344e398162429217adc8807b3f' }), index.h("slot", { key: '248fdf014c63862a45a9faa5b03a9994c9ddd50c', name: "end" })), (!!selectedSubRoute || isMainRouteSelected) && !!((_b = this.subRoutes) === null || _b === void 0 ? void 0 : _b.length) && (index.h("div", { key: '766e04ef327cb4291a5cde6c38e267b97703dbb0', class: "sub-route-container" }, this.subRoutes.map(sr => (index.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)))))));
    }
    get el() { return index.getElement(this); }
};
CpslNavButton.style = CpslNavButtonStyle0;

exports.cpsl_nav_button = CpslNavButton;

//# sourceMappingURL=cpsl-nav-button.cjs.entry.js.map