-
Notifications
You must be signed in to change notification settings - Fork 2
/
linear-progress.ts
94 lines (85 loc) · 2.47 KB
/
linear-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
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { IgcProgressBaseComponent } from './base.js';
import { styles } from './themes/linear/linear.progress.base.css.js';
import { styles as shared } from './themes/linear/shared/linear.progress.common.css.js';
import { all } from './themes/linear/themes.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { partNameMap } from '../common/util.js';
/**
* A linear progress indicator used to express unspecified wait time or display
* the length of a process.
*
* @element igc-linear-progress
*
* @slot - The text area container.
*
* @csspart track
* @csspart fill
* @csspart striped
* @csspart label
* @csspart value
* @csspart indeterminate
* @csspart primary
* @csspart danger
* @csspart warning
* @csspart info
* @csspart success
*/
@themes(all)
export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
public static readonly tagName = 'igc-linear-progress';
public static override styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(this);
}
/**
* Sets the striped look of the control.
* @attr
*/
@property({ type: Boolean, reflect: true })
public striped = false;
/**
* The position for the default label of the control.
* @attr label-align
*/
@property({ attribute: 'label-align', reflect: true })
public labelAlign:
| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end' = 'top-start';
protected override render() {
const parts = {
fill: true,
striped: this.striped,
indeterminate: this.indeterminate,
primary: this.variant === 'primary',
success: this.variant === 'success',
danger: this.variant === 'danger',
warning: this.variant === 'warning',
info: this.variant === 'info',
};
const animation = {
width: `${this.progress * 100}%`,
'--duration': `${this.animationDuration}ms`,
};
return html`
<div part="track">
<div part=${partNameMap(parts)} style=${styleMap(animation)}></div>
<div part="${partNameMap(parts)} secondary"></div>
</div>
${this.renderDefaultSlot()}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-linear-progress': IgcLinearProgressComponent;
}
}