import { r as registerInstance, h } from './index-Cby2wKoI.js';

const stepCss = () => `.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label:focus{outline:2px solid #0A8276;outline-offset:2px}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}`;

const Step = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    complete = false;
    disabled = false;
    error = false;
    lastStep = false;
    stepId = 1;
    stepperState = {
        activeStep: 1,
        showStepNumber: false,
        variant: "default",
        indicatorPosition: "left",
    };
    active;
    clickable = false;
    onStepChange(event) {
        const previousActiveStep = event.detail.previousActiveStep;
        if (previousActiveStep === this.stepId && this.error) {
            this.clickable = true;
        }
    }
    updateCurrentStep(newStepperState) {
        this.active = newStepperState.activeStep === this.stepId;
    }
    updateErrorState() {
        if (this.active) {
            this.error = false;
        }
    }
    handleStepClick() {
        if (!this.disabled &&
            this.stepperState.variant !== "compact" &&
            (this.clickable || this.complete)) {
            this.stepperState.setActiveStep(this.stepId, true);
        }
    }
    handleStepKeyDown(event) {
        if (!this.disabled &&
            this.stepperState.variant !== "compact" &&
            (this.clickable || this.complete) &&
            event.key === "Enter") {
            this.stepperState.setActiveStep(this.stepId, true);
        }
    }
    stopOnClickPropogation(event) {
        if (this.disabled) {
            event.stopPropagation();
        }
    }
    render() {
        return (h("div", { key: '48f8d3e65c8986e12235f9b9d27c7063a3ee5f44', "aria-current": this.active ? "step" : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? "first-step" : ""} 
                        ${this.error ? "error" : ""}
                        ${this.stepperState.variant}
                        ${this.complete ? "complete" : ""}
                        ${this.lastStep ? "last-step" : ""}
                        indicator-${this.stepperState.indicatorPosition}
                        ${this.active ? "active" : ""}
                        ${this.clickable ? "clickable" : ""}
                        ${this.disabled ? "disabled" : ""}` }, h("div", { key: 'ace48c7e2a8b003aa8e0576502f5fcf352e6410e', class: "step-icon-wrapper" }, this.stepperState.variant !== "compact" && (h("span", { key: '5bc14ea53a30546d7d231adb875789c2df58b96a', class: "step-connector-l" })), this.stepperState.variant !== "compact" &&
            (!this.error || (this.error && this.active)) && (h("div", { key: 'e074bb35b2a7d43b005e982731e3275b3299bea0', class: "step-icon" }, this.stepperState.showStepNumber &&
            !this.complete &&
            !this.active
            ? this.stepId
            : "", this.complete && !this.active && (h("ifx-icon", { key: '30097d51812f3e40744d4ff6c00fea86c597fad0', icon: "check16" })), this.active && h("span", { key: 'f92797e927d0cb2e485cd4f0130ba270fb3c512e', class: "active-indic" }))), this.stepperState.variant !== "compact" &&
            this.error &&
            !this.active && (h("ifx-icon", { key: 'e8ae99a11ca4ed34b018be4736481d6d93da8cca', class: "error-icon", icon: "warningF16" })), this.stepperState.variant !== "compact" && (h("span", { key: '744f6004e086eace28cb45bb6cdf797a08aa4615', class: `step-connector-r ${this.active ? "active" : ""}` }))), 
        /* Step labels */
        (this.stepperState.variant !== "compact" ||
            (this.stepperState.variant === "compact" &&
                (this.active ||
                    this.stepId === this.stepperState.activeStep + 1))) && (h("div", { key: '5e0d9ca20a5f0431f15b0bfc4c889e0adcd391b4', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === "compact" ? (this.active ? "curr-label" : "next-label") : ""}`, onClick: () => {
                this.handleStepClick();
            }, onKeyDown: (e) => {
                this.handleStepKeyDown(e);
            } }, this.stepperState.variant !== "compact" && h("slot", { key: '65fdad56b01398c1c432b584282491f631d777a2' }), this.stepperState.variant === "compact" && !this.active
            ? "Next: "
            : "", this.stepperState.variant === "compact" && h("slot", { key: '775d60bea7a0cb66d16ff8adac2ffba1a9704ad3' })))));
    }
    static get watchers() { return {
        "stepperState": [{
                "updateCurrentStep": 0
            }],
        "active": [{
                "updateErrorState": 0
            }]
    }; }
};
Step.style = stepCss();

export { Step as ifx_step };
//# sourceMappingURL=ifx-step.entry.js.map

//# sourceMappingURL=ifx-step.entry.js.map