import { h } from "@stencil/core";
export class Steps {
    el;
    active = 0;
    processStatus = 'process';
    alignCenter = false;
    direction = 'horizontal';
    steps = [];
    componentDidLoad() {
        const items = this.el.querySelectorAll('hb-step');
        this.steps = Array.from(items).map((item) => ({
            title: item.getAttribute('title') || '',
            description: item.getAttribute('description') || undefined,
        }));
    }
    getStatus(index) {
        if (index < this.active)
            return 'finish';
        if (index === this.active)
            return this.processStatus;
        return 'wait';
    }
    getIcon(index) {
        const status = this.getStatus(index);
        if (status === 'finish')
            return '✓';
        if (status === 'error')
            return '✕';
        return String(index + 1);
    }
    render() {
        return (h("div", { key: '3bb957ec22b3943e8dccdd609838adcac9aa0766', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter } }, this.steps.map((step, i) => (h("div", { class: { 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true } }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon" }, this.getIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description)))))));
    }
    static get is() { return "hb-steps"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["steps.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["steps.css"]
        };
    }
    static get properties() {
        return {
            "active": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "active",
                "reflect": false,
                "defaultValue": "0"
            },
            "processStatus": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'wait' | 'process' | 'finish' | 'error'",
                    "resolved": "\"error\" | \"finish\" | \"process\" | \"wait\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "process-status",
                "reflect": false,
                "defaultValue": "'process'"
            },
            "alignCenter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "align-center",
                "reflect": false,
                "defaultValue": "false"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'horizontal' | 'vertical'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "direction",
                "reflect": false,
                "defaultValue": "'horizontal'"
            }
        };
    }
    static get states() {
        return {
            "steps": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=Steps.js.map
