'use strict';

var index = require('./index-Dc5gCGlQ.js');
var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
var domUtils = require('./dom-utils-dykhxr-_.js');

const stepperCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.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);
        this.activeStep = 1;
        this.indicatorPosition = 'left';
        this.showStepNumber = false;
        this.variant = 'default';
        this.shouldEmitEvent = true;
        this.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 = frameworkDetection.detectFramework();
            frameworkDetection.trackComponent('ifx-stepper', await framework);
        }
        this.syncIfxSteps();
    }
    componentWillUpdate() {
        this.syncIfxSteps();
    }
    render() {
        return (index.h("div", { key: '16a44202cfa8db69fb000f8d2a8336e80a563dc0', "aria-label": 'a stepper', 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: '1eb6ee3e879d0ed661400378972718a6eaa8a258', class: 'stepper-progress' }, index.h("div", { key: '83228a38899561e57ec3425d78112ed90aebd9d6', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: 'ac56160c6f6aa83a4ea87b50aa879ad435b85d24', class: `stepper-wrapper` }, index.h("slot", { key: 'ac0d9db5164d7412d83194703266adf109e0870d' }))));
    }
    ;
    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}%`);
        }
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "activeStep": ["handleActiveStep"]
    }; }
};
Stepper.style = stepperCss;

exports.ifx_stepper = Stepper;
//# sourceMappingURL=ifx-stepper.entry.cjs.js.map

//# sourceMappingURL=ifx-stepper.cjs.entry.js.map