@limetech/lime-elements
Version:
163 lines (162 loc) • 5.99 kB
JavaScript
import { h, Host } from "@stencil/core";
import translate from "../../global/translations";
const PERCENT = 100;
/**
* The linear progress component can be used to visualize the current state of a progress in a scale;
* for example percentage of completion of a task.
*
* @exampleComponent limel-example-linear-progress-basic
* @exampleComponent limel-example-linear-progress-indeterminate
* @exampleComponent limel-example-linear-progress-accessible-label
* @exampleComponent limel-example-linear-progress-color
*/
export class LinearProgress {
constructor() {
/**
* Defines the language for translations.
* Will translate the translatable strings on the components.
*/
this.language = 'en';
/**
* The value of the progress bar. Should be between `0` and `1`.
*/
this.value = 0;
/**
* Puts the progress bar in an indeterminate state
*/
this.indeterminate = false;
}
render() {
if (!this.isFinite(this.value)) {
return;
}
const loadingText = translate.get('loading', this.language);
const ariaLabel = translate.get('progress-bar', this.language);
const ariaValueNow = this.indeterminate ? undefined : this.value;
const ariaValueText = this.indeterminate ? loadingText : undefined;
return (h(Host, { role: "progressbar", "aria-label": this.accessibleLabel || ariaLabel, "aria-live": "polite", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": ariaValueNow, "aria-valuetext": ariaValueText, style: { '--percentage': `${this.value * PERCENT}%` } }, h("div", { class: "progress" })));
}
watchValue(newValue) {
if (!this.isFinite(newValue)) {
return;
}
this.updateProgress(newValue);
}
updateProgress(value) {
if (this.host) {
this.host.style.setProperty('--percentage', `${value * PERCENT}%`);
}
}
isFinite(value) {
return Number.isFinite(value);
}
static get is() { return "limel-linear-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["linear-progress.scss"]
};
}
static get styleUrls() {
return {
"$": ["linear-progress.css"]
};
}
static get properties() {
return {
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Languages",
"resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
"references": {
"Languages": {
"location": "import",
"path": "../date-picker/date.types",
"id": "src/components/date-picker/date.types.ts::Languages",
"referenceLocation": "Languages"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the language for translations.\nWill translate the translatable strings on the components."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "language",
"defaultValue": "'en'"
},
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The value of the progress bar. Should be between `0` and `1`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value",
"defaultValue": "0"
},
"indeterminate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Puts the progress bar in an indeterminate state"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "indeterminate",
"defaultValue": "false"
},
"accessibleLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A label used to describe the purpose of the element to users\nof assistive technologies, like screen readers.\nIf not provided, the generic word of \"Progress bar\" will be used."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "accessible-label"
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "watchValue"
}];
}
}