import { h } from "@stencil/core";
export class Step {
    /** If true, marks this step as completed. */
    complete = false;
    /** If true, this step is disabled and not clickable. */
    disabled = false;
    /** If true, this step is in an error state. */
    error = false;
    /** Whether this is the last step in the stepper. */
    lastStep = false;
    /** Numeric identifier / position of this step. */
    stepId = 1;
    /** Shared configuration for the whole stepper (active step, layout, etc.). */
    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: 'e1ae09763f07e32dcd999c148bd7b8a7b1994920', "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: 'a9ca4c1cb75be82c795ddbcbe9bcc3d1c2de6309', class: "step-icon-wrapper" }, this.stepperState.variant !== "compact" && (h("span", { key: 'b171b966ed435923c3a7aea006b9328842a53699', class: "step-connector-l" })), this.stepperState.variant !== "compact" &&
            (!this.error || (this.error && this.active)) && (h("div", { key: '4f18585bfbca5fd2f5c32f98463314c967dd60a5', class: "step-icon" }, this.stepperState.showStepNumber &&
            !this.complete &&
            !this.active
            ? this.stepId
            : "", this.complete && !this.active && (h("ifx-icon", { key: '1e22ba668e143d49b86c5945d9a4e802603dc8a5', icon: "check16" })), this.active && h("span", { key: '89c9e02cb22f5d02e452d195013706cf6769a628', class: "active-indic" }))), this.stepperState.variant !== "compact" &&
            this.error &&
            !this.active && (h("ifx-icon", { key: '03b16604426fbff0b21e93a0fe0f90d581649962', class: "error-icon", icon: "warningF16" })), this.stepperState.variant !== "compact" && (h("span", { key: 'f8c215618a2855c07df75df1d291ce58c0595a7f', 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: '9876f0e2dfd8512f34f850a3d6e8ce361b41ee4d', 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: '25689601339fca0a98d9eb7544bf07e1c1d80db2' }), this.stepperState.variant === "compact" && !this.active
            ? "Next: "
            : "", this.stepperState.variant === "compact" && h("slot", { key: '0dcbec280e4931f7dded91370009518edf123f90' })))));
    }
    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": "If true, marks this step as completed."
                },
                "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": "If true, this step is disabled and not clickable."
                },
                "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": "If true, this step is in an error state."
                },
                "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": "Whether this is the last step in the stepper."
                },
                "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": "Numeric identifier / position of this step."
                },
                "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": "Shared configuration for the whole stepper (active step, layout, etc.)."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    activeStep: 1,\n    showStepNumber: false,\n    variant: \"default\",\n    indicatorPosition: \"left\",\n}"
            }
        };
    }
    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
            }];
    }
}
