soft-components
Version:
Simple soft flexible set of web components
179 lines (178 loc) • 5.33 kB
JavaScript
import { Component, Host, h, Prop, Element } from '@stencil/core';
export class ScProgress {
constructor() {
/**
* Percentage of progress bar
*/
this.percentage = null;
/**
* Use indeterminate mode for the progress bar when you do not know how long an operation will take.
*/
this.indeterminate = false;
/**
* Set shape of the progress indicator to be circular
*/
this.circular = false;
/**
* radius for circular progress in pixels
*/
this.radius = 50;
/**
* Label to be displayed inside the progress
*/
this.label = '';
this.angleGap = 0;
this.circleEl = null;
this.spinnerAnimationId = null;
}
renderCircular(radius) {
// commented codes are attempts to do gapped circular progress bar.
// const gapPercent = 0
// const offsetFactor = (100 - gapPercent) / 100
// const max = offsetFactor * (size * Math.PI) // c
/**
* -270: rotate starting point to bottom center
*/
// const rotate = -270 + (360 * gapPercent) / 100 / 2
var circumference = radius * 2 * Math.PI;
const offset = (1 - this.percentage / 100) * circumference;
const strokeWidth = radius / 10;
const size = 2 * (radius + strokeWidth);
return (h("div", { class: "circular-container", style: {
'--sc-progress-circular-size': `${size}px`,
'--sc-progress-circular-size-number': `${size}`,
'--sc-progress-stroke-width': `${strokeWidth}px`,
} },
h("svg", { class: "progress-ring" },
h("circle", { ref: el => (this.circleEl = el), class: "progress-ring__circle", "stroke-width": strokeWidth, "stroke-linecap": "butt", r: radius, cx: size / 2, cy: size / 2, style: {
'--sc-progress-circular-stroke-dasharray': `${circumference} ${circumference}`,
'--sc-progress-circular-stroke-dashoffset': `${offset}`,
} })),
h("div", { class: "label" },
h("slot", { name: "label" }),
this.label)));
}
render() {
const { percentage, indeterminate, circular, radius } = this;
return (h(Host, { class: { indeterminate, circular }, "aria-valuenow": percentage, "aria-valuemin": "0", "aria-valuemax": "100" }, circular ? (this.renderCircular(radius)) : (h("div", { class: "inner", style: { width: `${percentage}%` } }, this.label.length ? h("span", { class: "label" }, this.label) : null))));
}
static get is() { return "sc-progress"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["sc-progress.scss"]
}; }
static get styleUrls() { return {
"$": ["sc-progress.css"]
}; }
static get properties() { return {
"percentage": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Percentage of progress bar"
},
"attribute": "percentage",
"reflect": false,
"defaultValue": "null"
},
"indeterminate": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use indeterminate mode for the progress bar when you do not know how long an operation will take."
},
"attribute": "indeterminate",
"reflect": false,
"defaultValue": "false"
},
"circular": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set shape of the progress indicator to be circular"
},
"attribute": "circular",
"reflect": false,
"defaultValue": "false"
},
"radius": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "radius for circular progress in pixels"
},
"attribute": "radius",
"reflect": false,
"defaultValue": "50"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Label to be displayed inside the progress"
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"angleGap": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "angle-gap",
"reflect": false,
"defaultValue": "0"
}
}; }
static get elementRef() { return "hostEl"; }
}