2022-02-26 15:48:56 +00:00
|
|
|
import { html, LitElement } from 'lit';
|
2021-09-30 12:40:21 +00:00
|
|
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
2022-03-24 11:48:03 +00:00
|
|
|
import { LocalizeController } from '~/utilities/localize';
|
2021-07-10 00:45:44 +00:00
|
|
|
import styles from './progress-ring.styles';
|
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
|
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @slot - A label to show inside the ring.
|
2020-07-15 21:30:37 +00:00
|
|
|
*
|
2022-03-09 20:54:18 +00:00
|
|
|
* @csspart base - The component's internal wrapper.
|
2021-10-10 02:36:41 +00:00
|
|
|
* @csspart label - The progress ring label.
|
2021-05-17 22:04:28 +00:00
|
|
|
*
|
2021-09-17 22:15:13 +00:00
|
|
|
* @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
|
|
|
|
* @cssproperty --track-width - The width of the track.
|
|
|
|
* @cssproperty --track-color - The color of the track.
|
2021-06-25 20:25:46 +00:00
|
|
|
* @cssproperty --indicator-color - The indicator color.
|
2020-07-15 21:30:37 +00:00
|
|
|
*/
|
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-07-10 00:45:44 +00:00
|
|
|
static styles = styles;
|
2022-01-16 05:47:14 +00:00
|
|
|
private readonly localize = new LocalizeController(this);
|
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
|
|
|
|
2021-09-30 12:40:21 +00:00
|
|
|
@state() indicatorOffset: string;
|
|
|
|
|
2021-09-30 13:02:28 +00:00
|
|
|
/** The current progress, 0 to 100. */
|
|
|
|
@property({ type: Number, reflect: true }) value = 0;
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2021-12-06 15:57:54 +00:00
|
|
|
/** A custom label for the progress ring's aria label. */
|
2022-01-16 05:47:14 +00:00
|
|
|
@property() label = '';
|
2021-12-06 15:57:54 +00:00
|
|
|
|
|
|
|
/** The locale to render the component in. */
|
|
|
|
@property() lang: string;
|
2021-10-10 02:05:40 +00:00
|
|
|
|
2022-01-16 05:47:14 +00:00
|
|
|
updated(changedProps: Map<string, unknown>) {
|
2021-09-30 12:40:21 +00:00
|
|
|
super.updated(changedProps);
|
|
|
|
|
|
|
|
//
|
|
|
|
// This block is only required for Safari because it doesn't transition the circle when the custom properties
|
2022-01-01 01:39:16 +00:00
|
|
|
// change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
|
2021-09-30 12:40:21 +00:00
|
|
|
// but I couldn't pinpoint it so this works around the problem.
|
|
|
|
//
|
|
|
|
if (changedProps.has('percentage')) {
|
|
|
|
const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
|
|
|
|
const circumference = 2 * Math.PI * radius;
|
2021-09-30 13:02:28 +00:00
|
|
|
const offset = circumference - (this.value / 100) * circumference;
|
2021-09-30 12:40:21 +00:00
|
|
|
|
2022-01-16 05:47:14 +00:00
|
|
|
this.indicatorOffset = `${offset}px`;
|
2021-09-30 12:40:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-15 21:30:37 +00:00
|
|
|
render() {
|
2021-02-26 14:09:13 +00:00
|
|
|
return html`
|
2021-05-03 15:28:57 +00:00
|
|
|
<div
|
|
|
|
part="base"
|
|
|
|
class="progress-ring"
|
|
|
|
role="progressbar"
|
2022-01-16 05:47:14 +00:00
|
|
|
aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}
|
2021-05-03 15:28:57 +00:00
|
|
|
aria-valuemin="0"
|
|
|
|
aria-valuemax="100"
|
2021-09-30 13:02:28 +00:00
|
|
|
aria-valuenow="${this.value}"
|
|
|
|
style="--percentage: ${this.value / 100}"
|
2021-05-03 15:28:57 +00:00
|
|
|
>
|
2021-09-21 03:14:39 +00:00
|
|
|
<svg class="progress-ring__image">
|
2021-09-17 22:15:13 +00:00
|
|
|
<circle class="progress-ring__track"></circle>
|
2021-09-30 12:40:21 +00:00
|
|
|
<circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
|
2020-07-15 21:30:37 +00:00
|
|
|
</svg>
|
2021-10-10 02:36:41 +00:00
|
|
|
|
2021-10-10 02:37:32 +00:00
|
|
|
<span part="label" class="progress-ring__label">
|
|
|
|
<slot></slot>
|
|
|
|
</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;
|
|
|
|
}
|
|
|
|
}
|