@blaze/atoms
Version:
Open Source UI Toolkit - Atoms
130 lines (129 loc) • 3.19 kB
JavaScript
import { h, Component, Event, Prop, Watch } from '@stencil/core';
export class ProgressBar {
constructor() {
this.min = 0;
this.max = 100;
this.duration = 0;
}
watchValue(value, oldValue) {
this.onChanged.emit({ value, oldValue });
}
render() {
const typeClass = this.type ? `c-progress__bar--${this.type}` : '';
const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
const timerAnimationDuration = this.duration ? { animationDuration: `${this.duration}s` } : {};
return (h("div", { role: "progressbar", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, style: Object.assign({ width: `${percentage}%` }, timerAnimationDuration), class: `c-progress__bar ${typeClass}` },
h("slot", null)));
}
static get is() { return "blaze-progress-bar"; }
static get properties() { return {
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "type",
"reflect": false
},
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"min": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min",
"reflect": false,
"defaultValue": "0"
},
"max": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max",
"reflect": false,
"defaultValue": "100"
},
"duration": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "duration",
"reflect": false,
"defaultValue": "0"
}
}; }
static get events() { return [{
"method": "onChanged",
"name": "progressbar",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get watchers() { return [{
"propName": "value",
"methodName": "watchValue"
}]; }
}