import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-primary);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}";

const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        /**
        * 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 style() { return pdsProgressCss; }
}, [257, "pds-progress", {
        "animated": [4],
        "componentId": [1, "component-id"],
        "fillColor": [1, "fill-color"],
        "label": [1],
        "percent": [2],
        "showPercent": [4, "show-percent"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-progress"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-progress":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsProgress$1);
            }
            break;
    } });
}

const PdsProgress = PdsProgress$1;
const defineCustomElement = defineCustomElement$1;

export { PdsProgress, defineCustomElement };
//# sourceMappingURL=pds-progress.js.map

//# sourceMappingURL=pds-progress.js.map