@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: 'e5e7d6c7ac2b3e2cc8838a616d697281c299ef21' }, this.hasLabel() && (h("p", { key: '23155051cf0606bee3bf96c4be40cf1549b6ab44', id: this.idLabel, class: "pn-progress-bar-label" }, h("span", { key: '98723d9fcc0e8a43ceaf4969a70046418d9d08bf' }, this.label), this.hasIcon() && h("pn-icon", { key: '402eea95c3733057d94df1b7abe92d02e7ef1dc8', icon: this.getIconSvg(), color: this.getIconColor() }))), h("div", { key: '5d82dfaf2b4ca4ac5ec6aefc83b6422dc8c632fe', 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: '7340eb78ac7cbcd5798e804dc173a1d7c0696f49', class: "pn-progress-bar-meter" }, h("div", { key: 'a9d2ab1009731727f98d349b9bf04bf39433c478', class: "pn-progress-bar-value", "data-error": this.hasError(), "data-valid": this.isValid() }))), h("p", { key: '6f10b1183b320c1e1e4b03bf893a62135779a870', id: this.idText, class: "pn-progress-bar-subtext", role: this.hasError() ? 'alert' : null }, h("span", { key: 'd6b8b56cf9853fa1f88aea6c6a43bf9999fa09cd' }, 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