import { p as proxyCustomElement, H, h } from './p-BhqVmlhr.js';

const DgaProgressIndicatorStep = /*@__PURE__*/ proxyCustomElement(class DgaProgressIndicatorStep extends H {
    constructor() {
        super();
        this.__registerHost();
        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: '1dbf3a46fd2a16be1fed73c03024f3e6a4aab05f', class: "progress-indicator__step", onMouseDown: this.handleFocus, onMouseUp: this.handleFocusOut }, h("div", { key: 'fd7b1d9d72dc84e78a9b5a86febf9a3fe1477b14', class: "progress-indicator__step-content dga-flex-column", ref: el => (this.stepContentRef = el) }, h("div", { key: '20398cc4dbfe44280b10f13e5741a55c74aa2ae0', class: "step-label", "data-state": this.labelState }, h("span", { key: 'afc36029e3aedc6b657b4c71e43bc902c49660a8', class: `step-label--${this.labelStyle}` }, this.labelStyle === 'circle' && this.labelChildren(this.currentStep))), h("div", { key: 'e9ac3adb6f843e081e51c788163b3e4dc1a83490', class: "step-text dga-flex-column" }, this.showStepName && h("span", { key: 'a14606aa329d9c664577e92525c6a5969b43a5bd', class: this.isActive ? 'text-md-medium' : 'text-md-regular' }, this.title), this.showStepDescription && h("p", { key: 'aa46e054ae72ffda1c48a776195a41d2c0209c67', class: "text-sm-regular" }, this.description))), this.nextStep && h("span", { key: 'a24a8f4ff6b89bae49d9f3429a9a7bdbdb95c14f', class: `progress-indicator__step-connector ${this.isActive ? 'progress-indicator__step-connector--active' : ''}` })));
    }
    get el() { return this; }
}, [0, "dga-progress-indicator-step-v3", {
        "currentStep": [1538, "current-step"],
        "title": [1],
        "description": [1],
        "activeStep": [2, "active-step"],
        "nextStep": [4, "next-step"],
        "showStepName": [4, "show-step-name"],
        "showStepDescription": [4, "show-step-description"],
        "labelStyle": [1, "label-style"],
        "internalActiveStep": [32],
        "isActive": [32],
        "labelState": [32]
    }, [[4, "stepChange", "stepChangeHandler"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-progress-indicator-step-v3"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-progress-indicator-step-v3":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaProgressIndicatorStep);
            }
            break;
    } });
}

const DgaProgressIndicatorStepV3 = DgaProgressIndicatorStep;
const defineCustomElement = defineCustomElement$1;

export { DgaProgressIndicatorStepV3, defineCustomElement };
