@postnord/web-components
Version:
PostNord Web Components
216 lines (215 loc) • 7.81 kB
JavaScript
/*!
* 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: '09b5b426ac2b3b5ac6da052516f02a37e86a5ae6' }, this.hasLabel() && (h("p", { key: 'f63e4d6fcf21e46e809866fa9f25e92975665c60', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: '731610df6161f9d7724f85e1fc849983dd2c9e30' }, this.label), this.hasIcon() && h("pn-icon", { key: 'a9a823e21c9a6192ecd476fa7f993e2dc508f292', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: 'b38c51cbc3bf30d73cc169053a97fd62acd95972', 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: '91f89839bf307d1b32f3735690ae6894b845fcc2', class: "pn-progress-bar-meter" }, h("div", { key: '01dd3151497db0d7a4bfaa401fb132e015708ca6', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: 'fe4122adfd2d4e1ea043f161bc217b59f3164cf0', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: '7094b7dd7cf15e29cec6f710927a3b62151d8709' }, 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"
}];
}
}