/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { alert_exclamation_circle, check_circle } from "pn-design-assets/pn-assets/icons.js";
import { uuidv4 } from "../../../globals/helpers";
export class PnProgressBar {
    uniqueId = uuidv4();
    idProgress = `pn-progress-bar-${this.uniqueId}`;
    idLabel = `${this.idProgress}-label`;
    idText = `${this.idProgress}-text`;
    hostElement;
    progressPercentage;
    /** Set a label for the progress bar */
    label;
    /** Progress value, 0-100 */
    progress = 0;
    /** Replaces the default progress percentage text */
    progressText;
    /** Text shown on success (100%)  */
    successText;
    /** Trigger an error and display a message */
    error;
    /** A unique HTML id fror the progress bar */
    progressId = this.idProgress;
    setProgress() {
        if (!Number.isInteger(this.progress))
            return;
        const progressWidth = this.progress < 100 ? Math.ceil(this.progress) : 100;
        this.progressPercentage = `${progressWidth.toString()}%`;
        this.hostElement.style.setProperty('--progress-value', this.progressPercentage);
    }
    componentWillLoad() {
        this.setProgress();
    }
    hasLabel() {
        return !!this.label?.length;
    }
    hasText() {
        return !!this.successText?.length;
    }
    hasError() {
        return !!this.error?.length;
    }
    isValid() {
        return this.progress === 100;
    }
    hasIcon() {
        return this.isValid() || this.hasError();
    }
    getSubtext() {
        if (this.hasError())
            return this.error;
        if (this.isValid() && this.hasText())
            return this.successText;
        return this.progressText ? this.progressText : this.progressPercentage;
    }
    getIconSvg() {
        if (this.hasError())
            return alert_exclamation_circle;
        return check_circle;
    }
    getIconColor() {
        if (this.hasError())
            return 'warning';
        return 'green500';
    }
    render() {
        return (h(Host, { key: '141fef1da768dc423cf53dfa8088f1b98429236c' }, this.hasLabel() && (h("p", { key: '294199499037e6ed0e816f8a68850dfede795884', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: 'f292e951e29878d186b7f7896d7346fd41677006' }, this.label), this.hasIcon() && h("pn-icon", { key: '47b8065b97a8cd0f0d3e57ea4f68b07ad09c12a5', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '0dd5189948aad2e501ee10076ed212987a52e4d8', id: this.progressId, class: "pn-progress-bar-container", role: "progressbar", "aria-labelledby": this.idLabel, "aria-describedby": this.hasIcon() ? this.idText : null, "aria-valuenow": this.progress, "aria-valuetext": this.progressPercentage }, h("div", { key: '51ceae38d589385687dd3e25c86526b4758f2792', class: "pn-progress-bar-meter" }, h("div", { key: '714d0aa19a487bf625ae10bcdd68d21d54b6f48a', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'b540a56c9d7fdfae49f508472d315ce1eeda5e99', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '35d515a823d117a6ab31e3cda778a2ada8093233' }, this.getSubtext()))));
    }
    static get is() { return "pn-progress-bar"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-progress-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-progress-bar.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a label for the progress bar"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "progress": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Progress value, 0-100"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "progress",
                "defaultValue": "0"
            },
            "progressText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Replaces the default progress percentage text"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "progress-text"
            },
            "successText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Text shown on success (100%)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "success-text"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Trigger an error and display a message"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error"
            },
            "progressId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique HTML id fror the progress bar"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "progress-id",
                "defaultValue": "this.idProgress"
            }
        };
    }
    static get states() {
        return {
            "progressPercentage": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "progress",
                "methodName": "setProgress"
            }];
    }
}
