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: '9676c2db5e2178b7cdaf54798a29025b8f4bedb6', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '40006e1d3ef7298a8d410654a6cc93ff3905a268', class: "pds-progress" }, h("label", { key: '1437eb984f29bfd29c568ec1f7b6e03c8166c3bb', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '546b32d7ad6ec5e8890ea20d180e77d68ec31e03', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '34dd884b3ab2f7df9ff44103fadbb5854cd8b83c', class: "pds-progress__percentage" }, this.percent, "%")));
    }
    static get is() { return "pds-progress"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "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
