import { r as registerInstance, h, g as getElement } from './index-1acf58d3.js';

const DgaProgressIndicatorStep = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.currentStep = 1;
        this.title = '';
        this.description = '';
        this.activeStep = 0;
        this.nextStep = true;
        this.showStepName = true;
        this.showStepDescription = true;
        this.internalActiveStep = 1;
        this.isActive = false;
        this.labelState = 'upcoming';
        this.labelStyle = 'circle';
        this.handleFocus = () => {
            this.stepContentRef.classList.add('focus');
        };
        this.handleFocusOut = () => {
            this.stepContentRef.classList.remove('focus');
        };
        this.handleEscape = (event) => {
            if (event.key === 'Escape') {
                this.handleFocusOut();
                const inputElement = this.el.querySelector('input');
                if (inputElement) {
                    inputElement.blur();
                }
            }
        };
    }
    componentWillLoad() {
        this.updateState();
        window.addEventListener('keydown', this.handleEscape);
    }
    disconnectedCallback() {
        window.removeEventListener('keydown', this.handleEscape);
    }
    stepChangeHandler(event) {
        this.internalActiveStep = event.detail;
        console.log('stepChangeHandler', event.detail);
        this.isActive = event.detail > this.currentStep;
        if (event.detail > this.currentStep) {
            this.labelState = 'completed';
        }
        else if (event.detail < this.currentStep) {
            this.labelState = 'upcoming';
        }
        else {
            this.labelState = 'current';
        }
    }
    // @Watch('internalActiveStep')
    updateState() {
        this.isActive = this.internalActiveStep > this.currentStep;
        if (this.internalActiveStep > this.currentStep) {
            this.labelState = 'completed';
        }
        else if (this.internalActiveStep < this.currentStep) {
            this.labelState = 'upcoming';
        }
        else {
            this.labelState = 'current';
        }
    }
    labelChildren(currentStep) {
        if (this.labelState === 'completed') {
            return h("i", { class: "hgi-stroke hgi-tick-02", style: { fontSize: "16px" } });
        }
        return currentStep.toString();
    }
    render() {
        return (h("div", { key: '9793f6500ca598d097c815aa051f5ca81506dd89', class: "progress-indicator__step", onMouseDown: this.handleFocus, onMouseUp: this.handleFocusOut }, h("div", { key: 'a13bb8ae0b5c824b1a6f27dec55d538d083712d6', class: "progress-indicator__step-content dga-flex-column", ref: el => (this.stepContentRef = el) }, h("div", { key: '2f794b8ceb09295397688efedc6c70296c359ef5', class: "step-label", "data-state": this.labelState }, h("span", { key: '471dd863a8c18ee3264c9ee94dcddef1052273d6', class: `step-label--${this.labelStyle}` }, this.labelStyle === 'circle' && this.labelChildren(this.currentStep))), h("div", { key: '30e1ec6029a08c9f31907511b71697a09a53db92', class: "step-text dga-flex-column" }, this.showStepName && h("span", { key: 'cd581e2e70b58bdc89b1b65ccc4641834fc4f4d9', class: this.isActive ? 'text-md-medium' : 'text-md-regular' }, this.title), this.showStepDescription && h("p", { key: '652bd2b978f800a85929ae06497c9fe5d7f3814a', class: "text-sm-regular" }, this.description))), this.nextStep && h("span", { key: '7418e832f54b831057d2eb27a4df44353cec49bc', class: `progress-indicator__step-connector ${this.isActive ? 'progress-indicator__step-connector--active' : ''}` })));
    }
    get el() { return getElement(this); }
};

export { DgaProgressIndicatorStep as dga_progress_indicator_step };

//# sourceMappingURL=dga-progress-indicator-step.entry.js.map