@postnord/web-components
Version:
PostNord Web Components
201 lines (200 loc) • 7.33 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 {
constructor() {
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`;
hostElement;
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 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"
},
"attribute": "label",
"reflect": false
},
"progress": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Progress value, 0-100"
},
"attribute": "progress",
"reflect": false,
"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"
},
"attribute": "progress-text",
"reflect": false
},
"successText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Text shown on success (100%)"
},
"attribute": "success-text",
"reflect": false
},
"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"
},
"attribute": "error",
"reflect": false
},
"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"
},
"attribute": "progress-id",
"reflect": false,
"defaultValue": "this.idProgress"
}
};
}
static get states() {
return {
"progressPercentage": {}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "progress",
"methodName": "setProgress"
}];
}
}
//# sourceMappingURL=pn-progress-bar.js.map