@fluentui/web-components 3.0.0-alpha.16 → 3.0.0-alpha.18
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.json +58 -1
- package/CHANGELOG.md +22 -2
- package/dist/dts/anchor-button/anchor-button.d.ts +64 -0
- package/dist/dts/anchor-button/anchor-button.definition.d.ts +10 -0
- package/dist/dts/anchor-button/anchor-button.options.d.ts +46 -0
- package/dist/dts/anchor-button/anchor-button.styles.d.ts +1 -0
- package/dist/dts/anchor-button/anchor-button.template.d.ts +7 -0
- package/dist/dts/anchor-button/define.d.ts +1 -0
- package/dist/dts/anchor-button/index.d.ts +4 -0
- package/dist/dts/compound-button/compound-button.d.ts +7 -0
- package/dist/dts/compound-button/compound-button.definition.d.ts +10 -0
- package/dist/dts/compound-button/compound-button.options.d.ts +50 -0
- package/dist/dts/compound-button/compound-button.styles.d.ts +1 -0
- package/dist/dts/compound-button/compound-button.template.d.ts +13 -0
- package/dist/dts/compound-button/define.d.ts +1 -0
- package/dist/dts/compound-button/index.d.ts +5 -0
- package/dist/dts/index.d.ts +3 -0
- package/dist/dts/toggle-button/define.d.ts +1 -0
- package/dist/dts/toggle-button/index.d.ts +5 -0
- package/dist/dts/toggle-button/toggle-button.d.ts +48 -0
- package/dist/dts/toggle-button/toggle-button.definition.d.ts +10 -0
- package/dist/dts/toggle-button/toggle-button.options.d.ts +46 -0
- package/dist/dts/toggle-button/toggle-button.styles.d.ts +1 -0
- package/dist/dts/toggle-button/toggle-button.template.d.ts +7 -0
- package/dist/esm/anchor-button/anchor-button.definition.js +21 -0
- package/dist/esm/anchor-button/anchor-button.definition.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.js +93 -0
- package/dist/esm/anchor-button/anchor-button.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.options.js +17 -0
- package/dist/esm/anchor-button/anchor-button.options.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.styles.js +11 -0
- package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -0
- package/dist/esm/anchor-button/anchor-button.template.js +7 -0
- package/dist/esm/anchor-button/anchor-button.template.js.map +1 -0
- package/dist/esm/anchor-button/define.js +4 -0
- package/dist/esm/anchor-button/define.js.map +1 -0
- package/dist/esm/anchor-button/index.js +5 -0
- package/dist/esm/anchor-button/index.js.map +1 -0
- package/dist/esm/button/button.styles.js +1 -0
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/compound-button/compound-button.definition.js +21 -0
- package/dist/esm/compound-button/compound-button.definition.js.map +1 -0
- package/dist/esm/compound-button/compound-button.js +8 -0
- package/dist/esm/compound-button/compound-button.js.map +1 -0
- package/dist/esm/compound-button/compound-button.options.js +17 -0
- package/dist/esm/compound-button/compound-button.options.js.map +1 -0
- package/dist/esm/compound-button/compound-button.styles.js +105 -0
- package/dist/esm/compound-button/compound-button.styles.js.map +1 -0
- package/dist/esm/compound-button/compound-button.template.js +60 -0
- package/dist/esm/compound-button/compound-button.template.js.map +1 -0
- package/dist/esm/compound-button/define.js +4 -0
- package/dist/esm/compound-button/define.js.map +1 -0
- package/dist/esm/compound-button/index.js +6 -0
- package/dist/esm/compound-button/index.js.map +1 -0
- package/dist/esm/image/image.styles.js +4 -1
- package/dist/esm/image/image.styles.js.map +1 -1
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/toggle-button/define.js +4 -0
- package/dist/esm/toggle-button/define.js.map +1 -0
- package/dist/esm/toggle-button/index.js +6 -0
- package/dist/esm/toggle-button/index.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.definition.js +21 -0
- package/dist/esm/toggle-button/toggle-button.definition.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.js +99 -0
- package/dist/esm/toggle-button/toggle-button.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.options.js +17 -0
- package/dist/esm/toggle-button/toggle-button.options.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.styles.js +83 -0
- package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -0
- package/dist/esm/toggle-button/toggle-button.template.js +7 -0
- package/dist/esm/toggle-button/toggle-button.template.js.map +1 -0
- package/dist/fluent-web-components.api.json +3168 -1471
- package/dist/web-components.d.ts +330 -0
- package/dist/web-components.js +488 -117
- package/dist/web-components.min.js +158 -146
- package/docs/api-report.md +173 -0
- package/package.json +13 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,64 @@
|
|
|
2
2
|
"name": "@fluentui/web-components",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 20 Apr 2023 04:20:25 GMT",
|
|
6
|
+
"tag": "@fluentui/web-components_v3.0.0-alpha.18",
|
|
7
|
+
"version": "3.0.0-alpha.18",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "harankin@microsoft.com",
|
|
12
|
+
"package": "@fluentui/web-components",
|
|
13
|
+
"commit": "9cd641f4d38d6889ee50afeedca54f77617cd1a5",
|
|
14
|
+
"comment": "Image component style updates"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 19 Apr 2023 04:23:30 GMT",
|
|
21
|
+
"tag": "@fluentui/web-components_v3.0.0-alpha.17",
|
|
22
|
+
"version": "3.0.0-alpha.17",
|
|
23
|
+
"comments": {
|
|
24
|
+
"none": [
|
|
25
|
+
{
|
|
26
|
+
"author": "ryan@ryanmerrill.net",
|
|
27
|
+
"package": "@fluentui/web-components",
|
|
28
|
+
"commit": "e5ff319c5354a9f47d6f5b990441673e32998b7c",
|
|
29
|
+
"comment": "Adds Select spec"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"date": "Wed, 12 Apr 2023 04:19:35 GMT",
|
|
36
|
+
"tag": "@fluentui/web-components_v3.0.0-alpha.17",
|
|
37
|
+
"version": "3.0.0-alpha.17",
|
|
38
|
+
"comments": {
|
|
39
|
+
"prerelease": [
|
|
40
|
+
{
|
|
41
|
+
"author": "chhol@microsoft.com",
|
|
42
|
+
"package": "@fluentui/web-components",
|
|
43
|
+
"commit": "cc0a6678ff55f657b13b70cff02645fe3772c84e",
|
|
44
|
+
"comment": "feat(toggle-button): add toggle button web component"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "chhol@microsoft.com",
|
|
48
|
+
"package": "@fluentui/web-components",
|
|
49
|
+
"commit": "37195a34b36538ab0cc7c765824691bab796502e",
|
|
50
|
+
"comment": "feat(compound-button): add compound button as new web component"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "chhol@microsoft.com",
|
|
54
|
+
"package": "@fluentui/web-components",
|
|
55
|
+
"commit": "5ab8f95663fcac978d98dccc65626196679a2ae2",
|
|
56
|
+
"comment": "feat(anchor-button): add anchor button to web components"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Tue, 11 Apr 2023 04:24:57 GMT",
|
|
6
63
|
"tag": "@fluentui/web-components_v3.0.0-alpha.16",
|
|
7
64
|
"version": "3.0.0-alpha.16",
|
|
8
65
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 20 Apr 2023 04:20:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.18)
|
|
8
|
+
|
|
9
|
+
Thu, 20 Apr 2023 04:20:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.17..@fluentui/web-components_v3.0.0-alpha.18)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Image component style updates ([PR #27567](https://github.com/microsoft/fluentui/pull/27567) by harankin@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [3.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.17)
|
|
17
|
+
|
|
18
|
+
Wed, 12 Apr 2023 04:19:35 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.16..@fluentui/web-components_v3.0.0-alpha.17)
|
|
20
|
+
|
|
21
|
+
### Changes
|
|
22
|
+
|
|
23
|
+
- feat(toggle-button): add toggle button web component ([PR #27405](https://github.com/microsoft/fluentui/pull/27405) by chhol@microsoft.com)
|
|
24
|
+
- feat(compound-button): add compound button as new web component ([PR #27407](https://github.com/microsoft/fluentui/pull/27407) by chhol@microsoft.com)
|
|
25
|
+
- feat(anchor-button): add anchor button to web components ([PR #27395](https://github.com/microsoft/fluentui/pull/27395) by chhol@microsoft.com)
|
|
26
|
+
|
|
7
27
|
## [3.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.16)
|
|
8
28
|
|
|
9
|
-
Tue, 11 Apr 2023 04:24:
|
|
29
|
+
Tue, 11 Apr 2023 04:24:57 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.15..@fluentui/web-components_v3.0.0-alpha.16)
|
|
11
31
|
|
|
12
32
|
### Changes
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { FASTAnchor } from '@microsoft/fast-foundation';
|
|
2
|
+
import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
|
|
3
|
+
/**
|
|
4
|
+
* The base class used for constructing a fluent-anchor-button custom element
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export declare class AnchorButton extends FASTAnchor {
|
|
8
|
+
/**
|
|
9
|
+
* The appearance the anchor button should have.
|
|
10
|
+
*
|
|
11
|
+
* @public
|
|
12
|
+
* @remarks
|
|
13
|
+
* HTML Attribute: appearance
|
|
14
|
+
*/
|
|
15
|
+
appearance?: AnchorButtonAppearance | undefined;
|
|
16
|
+
/**
|
|
17
|
+
* The shape the anchor button should have.
|
|
18
|
+
*
|
|
19
|
+
* @public
|
|
20
|
+
* @remarks
|
|
21
|
+
* HTML Attribute: shape
|
|
22
|
+
*/
|
|
23
|
+
shape?: AnchorButtonShape | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* The size the anchor button should have.
|
|
26
|
+
*
|
|
27
|
+
* @public
|
|
28
|
+
* @remarks
|
|
29
|
+
* HTML Attribute: size
|
|
30
|
+
*/
|
|
31
|
+
size?: AnchorButtonSize;
|
|
32
|
+
/**
|
|
33
|
+
* The anchor button has an icon only, no text content
|
|
34
|
+
*
|
|
35
|
+
* @public
|
|
36
|
+
* @remarks
|
|
37
|
+
* HTML Attribute: icon-only
|
|
38
|
+
*/
|
|
39
|
+
iconOnly: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* The anchor button is disabled
|
|
42
|
+
*
|
|
43
|
+
* @public
|
|
44
|
+
* @remarks
|
|
45
|
+
* HTML Attribute: disabled-focusable
|
|
46
|
+
*/
|
|
47
|
+
disabled?: boolean;
|
|
48
|
+
protected disabledChanged(prev: boolean, next: boolean): void;
|
|
49
|
+
/**
|
|
50
|
+
* The anchor button is disabled but focusable
|
|
51
|
+
*
|
|
52
|
+
* @public
|
|
53
|
+
* @remarks
|
|
54
|
+
* HTML Attribute: disabled-focusable
|
|
55
|
+
*/
|
|
56
|
+
disabledFocusable?: boolean;
|
|
57
|
+
protected disabledFocusableChanged(prev: boolean, next: boolean): void;
|
|
58
|
+
/**
|
|
59
|
+
* Prevents disabledFocusable click events
|
|
60
|
+
*/
|
|
61
|
+
private handleDisabledFocusableClick;
|
|
62
|
+
connectedCallback(): void;
|
|
63
|
+
disconnectedCallback(): void;
|
|
64
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { AnchorButton } from './anchor-button.js';
|
|
2
|
+
/**
|
|
3
|
+
* The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
|
|
4
|
+
* {@link @microsoft/fast-foundation#anchorTemplate}
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @remarks
|
|
8
|
+
* HTML Element: \<fluent-anchor-button\>
|
|
9
|
+
*/
|
|
10
|
+
export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof AnchorButton>;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { AnchorOptions, ValuesOf } from '@microsoft/fast-foundation';
|
|
2
|
+
/**
|
|
3
|
+
* Anchor Button Appearance constants
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare const AnchorButtonAppearance: {
|
|
7
|
+
readonly primary: "primary";
|
|
8
|
+
readonly outline: "outline";
|
|
9
|
+
readonly subtle: "subtle";
|
|
10
|
+
readonly secondary: "secondary";
|
|
11
|
+
readonly transparent: "transparent";
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* An Anchor Button can be secondary, primary, outline, subtle, transparent
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
|
|
18
|
+
/**
|
|
19
|
+
* An Anchor Button can be square, circular or rounded.
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export declare const AnchorButtonShape: {
|
|
23
|
+
readonly circular: "circular";
|
|
24
|
+
readonly rounded: "rounded";
|
|
25
|
+
readonly square: "square";
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* An Anchor Button can be square, circular or rounded
|
|
29
|
+
* @public
|
|
30
|
+
*/
|
|
31
|
+
export declare type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
|
|
32
|
+
/**
|
|
33
|
+
* An Anchor Button can be a size of small, medium or large.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare const AnchorButtonSize: {
|
|
37
|
+
readonly small: "small";
|
|
38
|
+
readonly medium: "medium";
|
|
39
|
+
readonly large: "large";
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* An Anchor Button can be on of several preset sizes.
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
|
|
46
|
+
export { AnchorOptions as AnchorButtonOptions };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CompoundButton } from './compound-button.js';
|
|
2
|
+
/**
|
|
3
|
+
* The Fluent Compound Button Element. Implements {@link @microsoft/fast-foundation#Button },
|
|
4
|
+
* {@link @microsoft/fast-foundation#buttonTemplate}
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @remarks
|
|
8
|
+
* HTML Element: \<fluent-comopund-button\>
|
|
9
|
+
*/
|
|
10
|
+
export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof CompoundButton>;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
|
|
2
|
+
/**
|
|
3
|
+
* Compound Button Appearance constants
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare const CompoundButtonAppearance: {
|
|
7
|
+
readonly primary: "primary";
|
|
8
|
+
readonly outline: "outline";
|
|
9
|
+
readonly subtle: "subtle";
|
|
10
|
+
readonly secondary: "secondary";
|
|
11
|
+
readonly transparent: "transparent";
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* A Compound Button can be secondary, primary, outline, subtle, transparent
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
export declare type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
|
|
18
|
+
/**
|
|
19
|
+
* A Compound Button can be square, circular or rounded.
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export declare const CompoundButtonShape: {
|
|
23
|
+
readonly circular: "circular";
|
|
24
|
+
readonly rounded: "rounded";
|
|
25
|
+
readonly square: "square";
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* A Compound Button can be square, circular or rounded
|
|
29
|
+
* @public
|
|
30
|
+
*/
|
|
31
|
+
export declare type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
|
|
32
|
+
/**
|
|
33
|
+
* A Compound Button can be a size of small, medium or large.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare const CompoundButtonSize: {
|
|
37
|
+
readonly small: "small";
|
|
38
|
+
/**
|
|
39
|
+
* A Compound Button can be on of several preset sizes.
|
|
40
|
+
* @public
|
|
41
|
+
*/
|
|
42
|
+
readonly medium: "medium";
|
|
43
|
+
readonly large: "large";
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* A Compound Button can be on of several preset sizes.
|
|
47
|
+
* @public
|
|
48
|
+
*/
|
|
49
|
+
export declare type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
|
|
50
|
+
export { ButtonOptions as CompoundButtonOptions };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ElementViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { CompoundButton } from './compound-button.js';
|
|
3
|
+
import type { CompoundButtonOptions } from './compound-button.options.js';
|
|
4
|
+
/**
|
|
5
|
+
* The template for the Compound Button component.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export declare function buttonTemplate<T extends CompoundButton>(options?: CompoundButtonOptions): ElementViewTemplate<T>;
|
|
9
|
+
/**
|
|
10
|
+
* The template for the Button component.
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
export declare const template: ElementViewTemplate<CompoundButton>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export * from './compound-button.js';
|
|
2
|
+
export * from './compound-button.options.js';
|
|
3
|
+
export { template as CompoundButtonTemplate } from './compound-button.template.js';
|
|
4
|
+
export { styles as CompoundButtonStyles } from './compound-button.styles.js';
|
|
5
|
+
export { definition as CompoundButtonDefinition } from './compound-button.definition.js';
|
package/dist/dts/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export * from './accordion/index.js';
|
|
2
2
|
export * from './accordion-item/index.js';
|
|
3
|
+
export * from './anchor-button/index.js';
|
|
3
4
|
export * from './avatar/index.js';
|
|
4
5
|
export * from './badge/index.js';
|
|
5
6
|
export * from './button/index.js';
|
|
7
|
+
export * from './compound-button/index.js';
|
|
6
8
|
export * from './counter-badge/index.js';
|
|
7
9
|
export * from './divider/index.js';
|
|
8
10
|
export * from './image/index.js';
|
|
@@ -16,4 +18,5 @@ export * from './tabs/index.js';
|
|
|
16
18
|
export * from './tab/index.js';
|
|
17
19
|
export * from './tab-panel/index.js';
|
|
18
20
|
export * from './text/index.js';
|
|
21
|
+
export * from './toggle-button/index.js';
|
|
19
22
|
export * from './theme/index.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export * from './toggle-button.js';
|
|
2
|
+
export * from './toggle-button.options.js';
|
|
3
|
+
export { template as ToggleButtonTemplate } from './toggle-button.template.js';
|
|
4
|
+
export { styles as ToggleButtonStyles } from './toggle-button.styles.js';
|
|
5
|
+
export { definition as ToggleButtonDefinition } from './toggle-button.definition.js';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Button } from '../button/button.js';
|
|
2
|
+
/**
|
|
3
|
+
* The base class used for constructing a fluent-toggle-button custom element
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare class ToggleButton extends Button {
|
|
7
|
+
/**
|
|
8
|
+
* Tracks whether the "checked" property has been changed.
|
|
9
|
+
* This is necessary to provide consistent behavior with
|
|
10
|
+
* normal input checkboxes
|
|
11
|
+
*/
|
|
12
|
+
protected dirtyChecked: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Provides the default checkedness of the input element
|
|
15
|
+
* Passed down to proxy
|
|
16
|
+
*
|
|
17
|
+
* @public
|
|
18
|
+
* @remarks
|
|
19
|
+
* HTML Attribute: checked
|
|
20
|
+
*/
|
|
21
|
+
checkedAttribute: boolean;
|
|
22
|
+
protected checkedAttributeChanged(): void;
|
|
23
|
+
defaultChecked: boolean;
|
|
24
|
+
protected defaultCheckedChanged(): void;
|
|
25
|
+
/**
|
|
26
|
+
* The checked state of the control.
|
|
27
|
+
*
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
checked: boolean;
|
|
31
|
+
protected checkedChanged(prev: boolean | undefined, next: boolean): void;
|
|
32
|
+
/**
|
|
33
|
+
* The current checkedness of the element. This property serves as a mechanism
|
|
34
|
+
* to set the `checked` property through both property assignment and the
|
|
35
|
+
* .setAttribute() method. This is useful for setting the field's checkedness
|
|
36
|
+
* in UI libraries that bind data through the .setAttribute() API
|
|
37
|
+
* and don't support IDL attribute binding.
|
|
38
|
+
*/
|
|
39
|
+
currentChecked: boolean;
|
|
40
|
+
currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
|
|
41
|
+
constructor();
|
|
42
|
+
connectedCallback(): void;
|
|
43
|
+
disconnectedCallback(): void;
|
|
44
|
+
/**
|
|
45
|
+
* @internal
|
|
46
|
+
*/
|
|
47
|
+
protected handleToggleButtonClick: (e: MouseEvent) => void;
|
|
48
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ToggleButton } from './toggle-button.js';
|
|
2
|
+
/**
|
|
3
|
+
* The Fluent Toggle Button Element. Implements {@link @microsoft/fast-foundation#Button },
|
|
4
|
+
* {@link @microsoft/fast-foundation#buttonTemplate}
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @remarks
|
|
8
|
+
* HTML Element: \<fluent-toggle-button\>
|
|
9
|
+
*/
|
|
10
|
+
export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof ToggleButton>;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ButtonOptions, ValuesOf } from '@microsoft/fast-foundation';
|
|
2
|
+
/**
|
|
3
|
+
* Toggle Button Appearance constants
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export declare const ToggleButtonAppearance: {
|
|
7
|
+
readonly primary: "primary";
|
|
8
|
+
readonly outline: "outline";
|
|
9
|
+
readonly subtle: "subtle";
|
|
10
|
+
readonly secondary: "secondary";
|
|
11
|
+
readonly transparent: "transparent";
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* A Toggle Button can be secondary, primary, outline, subtle, transparent
|
|
15
|
+
* @public
|
|
16
|
+
*/
|
|
17
|
+
export declare type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
|
|
18
|
+
/**
|
|
19
|
+
* A Toggle Button can be square, circular or rounded.
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export declare const ToggleButtonShape: {
|
|
23
|
+
readonly circular: "circular";
|
|
24
|
+
readonly rounded: "rounded";
|
|
25
|
+
readonly square: "square";
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* A Toggle Button can be square, circular or rounded
|
|
29
|
+
* @public
|
|
30
|
+
*/
|
|
31
|
+
export declare type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
|
|
32
|
+
/**
|
|
33
|
+
* A Toggle Button can be a size of small, medium or large.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare const ToggleButtonSize: {
|
|
37
|
+
readonly small: "small";
|
|
38
|
+
readonly medium: "medium";
|
|
39
|
+
readonly large: "large";
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* A Toggle Button can be on of several preset sizes.
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
export declare type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
|
|
46
|
+
export { ButtonOptions as ToggleButtonOptions };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { FluentDesignSystem } from '../fluent-design-system.js';
|
|
2
|
+
import { AnchorButton } from './anchor-button.js';
|
|
3
|
+
import { styles } from './anchor-button.styles.js';
|
|
4
|
+
import { template } from './anchor-button.template.js';
|
|
5
|
+
/**
|
|
6
|
+
* The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
|
|
7
|
+
* {@link @microsoft/fast-foundation#anchorTemplate}
|
|
8
|
+
*
|
|
9
|
+
* @public
|
|
10
|
+
* @remarks
|
|
11
|
+
* HTML Element: \<fluent-anchor-button\>
|
|
12
|
+
*/
|
|
13
|
+
export const definition = AnchorButton.compose({
|
|
14
|
+
name: `${FluentDesignSystem.prefix}-anchor-button`,
|
|
15
|
+
template,
|
|
16
|
+
styles,
|
|
17
|
+
shadowOptions: {
|
|
18
|
+
delegatesFocus: true,
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=anchor-button.definition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
|
+
import { FASTAnchor } from '@microsoft/fast-foundation';
|
|
4
|
+
/**
|
|
5
|
+
* The base class used for constructing a fluent-anchor-button custom element
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export class AnchorButton extends FASTAnchor {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
/**
|
|
12
|
+
* The anchor button has an icon only, no text content
|
|
13
|
+
*
|
|
14
|
+
* @public
|
|
15
|
+
* @remarks
|
|
16
|
+
* HTML Attribute: icon-only
|
|
17
|
+
*/
|
|
18
|
+
this.iconOnly = false;
|
|
19
|
+
/**
|
|
20
|
+
* The anchor button is disabled
|
|
21
|
+
*
|
|
22
|
+
* @public
|
|
23
|
+
* @remarks
|
|
24
|
+
* HTML Attribute: disabled-focusable
|
|
25
|
+
*/
|
|
26
|
+
this.disabled = false;
|
|
27
|
+
/**
|
|
28
|
+
* The anchor button is disabled but focusable
|
|
29
|
+
*
|
|
30
|
+
* @public
|
|
31
|
+
* @remarks
|
|
32
|
+
* HTML Attribute: disabled-focusable
|
|
33
|
+
*/
|
|
34
|
+
this.disabledFocusable = false;
|
|
35
|
+
/**
|
|
36
|
+
* Prevents disabledFocusable click events
|
|
37
|
+
*/
|
|
38
|
+
this.handleDisabledFocusableClick = (e) => {
|
|
39
|
+
if ((e && this.disabled) || this.disabledFocusable) {
|
|
40
|
+
e.stopImmediatePropagation();
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
disabledChanged(prev, next) {
|
|
46
|
+
if (this.disabled) {
|
|
47
|
+
this.setAttribute('aria-disabled', 'true');
|
|
48
|
+
this.setAttribute('tabindex', '-1');
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
this.removeAttribute('aria-disabled');
|
|
52
|
+
this.removeAttribute('tabindex');
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
disabledFocusableChanged(prev, next) {
|
|
56
|
+
if (!this.$fastController.isConnected) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (this.disabledFocusable) {
|
|
60
|
+
this.setAttribute('aria-disabled', 'true');
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
this.removeAttribute('aria-disabled');
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
connectedCallback() {
|
|
67
|
+
super.connectedCallback();
|
|
68
|
+
this.addEventListener('click', this.handleDisabledFocusableClick);
|
|
69
|
+
}
|
|
70
|
+
disconnectedCallback() {
|
|
71
|
+
super.disconnectedCallback();
|
|
72
|
+
this.removeEventListener('click', this.handleDisabledFocusableClick);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
__decorate([
|
|
76
|
+
attr
|
|
77
|
+
], AnchorButton.prototype, "appearance", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
attr
|
|
80
|
+
], AnchorButton.prototype, "shape", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
attr
|
|
83
|
+
], AnchorButton.prototype, "size", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
attr({ attribute: 'icon-only', mode: 'boolean' })
|
|
86
|
+
], AnchorButton.prototype, "iconOnly", void 0);
|
|
87
|
+
__decorate([
|
|
88
|
+
attr({ mode: 'boolean' })
|
|
89
|
+
], AnchorButton.prototype, "disabled", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
attr({ attribute: 'disabled-focusable', mode: 'boolean' })
|
|
92
|
+
], AnchorButton.prototype, "disabledFocusable", void 0);
|
|
93
|
+
//# sourceMappingURL=anchor-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anchor-button.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAa,KAAK,CAAC;QAWlC;;;;;;WAMG;QAEI,sBAAiB,GAAa,KAAK,CAAC;QAa3C;;WAEG;QACK,iCAA4B,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC7D,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAClD,CAAC,CAAC,wBAAwB,EAAE,CAAC;gBAC7B,OAAO;aACR;QACH,CAAC,CAAC;IAaJ,CAAC;IApDW,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACvE,IAAgC,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACnE;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;YAClE,IAAgC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;SAChE;IACH,CAAC;IAWS,wBAAwB,CAAC,IAAa,EAAE,IAAa;QAC7D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC1E;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACrE;IACH,CAAC;IAYM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAClG,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACrG,CAAC;CACF;AA7FC;IADC,IAAI;gDACkD;AAUvD;IADC,IAAI;2CACwC;AAU7C;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACQ;AAmBlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAChB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
|
|
2
|
+
/**
|
|
3
|
+
* Anchor Button Appearance constants
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export const AnchorButtonAppearance = ButtonAppearance;
|
|
7
|
+
/**
|
|
8
|
+
* An Anchor Button can be square, circular or rounded.
|
|
9
|
+
* @public
|
|
10
|
+
*/
|
|
11
|
+
export const AnchorButtonShape = ButtonShape;
|
|
12
|
+
/**
|
|
13
|
+
* An Anchor Button can be a size of small, medium or large.
|
|
14
|
+
* @public
|
|
15
|
+
*/
|
|
16
|
+
export const AnchorButtonSize = ButtonSize;
|
|
17
|
+
//# sourceMappingURL=anchor-button.options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"anchor-button.options.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAExF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAQvD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;AAQ7C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { styles as ButtonStyles } from '../button/button.styles.js';
|
|
3
|
+
// Need to support icon hover styles
|
|
4
|
+
export const styles = css `
|
|
5
|
+
${ButtonStyles}
|
|
6
|
+
|
|
7
|
+
.content {
|
|
8
|
+
text-align: center;
|
|
9
|
+
}
|
|
10
|
+
`;
|
|
11
|
+
//# sourceMappingURL=anchor-button.styles.js.map
|
|
@@ -0,0 +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,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;CAKf,CAAC"}
|