import { h } from "@stencil/core";
export class Step {
    constructor() {
        this.complete = false;
        this.disabled = false;
        this.error = false;
        this.lastStep = false;
        this.stepId = 1;
        this.stepperState = { activeStep: 1,
            showStepNumber: false,
            variant: 'default',
            indicatorPosition: 'left' };
        this.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: '3bd98f50e3f25081b3d5530ef6cc9a7df2a2fd7e', "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: 'f9d8b5c8bd1ac377b5b82e057ca3883bdcef6a45', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '9499d0413adc7869f10976126685a073a21ba851', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
            h("div", { key: 'ab4951885733e61f49a2f20938c2088dacf3d02e', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '073a228e8fe6b5e712e058055e6b04884e4c7106', icon: 'check16' }), this.active && h("span", { key: '8996be51a1f6a27001510605624d993233587a0c', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'f492077f4532ad18e2a06ae0ac2bcf8d99b28963', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '6112c776d6033ef04bccb147fb812c7ca0481323', 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: '07923f0a482ac08be32e77e81221c09b5507a801', 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: '183994eb56f8dabbbffa8ec7bb42979d2c67586f' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'b1d03bbba0da3697eb7fbf1105e797ff53081799' }))));
    }
    ;
    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",
                "attribute": "complete",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "attribute": "error",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "lastStep": {
                "type": "boolean",
                "attribute": "last-step",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "stepId": {
                "type": "number",
                "attribute": "step-id",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "stepperState": {
                "type": "unknown",
                "attribute": "stepper-state",
                "mutable": false,
                "complexType": {
                    "original": "StepperState",
                    "resolved": "StepperState",
                    "references": {
                        "StepperState": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/stepper/interfaces.tsx::StepperState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{ activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' }"
            }
        };
    }
    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
