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: 'a11c3d67af0621981d2f13ad673e11999926b3c1', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'bb480c5ce1fc9c56fce1022a26783d5729eb30dc', class: "pds-progress" }, h("label", { key: '02fec27f268262889b514aef4d8344bbb9a9484c', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '122d2639d7630f28fd98adf9bc003eeed6c9ebef', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'ba7262e0627a2848b3da03a9a32882510bf2628c', 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(--pine-color-blue-300)'"
                        }],
                    "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
