import { h } from "@stencil/core";
export class Step {
    complete = false;
    disabled = false;
    error = false;
    lastStep = false;
    stepId = 1;
    stepperState = {
        activeStep: 1,
        showStepNumber: false,
        variant: "default",
        indicatorPosition: "left",
    };
    active;
    clickable = false;
    onStepChange(event) {
        const previousActiveStep = event.detail.previousActiveStep;
        if (previousActiveStep === this.stepId && this.error) {
            this.clickable = true;
        }
    }
    updateCurrentStep(newStepperState) {
        this.active = newStepperState.activeStep === this.stepId;
    }
    updateErrorState() {
        if (this.active) {
            this.error = false;
        }
    }
    handleStepClick() {
        if (!this.disabled &&
            this.stepperState.variant !== "compact" &&
            (this.clickable || this.complete)) {
            this.stepperState.setActiveStep(this.stepId, true);
        }
    }
    handleStepKeyDown(event) {
        if (!this.disabled &&
            this.stepperState.variant !== "compact" &&
            (this.clickable || this.complete) &&
            event.key === "Enter") {
            this.stepperState.setActiveStep(this.stepId, true);
        }
    }
    stopOnClickPropogation(event) {
        if (this.disabled) {
            event.stopPropagation();
        }
    }
    render() {
        return (h("div", { key: '48f8d3e65c8986e12235f9b9d27c7063a3ee5f44', "aria-current": this.active ? "step" : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? "first-step" : ""} 
                        ${this.error ? "error" : ""}
                        ${this.stepperState.variant}
                        ${this.complete ? "complete" : ""}
                        ${this.lastStep ? "last-step" : ""}
                        indicator-${this.stepperState.indicatorPosition}
                        ${this.active ? "active" : ""}
                        ${this.clickable ? "clickable" : ""}
                        ${this.disabled ? "disabled" : ""}` }, h("div", { key: 'ace48c7e2a8b003aa8e0576502f5fcf352e6410e', class: "step-icon-wrapper" }, this.stepperState.variant !== "compact" && (h("span", { key: '5bc14ea53a30546d7d231adb875789c2df58b96a', class: "step-connector-l" })), this.stepperState.variant !== "compact" &&
            (!this.error || (this.error && this.active)) && (h("div", { key: 'e074bb35b2a7d43b005e982731e3275b3299bea0', class: "step-icon" }, this.stepperState.showStepNumber &&
            !this.complete &&
            !this.active
            ? this.stepId
            : "", this.complete && !this.active && (h("ifx-icon", { key: '30097d51812f3e40744d4ff6c00fea86c597fad0', icon: "check16" })), this.active && h("span", { key: 'f92797e927d0cb2e485cd4f0130ba270fb3c512e', class: "active-indic" }))), this.stepperState.variant !== "compact" &&
            this.error &&
            !this.active && (h("ifx-icon", { key: 'e8ae99a11ca4ed34b018be4736481d6d93da8cca', class: "error-icon", icon: "warningF16" })), this.stepperState.variant !== "compact" && (h("span", { key: '744f6004e086eace28cb45bb6cdf797a08aa4615', class: `step-connector-r ${this.active ? "active" : ""}` }))), 
        /* Step labels */
        (this.stepperState.variant !== "compact" ||
            (this.stepperState.variant === "compact" &&
                (this.active ||
                    this.stepId === this.stepperState.activeStep + 1))) && (h("div", { key: '5e0d9ca20a5f0431f15b0bfc4c889e0adcd391b4', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === "compact" ? (this.active ? "curr-label" : "next-label") : ""}`, onClick: () => {
                this.handleStepClick();
            }, onKeyDown: (e) => {
                this.handleStepKeyDown(e);
            } }, this.stepperState.variant !== "compact" && h("slot", { key: '65fdad56b01398c1c432b584282491f631d777a2' }), this.stepperState.variant === "compact" && !this.active
            ? "Next: "
            : "", this.stepperState.variant === "compact" && h("slot", { key: '775d60bea7a0cb66d16ff8adac2ffba1a9704ad3' })))));
    }
    static get is() { return "ifx-step"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["step.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["step.css"]
        };
    }
    static get properties() {
        return {
            "complete": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "complete",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "lastStep": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "last-step",
                "defaultValue": "false"
            },
            "stepId": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "step-id",
                "defaultValue": "1"
            },
            "stepperState": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "StepperState",
                    "resolved": "StepperState",
                    "references": {
                        "StepperState": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/stepper/interfaces.tsx::StepperState",
                            "referenceLocation": "StepperState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n\t\tactiveStep: 1,\n\t\tshowStepNumber: false,\n\t\tvariant: \"default\",\n\t\tindicatorPosition: \"left\",\n\t}"
            }
        };
    }
    static get states() {
        return {
            "active": {},
            "clickable": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "stepperState",
                "methodName": "updateCurrentStep"
            }, {
                "propName": "active",
                "methodName": "updateErrorState"
            }];
    }
    static get listeners() {
        return [{
                "name": "ifxChange",
                "method": "onStepChange",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=step.js.map
