import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
import { a as areArraysEqual } from './array-CDfSqLEo.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
import { n as debounceEvent } from './helpers-BNj87EbG.js';
import { L as Logger } from './log-CwssmmaV.js';
import { n as newBalStepOption } from './bal-step.util-DIC_sxLd.js';
import { b as balBreakpoints } from './breakpoints.subject-C32mP6rF.js';
import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator-Da-lbVYy.js';
import './index-zWZxKBfo.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './index-B4k_dH6V.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';
import './device-TtMibDFL.js';
import './listener-CClDIhvK.js';
import './tokens.esm-C22U88Bg.js';

const StepIcon = ({ item, isMobile }) => {
    const bemEl = BEM.block('steps').element('nav').element('item').element('icon');
    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)) }, h("bal-icon", { style: { display: item.done ? 'block' : 'none' }, size: isMobile ? 'small' : '', color: item.disabled ? 'grey' : 'white', name: "check" }), h("span", { style: { display: !item.done ? 'block' : 'none' } }, item.failed ? '!' : (item.index || 0) + 1)));
};

const StepLabel = ({ item }) => {
    const bemEl = BEM.block('steps').element('nav').element('item').element('label');
    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), "data-testid": "bal-steps-option-label" }, item.label));
};

const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
    const bemEl = BEM.block('steps').element('nav').element('item');
    if (item.invisible) {
        return;
    }
    if (item.href) {
        return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, tabIndex: item.disabled ? -1 : undefined, href: item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
    }
    return (h("button", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, disabled: item.disabled, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
};

const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px;border:none;background-color:rgba(0,0,0,0)}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";

const Steps = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balChange = createEvent(this, "balChange");
        this.stepsId = `bal-steps-${StepsIds++}`;
        this.store = [];
        this.isMobile = balBreakpoints.isMobile;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Steps can be passed as a property or through HTML markup.
         */
        this.options = [];
        /**
         * If `true` the tabs or steps can be clicked.
         */
        this.clickable = true;
        /**
         * Defines the color of the steps so it can be placed on colored backgrounds
         */
        this.color = 'primary';
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
         */
        this.debounce = 0;
        /**
         * Value of the current active step
         */
        this.value = undefined;
        /**
         * LISTENERS
         * ------------------------------------------------------
         */
        this.mutationObserverActive = true;
        this.getStepOptions = () => {
            if (this.options.length > 0) {
                return [...this.options.map(newBalStepOption)];
            }
            else {
                return Promise.all(this.items.map(value => value.getOptions()));
            }
        };
        this.updateStore = (newStore) => {
            if (!areArraysEqual(this.store, newStore)) {
                this.store = newStore;
            }
        };
        this.setActiveItem = () => {
            const activeTabs = this.store.filter(t => t.active);
            if (activeTabs.length > 0) {
                const firstActiveTab = activeTabs[0];
                this.value = firstActiveTab.value;
            }
            else {
                if (this.value === undefined && this.store.length > 0) {
                    const firstStep = this.store[0];
                    this.value = firstStep.value;
                }
            }
        };
        this.setActiveContent = () => {
            if (this.options.length === 0) {
                this.items.forEach(item => item.setActive(this.isActive(item)));
            }
        };
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onOptionChange = async () => {
            try {
                const options = await this.getStepOptions();
                this.updateStore(options);
                this.setActiveItem();
                this.setActiveContent();
            }
            catch (e) {
                console.warn('[WARN] - Could not read tab options');
            }
        };
        this.onSelectTab = async (ev, step) => {
            if (step.prevent || step.disabled || !this.clickable) {
                stopEventBubbling(ev);
            }
            if (!step.disabled) {
                if (step.navigate) {
                    step.navigate.emit(ev);
                }
                if (this.clickable) {
                    if (step.value !== this.value) {
                        this.balChange.emit(step.value);
                        await this.select(step);
                    }
                }
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    async optionChanged() {
        this.onOptionChange();
        if (this.options === undefined || this.options.length < 1) {
            this.mutationObserverActive = true;
        }
        else {
            this.mutationObserverActive = false;
        }
    }
    debounceChanged() {
        this.balChange = debounceEvent(this.balChange, this.debounce);
    }
    async valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.onOptionChange();
        }
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.debounceChanged();
        this.mutationObserverActive = this.options === undefined || this.options.length < 1;
    }
    componentDidLoad() {
        this.onOptionChange();
    }
    mutationListener() {
        this.onOptionChange();
    }
    breakpointListener(breakpoints) {
        this.isMobile = breakpoints.mobile;
    }
    swiperOnChange(index) {
        // this.value = index
        // this.balChange.emit(index)
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * Go to tab with the given value
     */
    async select(step) {
        this.value = step.value;
    }
    /**
     * Find the options properties by its value
     */
    async getOptionByValue(value) {
        const options = this.store;
        return options.find(option => option.value === value);
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    get items() {
        return Array.from(this.el.querySelectorAll(`#${this.stepsId} > bal-step-item`));
    }
    isActive(step) {
        return step.value === this.value;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('steps');
        const bemStepsNav = block.element('nav');
        let hasPassed = true;
        let index = -1;
        const steps = this.store
            .map(step => (Object.assign(Object.assign({}, step), { active: step.value === this.value })))
            .map(step => {
            if (step.active) {
                hasPassed = false;
            }
            if (!step.invisible) {
                index = index + 1;
            }
            return Object.assign(Object.assign({}, step), { passed: hasPassed, index });
        });
        return (h(Host, { class: Object.assign({}, block.class()), "data-value": this.store
                .filter(t => this.isActive(t))
                .map(t => t.value)
                .join(','), "data-label": this.store
                .filter(t => this.isActive(t))
                .map(t => t.label)
                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, steps
            .filter(step => !step.invisible)
            .map(step => (h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "options": ["optionChanged"],
        "debounce": ["debounceChanged"],
        "value": ["valueChanged"]
    }; }
};
__decorate([
    Logger('bal-steps'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Steps.prototype, "createLogger", null);
__decorate([
    ListenToMutation({ tags: ['bal-steps', 'bal-step-item'] }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Steps.prototype, "mutationListener", null);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Steps.prototype, "breakpointListener", null);
let StepsIds = 0;
Steps.style = balStepsCss;

export { Steps as bal_steps };
