forked from vmware-archive/clarity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
spinner.ts
123 lines (110 loc) · 2.92 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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*
* Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Component, Input, HostBinding } from '@angular/core';
import { isBooleanAttributeSet } from '../../utils/component/is-boolean-attribute-set';
@Component({
selector: 'clr-spinner',
template: `
<ng-content></ng-content>
`,
host: {
'[attr.aria-live]': 'setAriaLive',
'[attr.aria-busy]': 'true',
},
})
export class ClrSpinner {
/**
* Default class for all spinners. This class is always true
*/
@HostBinding('class.spinner')
get spinnerClass() {
return true;
}
// Style
private _inline: boolean;
@HostBinding('class.spinner-inline')
get inlineClass() {
return this._inline;
}
@Input('clrInline')
set clrInline(value: boolean | string) {
this._inline = isBooleanAttributeSet(value);
}
private _inverse: boolean;
@HostBinding('class.spinner-inverse')
get inverseClass() {
return this._inverse;
}
@Input('clrInverse')
set clrInverse(value: boolean | string) {
this._inverse = isBooleanAttributeSet(value);
}
// Size
/**
* By default all spinners are Large. (spinner-lg)
* To change the size you need to use set clrSmall or clrMedium to TRUE/
*/
/**
* Small
*/
private _small: boolean;
@HostBinding('class.spinner-sm')
get smallClass() {
return this._small;
}
@Input('clrSmall')
set clrSmall(value: boolean | string) {
this._small = isBooleanAttributeSet(value);
}
/**
* When clrSmall & clrMedium are set both to true.
* The CSS with high priority will be small - so medium size will be ignored.
*
* For this reason if clrSmall is set we won't add clrMedium class.
*
* NOTE: This is dictated by the CSS rules.
* DON'T USE clrSmall & clrMedium to toggle classes. This could change without notice.
*
* Also there is no logical need to have both of them set to TRUE or FALSE.
*/
private _medium: boolean;
@HostBinding('class.spinner-md')
get mediumClass() {
if (this._small) {
return false;
}
return this._medium;
}
@Input('clrMedium')
set clrMedium(value: boolean | string) {
this._medium = isBooleanAttributeSet(value);
}
// Aria Live
/**
* By default aria-live will be set to `polite` .
* To change is it you need to set clrAssertive or clrOff to TRUE
*
* There is priority:
* Default: polite
* Asertive
* Off
*
* In case when for some reason you have clrAssertive=TRUE and clrOff=TRUE,
* we gonna set `assertive` as value of aria-live.
*
*/
@Input('clrAssertive') assertive: boolean;
@Input('clrOff') off: boolean;
get setAriaLive() {
if (isBooleanAttributeSet(this.assertive)) {
return 'assertive';
}
if (isBooleanAttributeSet(this.off)) {
return 'off';
}
return 'polite';
}
}