2021-03-24 14:21:21 +00:00
|
|
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
|
|
import { customElement, property, query } from 'lit/decorators';
|
2021-03-18 13:04:23 +00:00
|
|
|
import { watch } from '../../internal/decorators';
|
2021-02-26 14:09:13 +00:00
|
|
|
import styles from 'sass:./progress-ring.scss';
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
/**
|
2020-07-17 10:09:10 +00:00
|
|
|
* @since 2.0
|
2020-07-15 21:30:37 +00:00
|
|
|
* @status stable
|
|
|
|
*
|
|
|
|
* @slot - A label to show inside the ring.
|
|
|
|
*
|
|
|
|
* @part base - The component's base wrapper.
|
|
|
|
* @part label - The progress ring label.
|
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-progress-ring')
|
2021-03-09 00:14:32 +00:00
|
|
|
export default class SlProgressRing extends LitElement {
|
2021-03-06 17:01:39 +00:00
|
|
|
static styles = unsafeCSS(styles);
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
@query('.progress-ring__indicator') indicator: SVGCircleElement;
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
/** The size of the progress ring in pixels. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property({ type: Number }) size = 128;
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
/** The stroke width of the progress ring in pixels. */
|
2021-03-06 20:18:54 +00:00
|
|
|
@property({ attribute: 'stroke-width', type: Number }) strokeWidth = 4;
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
/** The current progress percentage, 0 - 100. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property({ type: Number, reflect: true }) percentage: number;
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2021-03-06 19:39:48 +00:00
|
|
|
firstUpdated() {
|
|
|
|
this.updateProgress();
|
|
|
|
}
|
2021-03-06 17:01:39 +00:00
|
|
|
|
2021-03-06 19:39:48 +00:00
|
|
|
@watch('percentage')
|
|
|
|
handlePercentageChange() {
|
2021-03-11 13:58:30 +00:00
|
|
|
this.updateProgress();
|
2020-07-15 21:30:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
updateProgress() {
|
|
|
|
const radius = this.indicator.r.baseVal.value;
|
|
|
|
const circumference = radius * 2 * Math.PI;
|
|
|
|
const offset = circumference - (this.percentage / 100) * circumference;
|
|
|
|
|
|
|
|
this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
|
|
this.indicator.style.strokeDashoffset = `${offset}`;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-02-26 14:09:13 +00:00
|
|
|
return html`
|
2020-07-15 21:30:37 +00:00
|
|
|
<div part="base" class="progress-ring">
|
2021-02-26 14:09:13 +00:00
|
|
|
<svg class="progress-ring__image" width=${this.size} height=${this.size}>
|
2020-07-15 21:30:37 +00:00
|
|
|
<circle
|
|
|
|
class="progress-ring__track"
|
2021-02-26 14:09:13 +00:00
|
|
|
stroke-width="${this.strokeWidth}"
|
2020-07-15 21:30:37 +00:00
|
|
|
stroke-linecap="round"
|
|
|
|
fill="transparent"
|
2021-02-26 14:09:13 +00:00
|
|
|
r=${this.size / 2 - this.strokeWidth * 2}
|
|
|
|
cx=${this.size / 2}
|
|
|
|
cy=${this.size / 2}
|
2021-03-06 17:01:39 +00:00
|
|
|
></circle>
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
<circle
|
|
|
|
class="progress-ring__indicator"
|
2021-02-26 14:09:13 +00:00
|
|
|
stroke-width="${this.strokeWidth}"
|
2020-07-15 21:30:37 +00:00
|
|
|
stroke-linecap="round"
|
|
|
|
fill="transparent"
|
2021-02-26 14:09:13 +00:00
|
|
|
r=${this.size / 2 - this.strokeWidth * 2}
|
|
|
|
cx=${this.size / 2}
|
|
|
|
cy=${this.size / 2}
|
2021-03-06 17:01:39 +00:00
|
|
|
></circle>
|
2020-07-15 21:30:37 +00:00
|
|
|
</svg>
|
|
|
|
|
|
|
|
<span part="label" class="progress-ring__label">
|
2021-03-06 17:01:39 +00:00
|
|
|
<slot></slot>
|
2020-07-15 21:30:37 +00:00
|
|
|
</span>
|
|
|
|
</div>
|
2021-02-26 14:09:13 +00:00
|
|
|
`;
|
2020-07-15 21:30:37 +00:00
|
|
|
}
|
|
|
|
}
|
2021-03-12 14:07:38 +00:00
|
|
|
|
2021-03-12 14:09:08 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-progress-ring': SlProgressRing;
|
|
|
|
}
|
|
|
|
}
|