-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
spinner.ts
76 lines (70 loc) · 1.89 KB
/
spinner.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
import { attr, FASTElement } from '@microsoft/fast-element';
import { toggleState } from '../utils/element-internals.js';
import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
/**
* The base class used for constructing a fluent-spinner custom element
* @public
*/
export class BaseSpinner extends FASTElement {
/**
* The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
*
* @internal
*/
public elementInternals: ElementInternals = this.attachInternals();
constructor() {
super();
this.elementInternals.role = 'progressbar';
}
}
/**
* A Spinner Custom HTML Element.
* Based on BaseSpinner and includes style and layout specific attributes
*
* @public
*/
export class Spinner extends BaseSpinner {
/**
* The size of the spinner
*
* @public
* @remarks
* HTML Attribute: size
*/
@attr
public size?: SpinnerSize;
/**
* Handles changes to size attribute custom states
* @param prev - the previous state
* @param next - the next state
*/
public sizeChanged(prev: SpinnerSize | undefined, next: SpinnerSize | undefined) {
if (prev) {
toggleState(this.elementInternals, `${prev}`, false);
}
if (next) {
toggleState(this.elementInternals, `${next}`, true);
}
}
/**
* The appearance of the spinner
* @public
* @remarks
* HTML Attribute: appearance
*/
@attr
public appearance?: SpinnerAppearance;
/**
* Handles changes to appearance attribute custom states
* @param prev - the previous state
* @param next - the next state
*/
public appearanceChanged(prev: SpinnerAppearance | undefined, next: SpinnerAppearance | undefined) {
if (prev) {
toggleState(this.elementInternals, `${prev}`, false);
}
if (next) {
toggleState(this.elementInternals, `${next}`, true);
}
}
}