import { Host, h } from "@stencil/core";
export class PdsProgress {
    constructor() {
        this.animated = false;
        this.componentId = undefined;
        this.fillColor = undefined;
        this.label = undefined;
        this.percent = 0;
        this.showPercent = false;
    }
    render() {
        return (h(Host, { key: 'a20a576a6addcfe01e32b825142aaa18039ccfbb', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2d0bb87d5567a4d8d9f8a689ff86fc97f3d94d4f', class: "pds-progress" }, h("label", { key: '0d98454dccb11aa0063a70491acb24e7fd72720d', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '9f3b3c07fe1c5fcdf28a5e104e2c90a4e7d102b2', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
    }
    static get is() { return "pds-progress"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-progress.css"]
        };
    }
    static get properties() {
        return {
            "animated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not progress is animated."
                },
                "attribute": "animated",
                "reflect": false,
                "defaultValue": "false"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "fillColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "'var(--pds-color-primary)'"
                        }],
                    "text": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
                },
                "attribute": "fill-color",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for label text. Label is visually hidden but required for better accessibility."
                },
                "attribute": "label",
                "reflect": false
            },
            "percent": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "0"
                        }],
                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
                },
                "attribute": "percent",
                "reflect": false,
                "defaultValue": "0"
            },
            "showPercent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the percent value should be displayed as text."
                },
                "attribute": "show-percent",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
}
//# sourceMappingURL=pds-progress.js.map
