@postnord/web-components/components/pn-progress-bar2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
import { c as check_circle } from './check_circle.js';
import { u as uuidv4 } from './helpers.js';
import { d as defineCustomElement$1 } from './pn-icon2.js';

const pnProgressBarCss = "pn-progress-bar .pn-progress-bar-label{margin-bottom:0.5em;color:#2d2013;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:0.5em}pn-progress-bar .pn-progress-bar-subtext{margin-top:0.5em;color:#5e554a;font-weight:400}pn-progress-bar .pn-progress-bar-container{overflow:hidden;padding:0.0625em;height:0.75em;border-radius:0.5em}pn-progress-bar .pn-progress-bar-meter{position:relative;width:100%;background:#f3f2f2;height:0.625em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-bar .pn-progress-bar-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.75em;background-color:#005d92;width:var(--progress-value);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius, background-color;transition-duration:0.2s, 0.2s, 0.5s;transition-timing-function:linear}pn-progress-bar .pn-progress-bar-value[data-valid]{width:calc(var(--progress-value) + 0.125em);background-color:#0aa85c;border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-bar .pn-progress-bar-value[data-error]{background-color:#a70707}";
const PnProgressBarStyle0 = pnProgressBarCss;

const PnProgressBar = /*@__PURE__*/ proxyCustomElement(class PnProgressBar extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.progressPercentage = undefined;
        this.label = undefined;
        this.progress = 0;
        this.progressText = undefined;
        this.successText = undefined;
        this.error = undefined;
        this.progressId = this.idProgress;
    }
    uniqueId = uuidv4();
    idProgress = `pn-progress-bar-${this.uniqueId}`;
    idLabel = `${this.idProgress}-label`;
    idText = `${this.idProgress}-text`;
    get hostElement() { return this; }
    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: 'd8a726c9680df3c3315abe95feaf7562e84f802f' }, this.hasLabel() && (h("p", { key: '6c85a026e3c48e0cfdebee338c7cf4fc4cf33c5a', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: 'ec4c533ad9db08831e6e90eed91daf6da2eb9adf' }, this.label), this.hasIcon() && h("pn-icon", { key: '1298e782d736a96cc268f566352b42f5054a6015', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '376225d73a33e05864b185d839d975b464e1f601', 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: '754036d0a841bd6ff8dd37012e7d7789ec2c2ea0', class: "pn-progress-bar-meter" }, h("div", { key: 'fe668388868144576dae29a867ffaf27bbb61f5c', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: '9186f1e8977436f0911979d7dd6555216bc37825', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '68e201a073494eef08e1a25b2c9a1e61edb6c492' }, this.getSubtext()))));
    }
    static get watchers() { return {
        "progress": ["setProgress"]
    }; }
    static get style() { return PnProgressBarStyle0; }
}, [0, "pn-progress-bar", {
        "label": [1],
        "progress": [2],
        "progressText": [1, "progress-text"],
        "successText": [1, "success-text"],
        "error": [1],
        "progressId": [1, "progress-id"],
        "progressPercentage": [32]
    }, undefined, {
        "progress": ["setProgress"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-progress-bar", "pn-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-progress-bar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnProgressBar);
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnProgressBar as P, defineCustomElement as d };

//# sourceMappingURL=pn-progress-bar2.js.map