@limetech/lime-elements
Version:
181 lines (180 loc) • 5.85 kB
JavaScript
import { h } from '@stencil/core';
import { abbreviate } from '../badge/format';
const PERCENT = 100;
/**
* The circular progress component can be used to visualize the curent state of
* a progress in a scale; for example percentage of completion of a task.
*
* Its compact UI makes the component suitable when there is not enough screen
* space available to visualise such information.
*
* This component allows you to define your scale, from `0` to a desired
* `maxValue`; and also lets you chose a proper `suffix` for your scale.
*
* :::note
* The component will round up the value when it is displayed, and only shows
* one decimal digit.
* It also abbreviates large numbers. For example 1234 will be displayed as 1.2k.
* Of course such numbers, if bigger than `maxValue` will be visualized as a
* full progress.
* :::
*
* @exampleComponent limel-example-circular-progress
* @exampleComponent limel-example-circular-progress-sizes
* @exampleComponent limel-example-circular-progress-props
* @exampleComponent limel-example-circular-progress-css-variables
* @exampleComponent limel-example-circular-progress-percentage-colors
*/
export class CircularProgress {
constructor() {
this.renderPrefix = () => {
if (this.prefix) {
return h("span", { class: "prefix" }, this.prefix);
}
};
this.value = 0;
this.maxValue = PERCENT;
this.prefix = null;
this.suffix = '%';
this.displayPercentageColors = false;
this.size = undefined;
}
render() {
const classList = {
'lime-circular-progress': true,
'displays-percentage-colors': this.displayPercentageColors,
};
const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
const value = Math.round(this.value * 10) / 10;
return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { class: "value" }, abbreviate(value), h("span", { class: "suffix" }, this.suffix))));
}
static get is() { return "limel-circular-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["circular-progress.scss"]
};
}
static get styleUrls() {
return {
"$": ["circular-progress.css"]
};
}
static get properties() {
return {
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the progress bar."
},
"attribute": "value",
"reflect": false,
"defaultValue": "0"
},
"maxValue": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
},
"attribute": "max-value",
"reflect": false,
"defaultValue": "PERCENT"
},
"prefix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The prefix which is displayed before the `value`, must be a few characters characters long."
},
"attribute": "prefix",
"reflect": true,
"defaultValue": "null"
},
"suffix": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
},
"attribute": "suffix",
"reflect": false,
"defaultValue": "'%'"
},
"displayPercentageColors": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
},
"attribute": "display-percentage-colors",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "CircularProgressSize",
"resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
"references": {
"CircularProgressSize": {
"location": "import",
"path": "../circular-progress/circular-progress.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
},
"attribute": "size",
"reflect": true
}
};
}
}
//# sourceMappingURL=circular-progress.js.map