@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.
Files changed (78) hide show
  1. package/CHANGELOG.json +58 -1
  2. package/CHANGELOG.md +22 -2
  3. package/dist/dts/anchor-button/anchor-button.d.ts +64 -0
  4. package/dist/dts/anchor-button/anchor-button.definition.d.ts +10 -0
  5. package/dist/dts/anchor-button/anchor-button.options.d.ts +46 -0
  6. package/dist/dts/anchor-button/anchor-button.styles.d.ts +1 -0
  7. package/dist/dts/anchor-button/anchor-button.template.d.ts +7 -0
  8. package/dist/dts/anchor-button/define.d.ts +1 -0
  9. package/dist/dts/anchor-button/index.d.ts +4 -0
  10. package/dist/dts/compound-button/compound-button.d.ts +7 -0
  11. package/dist/dts/compound-button/compound-button.definition.d.ts +10 -0
  12. package/dist/dts/compound-button/compound-button.options.d.ts +50 -0
  13. package/dist/dts/compound-button/compound-button.styles.d.ts +1 -0
  14. package/dist/dts/compound-button/compound-button.template.d.ts +13 -0
  15. package/dist/dts/compound-button/define.d.ts +1 -0
  16. package/dist/dts/compound-button/index.d.ts +5 -0
  17. package/dist/dts/index.d.ts +3 -0
  18. package/dist/dts/toggle-button/define.d.ts +1 -0
  19. package/dist/dts/toggle-button/index.d.ts +5 -0
  20. package/dist/dts/toggle-button/toggle-button.d.ts +48 -0
  21. package/dist/dts/toggle-button/toggle-button.definition.d.ts +10 -0
  22. package/dist/dts/toggle-button/toggle-button.options.d.ts +46 -0
  23. package/dist/dts/toggle-button/toggle-button.styles.d.ts +1 -0
  24. package/dist/dts/toggle-button/toggle-button.template.d.ts +7 -0
  25. package/dist/esm/anchor-button/anchor-button.definition.js +21 -0
  26. package/dist/esm/anchor-button/anchor-button.definition.js.map +1 -0
  27. package/dist/esm/anchor-button/anchor-button.js +93 -0
  28. package/dist/esm/anchor-button/anchor-button.js.map +1 -0
  29. package/dist/esm/anchor-button/anchor-button.options.js +17 -0
  30. package/dist/esm/anchor-button/anchor-button.options.js.map +1 -0
  31. package/dist/esm/anchor-button/anchor-button.styles.js +11 -0
  32. package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -0
  33. package/dist/esm/anchor-button/anchor-button.template.js +7 -0
  34. package/dist/esm/anchor-button/anchor-button.template.js.map +1 -0
  35. package/dist/esm/anchor-button/define.js +4 -0
  36. package/dist/esm/anchor-button/define.js.map +1 -0
  37. package/dist/esm/anchor-button/index.js +5 -0
  38. package/dist/esm/anchor-button/index.js.map +1 -0
  39. package/dist/esm/button/button.styles.js +1 -0
  40. package/dist/esm/button/button.styles.js.map +1 -1
  41. package/dist/esm/compound-button/compound-button.definition.js +21 -0
  42. package/dist/esm/compound-button/compound-button.definition.js.map +1 -0
  43. package/dist/esm/compound-button/compound-button.js +8 -0
  44. package/dist/esm/compound-button/compound-button.js.map +1 -0
  45. package/dist/esm/compound-button/compound-button.options.js +17 -0
  46. package/dist/esm/compound-button/compound-button.options.js.map +1 -0
  47. package/dist/esm/compound-button/compound-button.styles.js +105 -0
  48. package/dist/esm/compound-button/compound-button.styles.js.map +1 -0
  49. package/dist/esm/compound-button/compound-button.template.js +60 -0
  50. package/dist/esm/compound-button/compound-button.template.js.map +1 -0
  51. package/dist/esm/compound-button/define.js +4 -0
  52. package/dist/esm/compound-button/define.js.map +1 -0
  53. package/dist/esm/compound-button/index.js +6 -0
  54. package/dist/esm/compound-button/index.js.map +1 -0
  55. package/dist/esm/image/image.styles.js +4 -1
  56. package/dist/esm/image/image.styles.js.map +1 -1
  57. package/dist/esm/index.js +3 -0
  58. package/dist/esm/index.js.map +1 -1
  59. package/dist/esm/toggle-button/define.js +4 -0
  60. package/dist/esm/toggle-button/define.js.map +1 -0
  61. package/dist/esm/toggle-button/index.js +6 -0
  62. package/dist/esm/toggle-button/index.js.map +1 -0
  63. package/dist/esm/toggle-button/toggle-button.definition.js +21 -0
  64. package/dist/esm/toggle-button/toggle-button.definition.js.map +1 -0
  65. package/dist/esm/toggle-button/toggle-button.js +99 -0
  66. package/dist/esm/toggle-button/toggle-button.js.map +1 -0
  67. package/dist/esm/toggle-button/toggle-button.options.js +17 -0
  68. package/dist/esm/toggle-button/toggle-button.options.js.map +1 -0
  69. package/dist/esm/toggle-button/toggle-button.styles.js +83 -0
  70. package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -0
  71. package/dist/esm/toggle-button/toggle-button.template.js +7 -0
  72. package/dist/esm/toggle-button/toggle-button.template.js.map +1 -0
  73. package/dist/fluent-web-components.api.json +3168 -1471
  74. package/dist/web-components.d.ts +330 -0
  75. package/dist/web-components.js +488 -117
  76. package/dist/web-components.min.js +158 -146
  77. package/docs/api-report.md +173 -0
  78. 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": "Tue, 11 Apr 2023 04:24:52 GMT",
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 Tue, 11 Apr 2023 04:24:52 GMT and should not be manually modified.
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:52 GMT
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,7 @@
1
+ import { ElementViewTemplate } from '@microsoft/fast-element';
2
+ import type { AnchorButton } from './anchor-button.js';
3
+ /**
4
+ * The template for the Button component.
5
+ * @public
6
+ */
7
+ export declare const template: ElementViewTemplate<AnchorButton>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ export * from './anchor-button.js';
2
+ export * from './anchor-button.options.js';
3
+ export { template as AnchorButtonTemplate } from './anchor-button.template.js';
4
+ export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
@@ -0,0 +1,7 @@
1
+ import { Button } from '../button/button.js';
2
+ /**
3
+ * The base class used for constructing a fluent-compound-button custom element
4
+ * @public
5
+ */
6
+ export declare class CompoundButton extends Button {
7
+ }
@@ -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';
@@ -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,7 @@
1
+ import { ElementViewTemplate } from '@microsoft/fast-element';
2
+ import type { ToggleButton } from './toggle-button.js';
3
+ /**
4
+ * The template for the ToggleButton component.
5
+ * @public
6
+ */
7
+ export declare const template: ElementViewTemplate<ToggleButton>;
@@ -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"}