@fluentui/web-components 3.0.0-beta.30 → 3.0.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -2
- package/dist/dts/anchor-button/anchor-button.d.ts +39 -4
- package/dist/dts/anchor-button/anchor-button.options.d.ts +0 -1
- package/dist/dts/badge/badge.d.ts +30 -0
- package/dist/dts/button/button.d.ts +25 -1
- package/dist/dts/button/button.options.d.ts +0 -1
- package/dist/dts/checkbox/checkbox.d.ts +13 -1
- package/dist/dts/compound-button/compound-button.options.d.ts +0 -5
- package/dist/dts/counter-badge/counter-badge.d.ts +36 -0
- package/dist/dts/divider/divider.d.ts +18 -0
- package/dist/dts/image/image.d.ts +36 -0
- package/dist/dts/label/label.d.ts +24 -0
- package/dist/dts/link/link.d.ts +12 -0
- package/dist/dts/menu-button/menu-button.options.d.ts +0 -1
- package/dist/dts/progress-bar/progress-bar.d.ts +18 -0
- package/dist/dts/spinner/spinner.d.ts +13 -1
- package/dist/dts/styles/states/index.d.ts +175 -0
- package/dist/dts/text-input/text-input.d.ts +12 -0
- package/dist/dts/toggle-button/toggle-button.options.d.ts +0 -1
- package/dist/esm/anchor-button/anchor-button.js +76 -8
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.styles.js +8 -1
- package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.template.js +2 -2
- package/dist/esm/anchor-button/anchor-button.template.js.map +1 -1
- package/dist/esm/badge/badge.js +59 -0
- package/dist/esm/badge/badge.js.map +1 -1
- package/dist/esm/badge/badge.styles.js +6 -5
- package/dist/esm/badge/badge.styles.js.map +1 -1
- package/dist/esm/button/button.js +48 -0
- package/dist/esm/button/button.js.map +1 -1
- package/dist/esm/button/button.options.js +0 -1
- package/dist/esm/button/button.options.js.map +1 -1
- package/dist/esm/button/button.styles.js +40 -49
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/checkbox/checkbox.js +26 -0
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/checkbox.styles.js +6 -5
- package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
- package/dist/esm/compound-button/compound-button.styles.js +14 -15
- package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
- package/dist/esm/counter-badge/counter-badge.js +67 -0
- package/dist/esm/counter-badge/counter-badge.js.map +1 -1
- package/dist/esm/counter-badge/counter-badge.styles.js +12 -6
- package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -1
- package/dist/esm/divider/divider.js +47 -2
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/divider/divider.styles.js +31 -30
- package/dist/esm/divider/divider.styles.js.map +1 -1
- package/dist/esm/image/image.js +68 -0
- package/dist/esm/image/image.js.map +1 -1
- package/dist/esm/image/image.styles.js +10 -9
- package/dist/esm/image/image.styles.js.map +1 -1
- package/dist/esm/label/label.js +41 -0
- package/dist/esm/label/label.js.map +1 -1
- package/dist/esm/label/label.styles.js +7 -6
- package/dist/esm/label/label.styles.js.map +1 -1
- package/dist/esm/link/link.js +22 -0
- package/dist/esm/link/link.js.map +1 -1
- package/dist/esm/link/link.styles.js +11 -4
- package/dist/esm/link/link.styles.js.map +1 -1
- package/dist/esm/link/link.template.js +2 -2
- package/dist/esm/link/link.template.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.js +40 -0
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.styles.js +7 -6
- package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/esm/spinner/spinner.js +27 -0
- package/dist/esm/spinner/spinner.js.map +1 -1
- package/dist/esm/spinner/spinner.styles.js +9 -8
- package/dist/esm/spinner/spinner.styles.js.map +1 -1
- package/dist/esm/styles/partials/badge.partials.js +43 -42
- package/dist/esm/styles/partials/badge.partials.js.map +1 -1
- package/dist/esm/styles/states/index.js +177 -0
- package/dist/esm/styles/states/index.js.map +1 -0
- package/dist/esm/text-input/text-input.js +27 -0
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/text-input/text-input.styles.js +23 -22
- package/dist/esm/text-input/text-input.styles.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.js +2 -1
- package/dist/esm/toggle-button/toggle-button.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.styles.js +24 -23
- package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/web-components.d.ts +276 -16
- package/dist/web-components.js +649 -94
- package/dist/web-components.min.js +341 -340
- package/package.json +3 -2
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Selector for the `filled-lighter` state.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export declare const filledLighterState: import("@microsoft/fast-element").CSSDirective;
|
|
6
|
+
/**
|
|
7
|
+
* Selector for the `filled-darker` state.
|
|
8
|
+
* @public
|
|
9
|
+
*/
|
|
10
|
+
export declare const filledDarkerState: import("@microsoft/fast-element").CSSDirective;
|
|
11
|
+
/**
|
|
12
|
+
* Selector for the `ghost` state.
|
|
13
|
+
* @public
|
|
14
|
+
*/
|
|
15
|
+
export declare const ghostState: import("@microsoft/fast-element").CSSDirective;
|
|
16
|
+
/**
|
|
17
|
+
* Selector for the `inverted` state.
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export declare const invertedState: import("@microsoft/fast-element").CSSDirective;
|
|
21
|
+
/**
|
|
22
|
+
* Selector for the `primary` state.
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
export declare const primaryState: import("@microsoft/fast-element").CSSDirective;
|
|
26
|
+
/**
|
|
27
|
+
* Selector for the `outline` state.
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
export declare const outlineState: import("@microsoft/fast-element").CSSDirective;
|
|
31
|
+
/**
|
|
32
|
+
* Selector for the `strong` state.
|
|
33
|
+
* @public
|
|
34
|
+
*/
|
|
35
|
+
export declare const strongState: import("@microsoft/fast-element").CSSDirective;
|
|
36
|
+
/**
|
|
37
|
+
* Selector for the `subtle` state.
|
|
38
|
+
* @public
|
|
39
|
+
*/
|
|
40
|
+
export declare const subtleState: import("@microsoft/fast-element").CSSDirective;
|
|
41
|
+
/**
|
|
42
|
+
* Selector for the `tint` state.
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
export declare const tintState: import("@microsoft/fast-element").CSSDirective;
|
|
46
|
+
/**
|
|
47
|
+
* Selector for the `underline` state.
|
|
48
|
+
* @public
|
|
49
|
+
*/
|
|
50
|
+
export declare const underlineState: import("@microsoft/fast-element").CSSDirective;
|
|
51
|
+
/**
|
|
52
|
+
* Selector for the `transparent` state.
|
|
53
|
+
* @public
|
|
54
|
+
*/
|
|
55
|
+
export declare const transparentState: import("@microsoft/fast-element").CSSDirective;
|
|
56
|
+
/**
|
|
57
|
+
* Selector for the `circular` state.
|
|
58
|
+
* @public
|
|
59
|
+
*/
|
|
60
|
+
export declare const circularState: import("@microsoft/fast-element").CSSDirective;
|
|
61
|
+
/**
|
|
62
|
+
* Selector for the `rounded` state.
|
|
63
|
+
* @public
|
|
64
|
+
*/
|
|
65
|
+
export declare const roundedState: import("@microsoft/fast-element").CSSDirective;
|
|
66
|
+
/**
|
|
67
|
+
* Selector for the `square` state.
|
|
68
|
+
* @public
|
|
69
|
+
*/
|
|
70
|
+
export declare const squareState: import("@microsoft/fast-element").CSSDirective;
|
|
71
|
+
/**
|
|
72
|
+
* Selector for the `tiny` state.
|
|
73
|
+
* @public
|
|
74
|
+
*/
|
|
75
|
+
export declare const tinyState: import("@microsoft/fast-element").CSSDirective;
|
|
76
|
+
/**
|
|
77
|
+
* Selector for the `extra-small` state.
|
|
78
|
+
* @public
|
|
79
|
+
*/
|
|
80
|
+
export declare const extraSmallState: import("@microsoft/fast-element").CSSDirective;
|
|
81
|
+
/**
|
|
82
|
+
* Selector for the `small` state.
|
|
83
|
+
* @public
|
|
84
|
+
*/
|
|
85
|
+
export declare const smallState: import("@microsoft/fast-element").CSSDirective;
|
|
86
|
+
/**
|
|
87
|
+
* Selector for the `large` state.
|
|
88
|
+
* @public
|
|
89
|
+
*/
|
|
90
|
+
export declare const largeState: import("@microsoft/fast-element").CSSDirective;
|
|
91
|
+
/**
|
|
92
|
+
* Selector for the `extra-large` state.
|
|
93
|
+
* @public
|
|
94
|
+
*/
|
|
95
|
+
export declare const extraLargeState: import("@microsoft/fast-element").CSSDirective;
|
|
96
|
+
/**
|
|
97
|
+
* Selector for the `huge` state.
|
|
98
|
+
* @public
|
|
99
|
+
*/
|
|
100
|
+
export declare const hugeState: import("@microsoft/fast-element").CSSDirective;
|
|
101
|
+
/**
|
|
102
|
+
* Selector for the `alignment` start state.
|
|
103
|
+
* @public
|
|
104
|
+
*/
|
|
105
|
+
export declare const alignStartState: import("@microsoft/fast-element").CSSDirective;
|
|
106
|
+
/**
|
|
107
|
+
* Selector for the `alignment` end state.
|
|
108
|
+
* @public
|
|
109
|
+
*/
|
|
110
|
+
export declare const alignEndState: import("@microsoft/fast-element").CSSDirective;
|
|
111
|
+
/**
|
|
112
|
+
* Selector for the `inset` state.
|
|
113
|
+
* @public
|
|
114
|
+
*/
|
|
115
|
+
export declare const insetState: import("@microsoft/fast-element").CSSDirective;
|
|
116
|
+
/**
|
|
117
|
+
* Selector for the `iconOnly` state.
|
|
118
|
+
* @public
|
|
119
|
+
*/
|
|
120
|
+
export declare const iconOnlyState: import("@microsoft/fast-element").CSSDirective;
|
|
121
|
+
/**
|
|
122
|
+
* Selector for the `pressed` state.
|
|
123
|
+
* @public
|
|
124
|
+
*/
|
|
125
|
+
export declare const pressedState: import("@microsoft/fast-element").CSSDirective;
|
|
126
|
+
/**
|
|
127
|
+
* Selector for the `brand` state.
|
|
128
|
+
* @public
|
|
129
|
+
*/
|
|
130
|
+
export declare const brandState: import("@microsoft/fast-element").CSSDirective;
|
|
131
|
+
/**
|
|
132
|
+
* Selector for the `error` state.
|
|
133
|
+
* @public
|
|
134
|
+
*/
|
|
135
|
+
export declare const errorState: import("@microsoft/fast-element").CSSDirective;
|
|
136
|
+
/**
|
|
137
|
+
* Selector for the `danger` state.
|
|
138
|
+
* @public
|
|
139
|
+
*/
|
|
140
|
+
export declare const dangerState: import("@microsoft/fast-element").CSSDirective;
|
|
141
|
+
/**
|
|
142
|
+
* Selector for the `important` state.
|
|
143
|
+
* @public
|
|
144
|
+
*/
|
|
145
|
+
export declare const importantState: import("@microsoft/fast-element").CSSDirective;
|
|
146
|
+
/**
|
|
147
|
+
* Selector for the `informative` state.
|
|
148
|
+
* @public
|
|
149
|
+
*/
|
|
150
|
+
export declare const informativeState: import("@microsoft/fast-element").CSSDirective;
|
|
151
|
+
/**
|
|
152
|
+
* Selector for the `severe` state.
|
|
153
|
+
* @public
|
|
154
|
+
*/
|
|
155
|
+
export declare const severeState: import("@microsoft/fast-element").CSSDirective;
|
|
156
|
+
/**
|
|
157
|
+
* Selector for the `success` state.
|
|
158
|
+
* @public
|
|
159
|
+
*/
|
|
160
|
+
export declare const successState: import("@microsoft/fast-element").CSSDirective;
|
|
161
|
+
/**
|
|
162
|
+
* Selector for the `warning` state.
|
|
163
|
+
* @public
|
|
164
|
+
*/
|
|
165
|
+
export declare const warningState: import("@microsoft/fast-element").CSSDirective;
|
|
166
|
+
/**
|
|
167
|
+
* Selector for the `vertical` state.
|
|
168
|
+
* @public
|
|
169
|
+
*/
|
|
170
|
+
export declare const verticalState: import("@microsoft/fast-element").CSSDirective;
|
|
171
|
+
/**
|
|
172
|
+
* Selector for the `horizontal` state.
|
|
173
|
+
* @public
|
|
174
|
+
*/
|
|
175
|
+
export declare const horizontalState: import("@microsoft/fast-element").CSSDirective;
|
|
@@ -23,6 +23,12 @@ export declare class TextInput extends FASTElement {
|
|
|
23
23
|
* HTML Attribute: `appearance`
|
|
24
24
|
*/
|
|
25
25
|
appearance?: TextInputAppearance;
|
|
26
|
+
/**
|
|
27
|
+
* Handles changes to appearance attribute custom states
|
|
28
|
+
* @param prev - the previous state
|
|
29
|
+
* @param next - the next state
|
|
30
|
+
*/
|
|
31
|
+
appearanceChanged(prev: TextInputAppearance | undefined, next: TextInputAppearance | undefined): void;
|
|
26
32
|
/**
|
|
27
33
|
* Indicates the element's autocomplete state.
|
|
28
34
|
* @see The {@link https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete | `autocomplete`} attribute
|
|
@@ -49,6 +55,12 @@ export declare class TextInput extends FASTElement {
|
|
|
49
55
|
* HTML Attribute: `control-size`
|
|
50
56
|
*/
|
|
51
57
|
controlSize?: TextInputControlSize;
|
|
58
|
+
/**
|
|
59
|
+
* Handles changes to `control-size` attribute custom states
|
|
60
|
+
* @param prev - the previous state
|
|
61
|
+
* @param next - the next state
|
|
62
|
+
*/
|
|
63
|
+
controlSizeChanged(prev: TextInputControlSize | undefined, next: TextInputControlSize | undefined): void;
|
|
52
64
|
/**
|
|
53
65
|
* The default slotted content. This is the content that appears in the text field label.
|
|
54
66
|
*
|
|
@@ -3,6 +3,7 @@ import { attr, FASTElement, Observable } from '@microsoft/fast-element';
|
|
|
3
3
|
import { keyEnter } from '@microsoft/fast-web-utilities';
|
|
4
4
|
import { StartEnd } from '../patterns/index.js';
|
|
5
5
|
import { applyMixins } from '../utils/apply-mixins.js';
|
|
6
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
6
7
|
import { AnchorAttributes, } from './anchor-button.options.js';
|
|
7
8
|
/**
|
|
8
9
|
* An Anchor Custom HTML Element.
|
|
@@ -19,6 +20,11 @@ import { AnchorAttributes, } from './anchor-button.options.js';
|
|
|
19
20
|
export class BaseAnchor extends FASTElement {
|
|
20
21
|
constructor() {
|
|
21
22
|
super();
|
|
23
|
+
/**
|
|
24
|
+
* Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
|
|
25
|
+
* @internal
|
|
26
|
+
*/
|
|
27
|
+
this.isMac = navigator.userAgent.includes('Mac');
|
|
22
28
|
/**
|
|
23
29
|
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
24
30
|
*
|
|
@@ -65,24 +71,38 @@ export class BaseAnchor extends FASTElement {
|
|
|
65
71
|
* @param e - The event object
|
|
66
72
|
* @internal
|
|
67
73
|
*/
|
|
68
|
-
clickHandler() {
|
|
69
|
-
this.
|
|
74
|
+
clickHandler(e) {
|
|
75
|
+
if (this.href) {
|
|
76
|
+
const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
|
|
77
|
+
this.handleNavigation(newTab);
|
|
78
|
+
}
|
|
70
79
|
return true;
|
|
71
80
|
}
|
|
72
81
|
/**
|
|
73
|
-
* Handles
|
|
82
|
+
* Handles keydown events for the anchor.
|
|
74
83
|
*
|
|
75
84
|
* @param e - the keyboard event
|
|
76
85
|
* @returns - the return value of the click handler
|
|
77
86
|
* @public
|
|
78
87
|
*/
|
|
79
|
-
|
|
80
|
-
if (
|
|
81
|
-
|
|
82
|
-
|
|
88
|
+
keydownHandler(e) {
|
|
89
|
+
if (this.href) {
|
|
90
|
+
if (e.key === keyEnter) {
|
|
91
|
+
const newTab = !this.isMac ? e.ctrlKey : e.metaKey || e.ctrlKey;
|
|
92
|
+
this.handleNavigation(newTab);
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
83
95
|
}
|
|
84
96
|
return true;
|
|
85
97
|
}
|
|
98
|
+
/**
|
|
99
|
+
* Handles navigation based on input
|
|
100
|
+
* If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
|
|
101
|
+
* @internal
|
|
102
|
+
*/
|
|
103
|
+
handleNavigation(newTab) {
|
|
104
|
+
newTab ? window.open(this.href, '_blank') : this.internalProxyAnchor.click();
|
|
105
|
+
}
|
|
86
106
|
/**
|
|
87
107
|
* A method for updating proxy attributes when attributes have changed
|
|
88
108
|
* @internal
|
|
@@ -100,7 +120,8 @@ export class BaseAnchor extends FASTElement {
|
|
|
100
120
|
createProxyElement() {
|
|
101
121
|
var _a;
|
|
102
122
|
const proxy = (_a = this.internalProxyAnchor) !== null && _a !== void 0 ? _a : document.createElement('a');
|
|
103
|
-
proxy.
|
|
123
|
+
proxy.ariaHidden = 'true';
|
|
124
|
+
proxy.tabIndex = -1;
|
|
104
125
|
return proxy;
|
|
105
126
|
}
|
|
106
127
|
}
|
|
@@ -140,6 +161,53 @@ export class AnchorButton extends BaseAnchor {
|
|
|
140
161
|
*/
|
|
141
162
|
this.iconOnly = false;
|
|
142
163
|
}
|
|
164
|
+
/**
|
|
165
|
+
* Handles changes to appearance attribute custom states
|
|
166
|
+
* @param prev - the previous state
|
|
167
|
+
* @param next - the next state
|
|
168
|
+
*/
|
|
169
|
+
appearanceChanged(prev, next) {
|
|
170
|
+
if (prev) {
|
|
171
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
172
|
+
}
|
|
173
|
+
if (next) {
|
|
174
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
/**
|
|
178
|
+
* Handles changes to shape attribute custom states
|
|
179
|
+
* @param prev - the previous state
|
|
180
|
+
* @param next - the next state
|
|
181
|
+
*/
|
|
182
|
+
shapeChanged(prev, next) {
|
|
183
|
+
if (prev) {
|
|
184
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
185
|
+
}
|
|
186
|
+
if (next) {
|
|
187
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* Handles changes to size attribute custom states
|
|
192
|
+
* @param prev - the previous state
|
|
193
|
+
* @param next - the next state
|
|
194
|
+
*/
|
|
195
|
+
sizeChanged(prev, next) {
|
|
196
|
+
if (prev) {
|
|
197
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
198
|
+
}
|
|
199
|
+
if (next) {
|
|
200
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Handles changes to icon only custom states
|
|
205
|
+
* @param prev - the previous state
|
|
206
|
+
* @param next - the next state
|
|
207
|
+
*/
|
|
208
|
+
iconOnlyChanged(prev, next) {
|
|
209
|
+
toggleState(this.elementInternals, 'icon', !!next);
|
|
210
|
+
}
|
|
143
211
|
}
|
|
144
212
|
__decorate([
|
|
145
213
|
attr
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EACL,gBAAgB,GAKjB,MAAM,4BAA4B,CAAC;AAQpC;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,14 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { baseButtonStyles } from '../button/button.styles.js';
|
|
3
3
|
import { forcedColorsStylesheetBehavior } from '../utils/index.js';
|
|
4
4
|
// Need to support icon hover styles
|
|
5
|
-
export const styles =
|
|
5
|
+
export const styles = css `
|
|
6
|
+
${baseButtonStyles}
|
|
7
|
+
|
|
8
|
+
::slotted(a) {
|
|
9
|
+
position: absolute;
|
|
10
|
+
inset: 0;
|
|
11
|
+
}
|
|
12
|
+
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
6
13
|
:host {
|
|
7
14
|
border-color: LinkText;
|
|
8
15
|
color: LinkText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"anchor-button.styles.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,gBAAgB;;;;;;CAMnB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;GAKjC,CAAC,CACH,CAAC"}
|
|
@@ -8,8 +8,8 @@ export function anchorTemplate(options = {}) {
|
|
|
8
8
|
return html `
|
|
9
9
|
<template
|
|
10
10
|
tabindex="0"
|
|
11
|
-
@click="${x => x.clickHandler()}"
|
|
12
|
-
@
|
|
11
|
+
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
12
|
+
@keydown="${(x, c) => x.keydownHandler(c.event)}"
|
|
13
13
|
>
|
|
14
14
|
${startSlotTemplate(options)}
|
|
15
15
|
<span class="content" part="content">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"anchor-button.template.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAyB,UAAyB,EAAE;IAChF,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"anchor-button.template.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAyB,UAAyB,EAAE;IAChF,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;QAE9D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;;GAE7B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAsC,cAAc,EAAE,CAAC"}
|
package/dist/esm/badge/badge.js
CHANGED
|
@@ -3,6 +3,7 @@ import { attr, FASTElement } from '@microsoft/fast-element';
|
|
|
3
3
|
// TODO: Remove with https://github.com/microsoft/fast/pull/6797
|
|
4
4
|
import { applyMixins } from '../utils/apply-mixins.js';
|
|
5
5
|
import { StartEnd } from '../patterns/index.js';
|
|
6
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
6
7
|
import { BadgeAppearance, BadgeColor } from './badge.options.js';
|
|
7
8
|
/**
|
|
8
9
|
* The base class used for constructing a fluent-badge custom element
|
|
@@ -11,6 +12,12 @@ import { BadgeAppearance, BadgeColor } from './badge.options.js';
|
|
|
11
12
|
export class Badge extends FASTElement {
|
|
12
13
|
constructor() {
|
|
13
14
|
super(...arguments);
|
|
15
|
+
/**
|
|
16
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
17
|
+
*
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
this.elementInternals = this.attachInternals();
|
|
14
21
|
/**
|
|
15
22
|
* The appearance the badge should have.
|
|
16
23
|
*
|
|
@@ -28,6 +35,58 @@ export class Badge extends FASTElement {
|
|
|
28
35
|
*/
|
|
29
36
|
this.color = BadgeColor.brand;
|
|
30
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Handles changes to appearance attribute custom states
|
|
40
|
+
* @param prev - the previous state
|
|
41
|
+
* @param next - the next state
|
|
42
|
+
*/
|
|
43
|
+
appearanceChanged(prev, next) {
|
|
44
|
+
if (prev) {
|
|
45
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
46
|
+
}
|
|
47
|
+
if (next) {
|
|
48
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Handles changes to color attribute custom states
|
|
53
|
+
* @param prev - the previous state
|
|
54
|
+
* @param next - the next state
|
|
55
|
+
*/
|
|
56
|
+
colorChanged(prev, next) {
|
|
57
|
+
if (prev) {
|
|
58
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
59
|
+
}
|
|
60
|
+
if (next) {
|
|
61
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Handles changes to shape attribute custom states
|
|
66
|
+
* @param prev - the previous state
|
|
67
|
+
* @param next - the next state
|
|
68
|
+
*/
|
|
69
|
+
shapeChanged(prev, next) {
|
|
70
|
+
if (prev) {
|
|
71
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
72
|
+
}
|
|
73
|
+
if (next) {
|
|
74
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Handles changes to size attribute custom states
|
|
79
|
+
* @param prev - the previous state
|
|
80
|
+
* @param next - the next state
|
|
81
|
+
*/
|
|
82
|
+
sizeChanged(prev, next) {
|
|
83
|
+
if (prev) {
|
|
84
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
85
|
+
}
|
|
86
|
+
if (next) {
|
|
87
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
31
90
|
}
|
|
32
91
|
__decorate([
|
|
33
92
|
attr
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/badge/badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAyB,MAAM,oBAAoB,CAAC;AAExF;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnE;;;;;;WAMG;QAEI,eAAU,GAAoB,eAAe,CAAC,MAAM,CAAC;QAgB5D;;;;;;WAMG;QAEI,UAAK,GAAe,UAAU,CAAC,KAAK,CAAC;IA+D9C,CAAC;IArFC;;;;OAIG;IACI,iBAAiB,CAAC,IAAiC,EAAE,IAAiC;QAC3F,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAA4B,EAAE,IAA4B;QAC5E,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAA2B,EAAE,IAA2B;QACzE,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;CACF;AAvFC;IADC,IAAI;yCACuD;AAwB5D;IADC,IAAI;oCACuC;AAwB5C;IADC,IAAI;oCACqB;AAwB1B;IADC,IAAI;mCACmB;AAyB1B,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC"}
|
|
@@ -2,22 +2,23 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { forcedColorsStylesheetBehavior } from '../utils/index.js';
|
|
3
3
|
import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
|
|
4
4
|
import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
|
|
5
|
+
import { extraSmallState, roundedState, smallState, squareState, tinyState } from '../styles/states/index.js';
|
|
5
6
|
// why is the border not showing up?
|
|
6
7
|
/** Badge styles
|
|
7
8
|
* @public
|
|
8
9
|
*/
|
|
9
10
|
export const styles = css `
|
|
10
|
-
:host(
|
|
11
|
+
:host(${squareState}) {
|
|
11
12
|
border-radius: ${borderRadiusNone};
|
|
12
13
|
}
|
|
13
14
|
|
|
14
|
-
:host(
|
|
15
|
+
:host(${roundedState}) {
|
|
15
16
|
border-radius: ${borderRadiusMedium};
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
:host(
|
|
19
|
-
:host(
|
|
20
|
-
:host(
|
|
19
|
+
:host(${roundedState}${tinyState}),
|
|
20
|
+
:host(${roundedState}${extraSmallState}),
|
|
21
|
+
:host(${roundedState}${smallState}) {
|
|
21
22
|
border-radius: ${borderRadiusSmall};
|
|
22
23
|
}
|
|
23
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC9G,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;UACf,WAAW;qBACA,gBAAgB;;;UAG3B,YAAY;qBACD,kBAAkB;;;UAG7B,YAAY,GAAG,SAAS;UACxB,YAAY,GAAG,eAAe;UAC9B,YAAY,GAAG,UAAU;qBACd,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { attr, FASTElement, observable } from '@microsoft/fast-element';
|
|
|
3
3
|
import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
|
|
4
4
|
import { StartEnd } from '../patterns/index.js';
|
|
5
5
|
import { applyMixins } from '../utils/apply-mixins.js';
|
|
6
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
6
7
|
import { ButtonType } from './button.options.js';
|
|
7
8
|
/**
|
|
8
9
|
* A Button Custom HTML Element.
|
|
@@ -16,6 +17,19 @@ import { ButtonType } from './button.options.js';
|
|
|
16
17
|
* @public
|
|
17
18
|
*/
|
|
18
19
|
export class Button extends FASTElement {
|
|
20
|
+
/**
|
|
21
|
+
* Handles changes to appearance attribute custom states
|
|
22
|
+
* @param prev - the previous state
|
|
23
|
+
* @param next - the next state
|
|
24
|
+
*/
|
|
25
|
+
appearanceChanged(prev, next) {
|
|
26
|
+
if (prev) {
|
|
27
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
28
|
+
}
|
|
29
|
+
if (next) {
|
|
30
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
19
33
|
/**
|
|
20
34
|
* Sets the element's internal disabled state when the element is focusable while disabled.
|
|
21
35
|
*
|
|
@@ -36,6 +50,14 @@ export class Button extends FASTElement {
|
|
|
36
50
|
get form() {
|
|
37
51
|
return this.elementInternals.form;
|
|
38
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* Handles changes to icon only custom states
|
|
55
|
+
* @param prev - the previous state
|
|
56
|
+
* @param next - the next state
|
|
57
|
+
*/
|
|
58
|
+
iconOnlyChanged(prev, next) {
|
|
59
|
+
toggleState(this.elementInternals, 'icon', next);
|
|
60
|
+
}
|
|
39
61
|
/**
|
|
40
62
|
* A reference to all associated label elements.
|
|
41
63
|
*
|
|
@@ -44,6 +66,32 @@ export class Button extends FASTElement {
|
|
|
44
66
|
get labels() {
|
|
45
67
|
return Object.freeze(Array.from(this.elementInternals.labels));
|
|
46
68
|
}
|
|
69
|
+
/**
|
|
70
|
+
* Handles changes to shape attribute custom states
|
|
71
|
+
* @param prev - the previous state
|
|
72
|
+
* @param next - the next state
|
|
73
|
+
*/
|
|
74
|
+
shapeChanged(prev, next) {
|
|
75
|
+
if (prev) {
|
|
76
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
77
|
+
}
|
|
78
|
+
if (next) {
|
|
79
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Handles changes to size attribute custom states
|
|
84
|
+
* @param prev - the previous state
|
|
85
|
+
* @param next - the next state
|
|
86
|
+
*/
|
|
87
|
+
sizeChanged(prev, next) {
|
|
88
|
+
if (prev) {
|
|
89
|
+
toggleState(this.elementInternals, `${prev}`, false);
|
|
90
|
+
}
|
|
91
|
+
if (next) {
|
|
92
|
+
toggleState(this.elementInternals, `${next}`, true);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
47
95
|
/**
|
|
48
96
|
* Removes the form submission fallback control when the type changes.
|
|
49
97
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,
|
|
1
|
+
{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAeX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,SAAS;IACjB,GAAG,EAAE,MAAM;CACH,CAAC"}
|