forked from microsoft/fluentui
/
index.ts
63 lines (58 loc) · 1.41 KB
/
index.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
import { attr, customElement } from '@microsoft/fast-element';
import { Button, ButtonTemplate as template } from '@microsoft/fast-foundation';
import { ButtonStyles as styles } from './button.styles';
/**
* Types of button appearance.
* @public
*/
export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';
/**
* The FAST Button Element. Implements {@link @microsoft/fast-foundation#Button},
* {@link @microsoft/fast-foundation#ButtonTemplate}
*
*
* @public
* @remarks
* HTML Element: \<fast-button\>
*
* {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
*/
@customElement({
name: 'fast-button',
template,
styles,
shadowOptions: {
delegatesFocus: true,
},
})
export class FASTButton extends Button {
/**
* The appearance the button should have.
*
* @public
* @remarks
* HTML Attribute: appearance
*/
@attr
public appearance: ButtonAppearance;
public appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void {
if (oldValue !== newValue) {
this.classList.add(newValue);
this.classList.remove(oldValue);
}
}
/**
* @internal
*/
public connectedCallback(): void {
super.connectedCallback();
if (!this.appearance) {
this.appearance = 'neutral';
}
}
}
/**
* Styles for Button
* @public
*/
export const ButtonStyles = styles;