'use strict';

var index = require('./index-pX0sBY0-.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');

const stepperCss = () => `.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #BFBBBB 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}`;

const Stepper = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxChange = index.createEvent(this, "ifxChange", 7);
    }
    get el() { return index.getElement(this); }
    /** Fired when the active step changes. */
    ifxChange;
    /** Currently active step in the stepper. */
    activeStep = 1;
    /** Position of the indicator relative to the step content. */
    indicatorPosition = "left";
    /** If true, displays step numbers inside the indicators. */
    showStepNumber = false;
    /** Visual layout variant of the stepper (default, compact, or vertical). */
    variant = "default";
    /** Accessible label for the stepper region. */
    ariaLabelText;
    /** ARIA current value for the active step (e.g. 'step' or 'page'). */
    ariaCurrentText;
    stepsCount;
    shouldEmitEvent = true;
    emittedByClick = false;
    onStepChange(event) {
        const steps = this.getSteps();
        const previousActiveStep = steps[event.detail.previousActiveStep - 1];
        if (previousActiveStep && !previousActiveStep.complete) {
            previousActiveStep.setAttribute("error", "true");
        }
    }
    handleActiveStep(newStep, oldStep) {
        const steps = this.getSteps();
        if (!this.shouldEmitEvent) {
            this.shouldEmitEvent = true;
            return;
        }
        // Skipping until the enabled step is found
        if (steps[newStep - 1]) {
            if (!steps[newStep - 1].disabled) {
                this.emitIfxChange(newStep, oldStep);
            }
            else {
                // If coming from higher step number to the lower step number
                if (newStep < oldStep) {
                    let i = newStep;
                    this.shouldEmitEvent = false;
                    while (i >= 1 && steps[i - 1].disabled)
                        i--;
                    // if all the steps are disabled no change.
                    if (i < 1) {
                        this.activeStep = oldStep;
                    }
                    else {
                        this.emitIfxChange(i, oldStep);
                        this.activeStep = i;
                    }
                }
                // If coming from lower step number to the higher step number
                else {
                    let i = newStep;
                    this.shouldEmitEvent = false;
                    while (i <= this.stepsCount && steps[i - 1].disabled)
                        i++;
                    if (i > this.stepsCount) {
                        this.activeStep = oldStep;
                    }
                    else {
                        this.emitIfxChange(i, oldStep);
                        this.activeStep = i;
                    }
                }
            }
        }
    }
    emitIfxChange(activeStep, previousActiveStep) {
        this.ifxChange.emit({
            activeStep: activeStep,
            previousActiveStep: previousActiveStep,
            totalSteps: this.stepsCount,
            emittedByClick: this.emittedByClick,
        });
        this.emittedByClick = false;
    }
    getSteps() {
        const steps = this.el.querySelectorAll("ifx-step");
        return steps;
    }
    addStepIdsToStepsAndCountSteps() {
        const steps = this.getSteps();
        steps[steps.length - 1].lastStep = true;
        for (let i = 0; i < steps.length; i++) {
            steps[i].stepId = i + 1;
        }
        this.stepsCount = steps.length;
    }
    setActiveStep(stepId, setByClick = false) {
        this.emittedByClick = setByClick;
        this.activeStep = stepId;
    }
    setStepsBeforeActiveToComplete() {
        const steps = this.getSteps();
        steps.forEach((step, stepId) => {
            if (stepId + 1 < this.activeStep)
                step.complete = true;
        });
    }
    syncIfxSteps() {
        const steps = this.getSteps();
        for (let i = 0; i < steps.length; i++) {
            const stepperState = {
                activeStep: this.activeStep,
                indicatorPosition: this.indicatorPosition !== "right" ? "left" : "right",
                showStepNumber: this.showStepNumber,
                variant: this.variant !== "compact" && this.variant !== "vertical"
                    ? "default"
                    : this.variant,
                setActiveStep: this.setActiveStep.bind(this),
            };
            steps[i].stepperState = stepperState;
        }
    }
    setInitialActiveStep() {
        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== "compact" ? 1 : 0), this.activeStep));
    }
    componentWillLoad() {
        this.addStepIdsToStepsAndCountSteps();
        this.setInitialActiveStep();
        this.setStepsBeforeActiveToComplete();
    }
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-stepper", await framework);
        }
        this.syncIfxSteps();
    }
    componentWillUpdate() {
        this.syncIfxSteps();
    }
    render() {
        return (index.h("div", { key: '5138d0d39b48558835131175b4115ec88e221edc', "aria-label": this.ariaLabelText, "aria-current": this.ariaCurrentText, role: "navigation", class: `stepper ${this.variant !== "compact" && this.variant !== "vertical" ? "default" : this.variant} ${this.variant === "compact" ? "compact-" + this.indicatorPosition : ""}` }, 
        /* Progress bar for compact variant. */
        this.variant === "compact" && (index.h("div", { key: '7a54901eb69eac87abd302de79d3ff5f767173be', class: "stepper-progress" }, index.h("div", { key: '628395a4684077f72b973f33d1a3f2d85c9a12a4', class: "progress-detail" }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`))), index.h("div", { key: '7cddc051a09495ccd20ff8b49809c37fdd2ddd69', class: `stepper-wrapper` }, index.h("slot", { key: '17922d117b17ed2956bc921b7e50c58b654ad7c8' }))));
    }
    componentDidRender() {
        /* Updating progress bar in compact version. */
        if (this.variant == "compact") {
            const progressBar = this.el.shadowRoot.querySelector(".stepper-progress");
            progressBar.style.setProperty("--pb", `${(this.activeStep / this.stepsCount) * 100}%`);
        }
    }
    static get watchers() { return {
        "activeStep": [{
                "handleActiveStep": 0
            }]
    }; }
};
Stepper.style = stepperCss();

exports.ifx_stepper = Stepper;
