import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XProgress {
    constructor() {
        this.value = 0;
        this.factor = 100;
        this.color = 'default';
        this.loading = false;
    }
    /**
     * Render component
     */
    render() {
        const percent = (this.value / this.factor) * 100;
        return h(Host, { key: 'ff31019be56fcaeebddf929eb31284d187c6b3d1', class: cls(`progress-bar-${this.color}`, { 'progress-bar-loading': this.loading }) }, this.loading ?
            h("span", null) :
            h("x-tooltip", { content: `${percent}%` }, h("span", { style: { width: `${percent}%` } })));
    }
    static get is() { return "x-progress"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element value/percent"
                },
                "attribute": "value",
                "reflect": false,
                "defaultValue": "0"
            },
            "factor": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element number factor to divide"
                },
                "attribute": "factor",
                "reflect": false,
                "defaultValue": "100"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ColorType",
                    "resolved": "\"accent\" | \"blue\" | \"cyan\" | \"danger\" | \"default\" | \"green\" | \"indigo\" | \"info\" | \"orange\" | \"pink\" | \"primary\" | \"purple\" | \"red\" | \"success\" | \"teal\" | \"warning\" | \"yellow\"",
                    "references": {
                        "ColorType": {
                            "location": "import",
                            "path": "../../constants/colors",
                            "id": "src/constants/colors.ts::ColorType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element color"
                },
                "attribute": "color",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element loading style enable"
                },
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
}
