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: '9a603ade945d1020bcba53fa85777a27f08f7df1', "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: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
            h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '1b27252ddf3369c3732e7b40786645ec2720d8bb', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '38bf07c39837ed4f77de59c44a2a32fbdb069439', 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: 'f13581114efa81deaeecd38ffe27b14d1d3dcc87', 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: '6accb517e6d561549759a3a723c4c24b1729e80a' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'c6960ab0dd25316c6407433ecad376b66b47d28c' }))));
    }
    ;
    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
