@claromentis/design-system
Version:
Claromentis Design System Component Library
354 lines (353 loc) • 10.5 kB
JavaScript
import { h } from '@stencil/core';
import { textWidth, lightOrDark } from '../../utils/utils';
export class ProgressBar {
constructor() {
this.calcPercentageComplete = function () {
const { minimum, current, maximum } = this;
let total = maximum - minimum;
let actualCurrent = current - minimum;
this.percentageComplete = total > 0 ? (actualCurrent / total) * 100 : 0;
this.percentageRemaining = 100 - this.percentageComplete;
};
this.buildProgressText = function () {
if (this.showvalueas === "percentage") {
this.progressText = `${parseFloat((this.percentageComplete).toFixed(2))}%`;
}
else {
this.progressText = `${this.current} ${this.unit}`;
}
};
this.buildRemainingText = function () {
const { minimum, current, maximum } = this;
let unitValueRemaining = maximum - current - minimum;
if (this.showvalueas === "percentage") {
this.remainingText = `${parseFloat((this.percentageRemaining).toFixed(2))}%`;
}
else {
this.remainingText = `${unitValueRemaining} ${this.unit}`;
}
};
this.minimum = 0;
this.current = 0;
this.maximum = 100;
this.barcolour = "hsl(211.2, 58.9%, 42.9%)";
this.percentageComplete = undefined;
this.percentageRemaining = undefined;
this.showprogresstext = false;
this.showremainingtext = false;
this.hideremainingprogress = false;
this.unit = '';
this.showvalueas = 'percentage';
this.showunit = false;
this.width = undefined;
this.height = undefined;
}
componentDidLoad() {
const progressWidth = this.el.shadowRoot.querySelector('#progress').clientWidth;
if (textWidth(this.progressText) > progressWidth) {
this.el.shadowRoot.querySelector('#progress').classList.add("transparent-text");
}
const remainingWidth = this.el.shadowRoot.querySelector('#remaining').clientWidth;
if (textWidth(this.remainingText) > remainingWidth || this.current === 0) {
this.el.shadowRoot.querySelector('#remaining').classList.add("transparent-text");
}
}
componentWillLoad() {
this.calcPercentageComplete();
this.showprogresstext ? this.buildProgressText() : null;
this.showremainingtext ? this.buildRemainingText() : null;
}
componentWillUpdate() {
this.calcPercentageComplete();
this.showprogresstext ? this.buildProgressText() : null;
this.showremainingtext ? this.buildRemainingText() : null;
}
/**
* Get the map of CSS classes for the button.
*
* @return CssClassMap
*/
getClassMap() {
return {
'progress': true,
'hide-remaining': this.hideremainingprogress
};
}
render() {
return (h("div", { class: "progress-wrapper text-muted" }, h("div", { class: this.getClassMap(), style: { width: `${this.width}px`, height: `${this.height}` } }, h("div", { id: "progress", class: `progress-bar ` + lightOrDark(this.barcolour), role: "progressbar", style: {
width: `${this.percentageComplete}%`,
backgroundColor: `${this.barcolour}`,
minWidth: this.percentageComplete > 0 ? `2px` : ``
}, "aria-label": this.progressText, "aria-valuenow": this.current, "aria-valuemin": this.minimum, "aria-valuemax": this.maximum }, this.progressText), h("div", { id: "remaining", class: "progress-bar progress-bar--remaining", style: { width: `${this.percentageRemaining}%` } }, this.remainingText))));
}
static get is() { return "cla-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["cla-progress.scss"]
};
}
static get styleUrls() {
return {
"$": ["cla-progress.css"]
};
}
static get properties() {
return {
"minimum": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The minimum value."
},
"attribute": "minimum",
"reflect": false,
"defaultValue": "0"
},
"current": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The current value. if no minium and maximum are specified\nthe value is out of 100"
},
"attribute": "current",
"reflect": false,
"defaultValue": "0"
},
"maximum": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The maximum value"
},
"attribute": "maximum",
"reflect": false,
"defaultValue": "100"
},
"barcolour": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed"
},
"attribute": "barcolour",
"reflect": false,
"defaultValue": "\"hsl(211.2, 58.9%, 42.9%)\""
},
"percentageComplete": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "percentage of Progress completed"
},
"attribute": "percentage-complete",
"reflect": false
},
"percentageRemaining": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "percentage of Progress remaining"
},
"attribute": "percentage-remaining",
"reflect": false
},
"showprogresstext": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If 'true' the progress text is shown"
},
"attribute": "showprogresstext",
"reflect": false,
"defaultValue": "false"
},
"showremainingtext": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If 'true' the remaining progress text is shown"
},
"attribute": "showremainingtext",
"reflect": false,
"defaultValue": "false"
},
"hideremainingprogress": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If 'true' the remaining progress bar is shown"
},
"attribute": "hideremainingprogress",
"reflect": false,
"defaultValue": "false"
},
"unit": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The progress unit"
},
"attribute": "unit",
"reflect": false,
"defaultValue": "''"
},
"showvalueas": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ValueType",
"resolved": "\"percentage\" | \"unit\"",
"references": {
"ValueType": {
"location": "import",
"path": "../../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show value as percentage or unit"
},
"attribute": "showvalueas",
"reflect": false,
"defaultValue": "'percentage'"
},
"showunit": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If 'true' the progress unit is shown"
},
"attribute": "showunit",
"reflect": false,
"defaultValue": "false"
},
"width": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The progress bar width (in px)"
},
"attribute": "width",
"reflect": false
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The progress bar height"
},
"attribute": "height",
"reflect": false
}
};
}
static get elementRef() { return "el"; }
}