import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-6191c26c.js';
import { a as axios } from './axios-dd6eafb6.js';
import { k as toSnakeCase, j as getMeta, b as alertCodeByStatus, c as cls } from './helpers-2fce0c0e.js';
import { L as Lang } from './lang-c70ba3d7.js';
import { D as Dialog } from './dialog-96cc1274.js';
import { E as Errors } from './errors-2db24f13.js';

const styleCss$1 = "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;opacity:0.6}x-stepper x-step[active]{opacity:1}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 XStepStyle0 = styleCss$1;

const XStep = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.submit = undefined;
        this.active = undefined;
        this.disabled = undefined;
        this.status = 'ready';
        this.position = undefined;
        this.label = undefined;
        this.description = undefined;
        this.icon = undefined;
        this.index = undefined;
        this.validate = () => Promise.resolve();
        this.prevIcon = 'left';
        this.prevText = undefined;
        this.nextIcon = 'right';
        this.nextText = undefined;
        this.appendHeaders = {};
        this.loading = undefined;
    }
    /**
     * Element change active prop
     */
    watchActive(newValue) {
        if (newValue && this.el.querySelector('form')) {
            this.form = this.el.querySelector('form');
            this.onFormChangeDispatch();
            this.form.addEventListener('loading', this.onFormLoadingDispatch.bind(this));
            this.form.addEventListener('input', this.onFormChangeDispatch.bind(this));
        }
        if (!newValue && this.form) {
            this.form.removeEventListener('loading', this.onFormLoadingDispatch);
            this.form.removeEventListener('input', this.onFormChangeDispatch);
        }
    }
    /**
     * Watch Element disabled state change
     */
    watchDisabled() {
        this.parent.updateStepPositions();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.parent = this.el.closest('x-stepper');
    }
    /**
     * On form change loading state
     */
    onFormLoadingDispatch(e) {
        this.loading = e.detail;
    }
    /**
     * On form detect changes on some input
     */
    onFormChangeDispatch() {
        setTimeout(() => {
            this.status = this.form.checkValidity() ? 'valid' : 'invalid';
        }, 0);
    }
    /**
     * On press done button
     */
    onDone() {
        this.parent.dispatchEvent(new Event('done', { bubbles: false }));
    }
    /**
     * Go to the next step
     */
    nextStep() {
        this.loading = true;
        this.submitData()
            .then(() => this.validate())
            .then(() => this.parent.nextStep())
            .catch(err => console.warn(err))
            .finally(() => this.loading = false);
    }
    /**
     * Go to the previous step
     */
    prevStep() {
        this.parent.prevStep();
    }
    /**
     * Evaluate step and submit before change
     */
    submitData() {
        return new Promise((resolve, reject) => {
            var _a;
            if (!this.submit) {
                return resolve();
            }
            const form = this.el.querySelector('form');
            if (!form) {
                return resolve();
            }
            form.addEventListener('loading', (e) => {
                this.loading = e.detail;
            });
            if (form.closest('x-form')) {
                form.dispatchEvent(new SubmitEvent('submit', { bubbles: false, submitter: this.nextButton }));
            }
            else {
                const data = new FormData(form);
                for (const key in form.dataset) {
                    data.append(toSnakeCase(key), form.dataset[key]);
                }
                axios({
                    method: form.method,
                    url: (_a = form.action) !== null && _a !== void 0 ? _a : window.location.href,
                    data: data,
                    headers: Object.assign(Object.assign({}, this.appendHeaders), { 'Content-Type': form.enctype, 'X-CSRF-TOKEN': getMeta('csrf-token') }),
                }).then((response) => {
                    form.dispatchEvent(new CustomEvent('success', { bubbles: false, detail: response }));
                    response.status == 200 || response.status == 201 ? resolve() : reject(new Error(response.statusText));
                }).catch((err) => {
                    var _a, _b, _c, _d;
                    if (err === null || err === void 0 ? void 0 : err.response) {
                        const data = (_b = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {};
                        const hasValidationErrors = (_c = data.errors) !== null && _c !== void 0 ? _c : {};
                        if (hasValidationErrors) {
                            Errors.fill(data.errors);
                        }
                        Dialog({
                            message: (_d = data === null || data === void 0 ? void 0 : data.message) !== null && _d !== void 0 ? _d : data,
                            type: alertCodeByStatus(err.status)
                        });
                        form.dispatchEvent(new CustomEvent('failed', { bubbles: false, detail: err === null || err === void 0 ? void 0 : err.response }));
                    }
                    else {
                        Dialog.exception({ message: err.message });
                    }
                    reject(err);
                });
            }
        });
    }
    /**
     * Render element
     */
    render() {
        var _a, _b;
        return h(Host, { key: 'd07f17897df9a45e729d4b5831f87483e23b2834' }, h("div", { key: 'cb6d0cb8c4346d71f80ba9b4544115f7b3dc0a34', class: "step-header" }, h("div", { key: 'bd5af3723218167c0b00fb23f0a9b1f75f7e59f4', class: cls('step-indicator', { 'disabled': this.disabled, 'active': this.active }, `step-${this.status}`) }, this.icon ? h("x-icon", { name: this.icon, size: "1.5rem" }) : h("span", null, this.index + 1)), h("div", { key: '292c311dc673a8ca68470727aeaf5b4f50807514', class: "step-title" }, h("h4", { key: '2714d847b914a9ed1d486e1d29c9d77eb999c0ca' }, this.label), this.description && h("p", { key: '7e5751dd9933ff99a0b7c052e88ba6739da18fe5' }, this.description))), h("section", { key: 'c01b2843d83cae270d87f1dac3e8b8e60328ac95', class: cls({ 'step-disabled': this.disabled, 'step-active': this.active }, `step-${this.status}`) }, h("slot", { key: 'beec88899b305b818c0c242daa6363ecc47b323f' }), h("hr", { key: '1adc0845c6cb395c14670b7ebe581621a72f322e', class: "dashed" }), h("footer", { key: 'bc447aa73758c8158fce011df35a4c9eaa083311' }, this.position != 'first' && h("x-button", { key: 'ead576c3990f5b3a55c6cc64ccc458e4f32745a9', onClick: () => this.prevStep(), small: true, color: "default", icon: this.prevIcon }, Lang.get((_a = this.prevText) !== null && _a !== void 0 ? _a : 'stepper.back')), h("x-button", { key: 'fba5ca5b4f0628f98be07e6a7b721c1d90b5dae5', ref: el => this.nextButton = el, onClick: () => this.position == 'last' ? this.onDone() : this.nextStep(), loading: this.loading, disabled: this.loading || this.status == 'invalid', small: true, color: "primary", icon: this.nextIcon }, Lang.get((_b = this.nextText) !== null && _b !== void 0 ? _b : (this.position == 'last' ? 'stepper.finish' : 'stepper.next'))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "active": ["watchActive"],
        "disabled": ["watchDisabled"]
    }; }
};
XStep.style = XStepStyle0;

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;opacity:0.6}x-stepper x-step[active]{opacity:1}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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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 getElement(this); }
};
XStepper.style = XStepperStyle0;

export { XStep as x_step, XStepper as x_stepper };
