-
Notifications
You must be signed in to change notification settings - Fork 2
/
circular-progress.ts
106 lines (92 loc) · 3.2 KB
/
circular-progress.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { html, svg } from 'lit';
import { queryAssignedElements } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { IgcProgressBaseComponent } from './base.js';
import IgcCircularGradientComponent from './circular-gradient.js';
import { styles } from './themes/circular/circular.progress.base.css.js';
import { styles as shared } from './themes/circular/shared/circular.progress.common.css.js';
import { all } from './themes/circular/themes.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { createCounter, partNameMap } from '../common/util.js';
/**
* A circular progress indicator used to express unspecified wait time or display
* the length of a process.
*
* @element igc-circular-progress
*
* @slot - The text area container.
* @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.
*
* @csspart svg
* @csspart gradient_start
* @csspart gradient_end
* @csspart track
* @csspart fill
* @csspart label
* @csspart value
* @csspart indeterminate
* @csspart primary
* @csspart danger
* @csspart warning
* @csspart info
* @csspart success
*/
@themes(all)
export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
public static readonly tagName = 'igc-circular-progress';
public static override styles = [styles, shared];
private static readonly increment = createCounter();
/* blazorSuppress */
public static register() {
registerComponent(this, IgcCircularGradientComponent);
}
private _gradientId = `circular-progress-${IgcCircularProgressComponent.increment()}`;
@queryAssignedElements({ slot: 'gradient' })
private _assignedGradients!: Array<IgcCircularGradientComponent>;
protected renderSvg() {
const parts = { indeterminate: this.indeterminate, track: true };
const styles = {
stroke: `url(#${this._gradientId})`,
'--percentage': `${this.progress}`,
'--duration': `${this.animationDuration}ms`,
};
const gradients = this._assignedGradients.length
? this._assignedGradients.map(
({ offset, color, opacity }) =>
svg`<stop offset=${offset} stop-color=${color} stop-opacity=${opacity}/>`
)
: svg`
<stop offset="0%" part="gradient_start" />
<stop offset="100%" part="gradient_end" />
`;
return svg`
<circle part=${partNameMap(parts)}/>
<circle style=${styleMap(styles)} part="fill"/>
<defs>
<linearGradient id=${this._gradientId} gradientTransform="rotate(90)">
${gradients}
</linearGradient>
</defs>
`;
}
protected renderWrapper() {
const parts = {
svg: true,
indeterminate: this.indeterminate,
};
return html`
<svg part=${partNameMap(parts)}>${this.renderSvg()}</svg>
<slot name="gradient" @slotchange=${this.slotChanged}></slot>
${this.renderDefaultSlot()}
`;
}
protected override render() {
return this.renderWrapper();
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-circular-progress': IgcCircularProgressComponent;
}
}