import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';

const styleCss = "x-stepper{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}.is-dark-mode x-stepper{color:var(--color-text-light, #FEFEFE)}x-stepper.is-transitioning{overflow:hidden}x-stepper x-step{position:relative;overflow:visible;display:block;padding:1rem 0}x-stepper x-step .step-header{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}x-stepper x-step .step-header .step-title{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:start;-ms-flex-pack:center;justify-content:center;margin-left:1rem;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;min-height:2.2rem}x-stepper x-step .step-header .step-title h4{margin-bottom:0}x-stepper x-step .step-header .step-title p{margin-top:0.25rem;margin-bottom:0}x-stepper x-step .step-header .step-indicator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.2rem;height:2.2rem;color:var(--color-text-light, #FEFEFE);text-align:center;border-radius:50%;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;background-color:var(--color-default, #9B9B9B)}x-stepper x-step .step-header .step-indicator.active{background-color:var(--color-primary, #4275F2);-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3)}x-stepper x-step .step-header .step-indicator span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;text-align:center;font-size:1.2rem}x-stepper x-step section{position:relative;display:none;padding:2rem 1rem 1rem 3.2rem}x-stepper x-step section.step-active{display:block;-webkit-animation:stepShow 0.4s;animation:stepShow 0.4s}x-stepper x-step section p:last-child{margin-bottom:0}x-stepper x-step section footer{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}x-stepper x-step section footer x-button{margin-left:1rem}x-stepper x-step:before{content:\"\";min-height:1.2rem;width:1.25rem;height:calc(100% - 3rem);position:absolute;top:3.6rem;left:calc(1.1rem - 1px);border-left:2px solid var(--color-border-tinted, #d9d8db)}x-stepper x-step:last-of-type:before{display:none;height:0}x-stepper x-step[active]:last-of-type:before{display:block;height:calc(100% - 9.3rem);border-bottom:2px solid var(--color-border-tinted, #d9d8db);border-radius:0 0 0 1rem}@-webkit-keyframes stepShow{from{opacity:0;-webkit-transform:translate3d(-1rem, 0, 0);transform:translate3d(-1rem, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes stepShow{from{opacity:0;-webkit-transform:translate3d(-1rem, 0, 0);transform:translate3d(-1rem, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}";
const XStepperStyle0 = styleCss;

const XStepper$1 = /*@__PURE__*/ proxyCustomElement(class XStepper extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.onChangeStepEvent = createEvent(this, "step-change", 3);
        this.onDone = createEvent(this, "done", 3);
        this.steps = [];
        this.activeStep = undefined;
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.computeChildSteps();
    }
    /**
     * Go to the element step and set active
     */
    async goToStep(step) {
        if (this.activeStep) {
            this.activeStep.removeAttribute('active');
        }
        setTimeout(() => {
            this.activeStep = step;
            step.setAttribute('active', 'true');
            this.onChangeStepEvent.emit(step);
        }, 10);
    }
    /**
     * Get the next enabled step index recursively
     */
    getNextEnabledIndex(currentIndex, direction) {
        const nextIndex = currentIndex + direction;
        if (nextIndex < 0 || nextIndex >= this.steps.length) {
            return currentIndex;
        }
        const nextStep = this.steps[nextIndex];
        if (nextStep.disabled) {
            return this.getNextEnabledIndex(nextIndex, direction);
        }
        return nextIndex;
    }
    /**
     * Update each step's position property based on first and last enabled steps
     */
    async updateStepPositions() {
        const enabledSteps = this.steps.filter(step => !step.disabled);
        if (!enabledSteps.length)
            return;
        const firstStep = enabledSteps[0];
        const lastStep = enabledSteps[enabledSteps.length - 1];
        this.steps.forEach(step => {
            if (step === firstStep) {
                step.position = 'first';
            }
            else if (step === lastStep) {
                step.position = 'last';
            }
            else if (!step.disabled) {
                step.position = 'middle';
            }
            else {
                step.position = undefined;
            }
        });
    }
    /**
     * Go to the next step
     */
    async nextStep() {
        const nextIndex = this.getNextEnabledIndex(this.activeStep.index, 1);
        if (nextIndex !== this.activeStep.index) {
            this.goToStep(this.steps[nextIndex]);
        }
    }
    /**
     * Go to the previous step
     */
    async prevStep() {
        const prevIndex = this.getNextEnabledIndex(this.activeStep.index, -1);
        if (prevIndex !== this.activeStep.index) {
            this.goToStep(this.steps[prevIndex]);
        }
    }
    /**
     * On component will load hook
     */
    componentWillLoad() {
        this.computeChildSteps();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        if (!this.steps.length) {
            return;
        }
        setTimeout(() => {
            if (!this.el.querySelectorAll('.step-active').length) {
                this.goToStep(this.steps[0]);
            }
        }, 10);
    }
    /**
     * Update the child steps and render the result
     */
    computeChildSteps() {
        this.steps = Array.from(this.el.children)
            .filter(step => step.nodeName.toLowerCase() === 'x-step')
            .map(el => el);
        this.activeStep = this.steps.find(step => step.active);
        this.steps.forEach((step, index) => {
            step.index = index;
        });
        this.updateStepPositions();
    }
    get el() { return this; }
    static get style() { return XStepperStyle0; }
}, [0, "x-stepper", {
        "steps": [32],
        "activeStep": [32],
        "goToStep": [64],
        "updateStepPositions": [64],
        "nextStep": [64],
        "prevStep": [64]
    }, [[0, "slotchange", "handleSlotChange"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-stepper"];
    components.forEach(tagName => { switch (tagName) {
        case "x-stepper":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XStepper$1);
            }
            break;
    } });
}

const XStepper = XStepper$1;
const defineCustomElement = defineCustomElement$1;

export { XStepper, defineCustomElement };
