import { Host, h } from "@stencil/core";
export class PdsProgress {
    constructor() {
        /**
        * Determines whether or not progress is animated.
        * @defaultValue false
        */
        this.animated = false;
        /**
        * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
        * @defaultValue 0
        */
        this.percent = 0;
        /**
        * Determines whether or not the percent value should be displayed as text.
        * @defaultValue false
        */
        this.showPercent = false;
    }
    render() {
        return (h(Host, { key: '23b8b17a11e6537d1f73cd435c66e779267c6909', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '6bf201015c284f26b2bb794237aef8d4e4d532ee', class: "pds-progress" }, h("label", { key: '7e144a90c1fde70e58095bda2e23b250529a8114', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ebf00485c3c7523e184fcc022e2bcc325a13458f', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6f37bd88ccb9228b0d0ca4d934a2d3cff0026533', 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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "animated",
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "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)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fill-color"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "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`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "percent",
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-percent",
                "defaultValue": "false"
            }
        };
    }
}
//# sourceMappingURL=pds-progress.js.map
