@postnord/web-components
Version:
PostNord Web Components
120 lines (116 loc) • 6.03 kB
JavaScript
/*!
* 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}@media (prefers-reduced-motion: reduce){pn-progress-bar .pn-progress-bar-value{transition-duration:0s}}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 PnProgressBar = /*@__PURE__*/ proxyCustomElement(class PnProgressBar extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
}
uniqueId = uuidv4();
idProgress = `pn-progress-bar-${this.uniqueId}`;
idLabel = `${this.idProgress}-label`;
idText = `${this.idProgress}-text`;
get hostElement() { return this; }
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 watchers() { return {
"progress": ["setProgress"]
}; }
static get style() { return pnProgressBarCss; }
}, [256, "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
//# sourceMappingURL=pn-progress-bar2.js.map