@spectrum-web-components/button 1.0.1 → 1.0.2

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 (167) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +21 -62
  3. package/package.json +9 -10
  4. package/src/ButtonBase.d.ts +7 -1
  5. package/src/ButtonBase.dev.js +3 -11
  6. package/src/ButtonBase.dev.js.map +2 -2
  7. package/src/ButtonBase.js +3 -3
  8. package/src/ButtonBase.js.map +2 -2
  9. package/LICENSE +0 -201
  10. package/stories/button-accent-fill-pending.stories.js +0 -34
  11. package/stories/button-accent-fill-pending.stories.js.map +0 -7
  12. package/stories/button-accent-fill-sizes.stories.js +0 -32
  13. package/stories/button-accent-fill-sizes.stories.js.map +0 -7
  14. package/stories/button-accent-fill.stories.js +0 -33
  15. package/stories/button-accent-fill.stories.js.map +0 -7
  16. package/stories/button-accent-outline-pending.stories.js +0 -34
  17. package/stories/button-accent-outline-pending.stories.js.map +0 -7
  18. package/stories/button-accent-outline-sizes.stories.js +0 -32
  19. package/stories/button-accent-outline-sizes.stories.js.map +0 -7
  20. package/stories/button-accent-outline.stories.js +0 -33
  21. package/stories/button-accent-outline.stories.js.map +0 -7
  22. package/stories/button-black-fill-pending.stories.js +0 -34
  23. package/stories/button-black-fill-pending.stories.js.map +0 -7
  24. package/stories/button-black-fill-sizes.stories.js +0 -33
  25. package/stories/button-black-fill-sizes.stories.js.map +0 -7
  26. package/stories/button-black-fill.stories.js +0 -35
  27. package/stories/button-black-fill.stories.js.map +0 -7
  28. package/stories/button-black-outline-pending.stories.js +0 -34
  29. package/stories/button-black-outline-pending.stories.js.map +0 -7
  30. package/stories/button-black-outline-sizes.stories.js +0 -33
  31. package/stories/button-black-outline-sizes.stories.js.map +0 -7
  32. package/stories/button-black-outline.stories.js +0 -35
  33. package/stories/button-black-outline.stories.js.map +0 -7
  34. package/stories/button-negative-fill-pending.stories.js +0 -34
  35. package/stories/button-negative-fill-pending.stories.js.map +0 -7
  36. package/stories/button-negative-fill-sizes.stories.js +0 -32
  37. package/stories/button-negative-fill-sizes.stories.js.map +0 -7
  38. package/stories/button-negative-fill.stories.js +0 -33
  39. package/stories/button-negative-fill.stories.js.map +0 -7
  40. package/stories/button-negative-outline-pending.stories.js +0 -34
  41. package/stories/button-negative-outline-pending.stories.js.map +0 -7
  42. package/stories/button-negative-outline-sizes.stories.js +0 -32
  43. package/stories/button-negative-outline-sizes.stories.js.map +0 -7
  44. package/stories/button-negative-outline.stories.js +0 -33
  45. package/stories/button-negative-outline.stories.js.map +0 -7
  46. package/stories/button-primary-fill-pending.stories.js +0 -34
  47. package/stories/button-primary-fill-pending.stories.js.map +0 -7
  48. package/stories/button-primary-fill-sizes.stories.js +0 -32
  49. package/stories/button-primary-fill-sizes.stories.js.map +0 -7
  50. package/stories/button-primary-fill.stories.js +0 -46
  51. package/stories/button-primary-fill.stories.js.map +0 -7
  52. package/stories/button-primary-outline-pending.stories.js +0 -34
  53. package/stories/button-primary-outline-pending.stories.js.map +0 -7
  54. package/stories/button-primary-outline-sizes.stories.js +0 -32
  55. package/stories/button-primary-outline-sizes.stories.js.map +0 -7
  56. package/stories/button-primary-outline.stories.js +0 -33
  57. package/stories/button-primary-outline.stories.js.map +0 -7
  58. package/stories/button-secondary-fill-pending.stories.js +0 -34
  59. package/stories/button-secondary-fill-pending.stories.js.map +0 -7
  60. package/stories/button-secondary-fill-sizes.stories.js +0 -32
  61. package/stories/button-secondary-fill-sizes.stories.js.map +0 -7
  62. package/stories/button-secondary-fill.stories.js +0 -33
  63. package/stories/button-secondary-fill.stories.js.map +0 -7
  64. package/stories/button-secondary-outline-pending.stories.js +0 -34
  65. package/stories/button-secondary-outline-pending.stories.js.map +0 -7
  66. package/stories/button-secondary-outline-sizes.stories.js +0 -32
  67. package/stories/button-secondary-outline-sizes.stories.js.map +0 -7
  68. package/stories/button-secondary-outline.stories.js +0 -33
  69. package/stories/button-secondary-outline.stories.js.map +0 -7
  70. package/stories/button-white-fill-pending.stories.js +0 -34
  71. package/stories/button-white-fill-pending.stories.js.map +0 -7
  72. package/stories/button-white-fill-sizes.stories.js +0 -33
  73. package/stories/button-white-fill-sizes.stories.js.map +0 -7
  74. package/stories/button-white-fill.stories.js +0 -35
  75. package/stories/button-white-fill.stories.js.map +0 -7
  76. package/stories/button-white-outline-pending.stories.js +0 -34
  77. package/stories/button-white-outline-pending.stories.js.map +0 -7
  78. package/stories/button-white-outline-sizes.stories.js +0 -33
  79. package/stories/button-white-outline-sizes.stories.js.map +0 -7
  80. package/stories/button-white-outline.stories.js +0 -35
  81. package/stories/button-white-outline.stories.js.map +0 -7
  82. package/stories/index.js +0 -198
  83. package/stories/index.js.map +0 -7
  84. package/stories/template.js +0 -21
  85. package/stories/template.js.map +0 -7
  86. package/test/benchmark/test-basic.js +0 -14
  87. package/test/benchmark/test-basic.js.map +0 -7
  88. package/test/button-accent-fill-pending.test-vrt.js +0 -5
  89. package/test/button-accent-fill-pending.test-vrt.js.map +0 -7
  90. package/test/button-accent-fill-sizes.test-vrt.js +0 -5
  91. package/test/button-accent-fill-sizes.test-vrt.js.map +0 -7
  92. package/test/button-accent-fill.test-vrt.js +0 -5
  93. package/test/button-accent-fill.test-vrt.js.map +0 -7
  94. package/test/button-accent-outline-pending.test-vrt.js +0 -5
  95. package/test/button-accent-outline-pending.test-vrt.js.map +0 -7
  96. package/test/button-accent-outline-sizes.test-vrt.js +0 -5
  97. package/test/button-accent-outline-sizes.test-vrt.js.map +0 -7
  98. package/test/button-accent-outline.test-vrt.js +0 -5
  99. package/test/button-accent-outline.test-vrt.js.map +0 -7
  100. package/test/button-black-fill-pending.test-vrt.js +0 -5
  101. package/test/button-black-fill-pending.test-vrt.js.map +0 -7
  102. package/test/button-black-fill-sizes.test-vrt.js +0 -5
  103. package/test/button-black-fill-sizes.test-vrt.js.map +0 -7
  104. package/test/button-black-fill.test-vrt.js +0 -5
  105. package/test/button-black-fill.test-vrt.js.map +0 -7
  106. package/test/button-black-outline-pending.test-vrt.js +0 -5
  107. package/test/button-black-outline-pending.test-vrt.js.map +0 -7
  108. package/test/button-black-outline-sizes.test-vrt.js +0 -5
  109. package/test/button-black-outline-sizes.test-vrt.js.map +0 -7
  110. package/test/button-black-outline.test-vrt.js +0 -5
  111. package/test/button-black-outline.test-vrt.js.map +0 -7
  112. package/test/button-memory.test.js +0 -5
  113. package/test/button-memory.test.js.map +0 -7
  114. package/test/button-negative-fill-pending.test-vrt.js +0 -5
  115. package/test/button-negative-fill-pending.test-vrt.js.map +0 -7
  116. package/test/button-negative-fill-sizes.test-vrt.js +0 -5
  117. package/test/button-negative-fill-sizes.test-vrt.js.map +0 -7
  118. package/test/button-negative-fill.test-vrt.js +0 -5
  119. package/test/button-negative-fill.test-vrt.js.map +0 -7
  120. package/test/button-negative-outline-pending.test-vrt.js +0 -5
  121. package/test/button-negative-outline-pending.test-vrt.js.map +0 -7
  122. package/test/button-negative-outline-sizes.test-vrt.js +0 -5
  123. package/test/button-negative-outline-sizes.test-vrt.js.map +0 -7
  124. package/test/button-negative-outline.test-vrt.js +0 -5
  125. package/test/button-negative-outline.test-vrt.js.map +0 -7
  126. package/test/button-primary-fill-pending.test-vrt.js +0 -5
  127. package/test/button-primary-fill-pending.test-vrt.js.map +0 -7
  128. package/test/button-primary-fill-sizes.test-vrt.js +0 -5
  129. package/test/button-primary-fill-sizes.test-vrt.js.map +0 -7
  130. package/test/button-primary-fill.test-vrt.js +0 -5
  131. package/test/button-primary-fill.test-vrt.js.map +0 -7
  132. package/test/button-primary-outline-pending.test-vrt.js +0 -5
  133. package/test/button-primary-outline-pending.test-vrt.js.map +0 -7
  134. package/test/button-primary-outline-sizes.test-vrt.js +0 -5
  135. package/test/button-primary-outline-sizes.test-vrt.js.map +0 -7
  136. package/test/button-primary-outline.test-vrt.js +0 -5
  137. package/test/button-primary-outline.test-vrt.js.map +0 -7
  138. package/test/button-secondary-fill-pending.test-vrt.js +0 -5
  139. package/test/button-secondary-fill-pending.test-vrt.js.map +0 -7
  140. package/test/button-secondary-fill-sizes.test-vrt.js +0 -5
  141. package/test/button-secondary-fill-sizes.test-vrt.js.map +0 -7
  142. package/test/button-secondary-fill.test-vrt.js +0 -5
  143. package/test/button-secondary-fill.test-vrt.js.map +0 -7
  144. package/test/button-secondary-outline-pending.test-vrt.js +0 -5
  145. package/test/button-secondary-outline-pending.test-vrt.js.map +0 -7
  146. package/test/button-secondary-outline-sizes.test-vrt.js +0 -5
  147. package/test/button-secondary-outline-sizes.test-vrt.js.map +0 -7
  148. package/test/button-secondary-outline.test-vrt.js +0 -5
  149. package/test/button-secondary-outline.test-vrt.js.map +0 -7
  150. package/test/button-white-fill-pending.test-vrt.js +0 -5
  151. package/test/button-white-fill-pending.test-vrt.js.map +0 -7
  152. package/test/button-white-fill-sizes.test-vrt.js +0 -5
  153. package/test/button-white-fill-sizes.test-vrt.js.map +0 -7
  154. package/test/button-white-fill.test-vrt.js +0 -5
  155. package/test/button-white-fill.test-vrt.js.map +0 -7
  156. package/test/button-white-outline-pending.test-vrt.js +0 -5
  157. package/test/button-white-outline-pending.test-vrt.js.map +0 -7
  158. package/test/button-white-outline-sizes.test-vrt.js +0 -5
  159. package/test/button-white-outline-sizes.test-vrt.js.map +0 -7
  160. package/test/button-white-outline.test-vrt.js +0 -5
  161. package/test/button-white-outline.test-vrt.js.map +0 -7
  162. package/test/button.test.js +0 -632
  163. package/test/button.test.js.map +0 -7
  164. package/test/clear-button.test.js +0 -27
  165. package/test/clear-button.test.js.map +0 -7
  166. package/test/close-button.test.js +0 -27
  167. package/test/close-button.test.js.map +0 -7
package/README.md CHANGED
@@ -332,7 +332,7 @@ Events handlers for clicks and other user actions can be registered on a
332
332
  <sp-button onclick="spAlert(this, '<sp-button> clicked!')">Click me</sp-button>
333
333
  ```
334
334
 
335
- In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-button>` in place of the `<a>` element by using the `href` and optional `target` attribute.
335
+ In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-button>` in place of the `<a>` HTML element by using the `href` and optional `target` attribute.
336
336
 
337
337
  ```html
338
338
  <sp-button
@@ -128,10 +128,6 @@
128
128
  "type": {
129
129
  "text": "void"
130
130
  }
131
- },
132
- "inheritedFrom": {
133
- "name": "ButtonBase",
134
- "module": "src/ButtonBase.js"
135
131
  }
136
132
  },
137
133
  {
@@ -235,6 +231,7 @@
235
231
  },
236
232
  "privacy": "public",
237
233
  "default": "'button'",
234
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
238
235
  "attribute": "type",
239
236
  "inheritedFrom": {
240
237
  "name": "ButtonBase",
@@ -245,9 +242,10 @@
245
242
  "kind": "field",
246
243
  "name": "anchorElement",
247
244
  "type": {
248
- "text": "HTMLButtonElement"
245
+ "text": "HTMLAnchorElement"
249
246
  },
250
247
  "privacy": "private",
248
+ "description": "HTML anchor element that component clicks by proxy",
251
249
  "inheritedFrom": {
252
250
  "name": "ButtonBase",
253
251
  "module": "src/ButtonBase.js"
@@ -514,6 +512,7 @@
514
512
  "text": "'button' | 'submit' | 'reset'"
515
513
  },
516
514
  "default": "'button'",
515
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
517
516
  "fieldName": "type",
518
517
  "inheritedFrom": {
519
518
  "name": "ButtonBase",
@@ -600,15 +599,17 @@
600
599
  },
601
600
  "privacy": "public",
602
601
  "default": "'button'",
602
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
603
603
  "attribute": "type"
604
604
  },
605
605
  {
606
606
  "kind": "field",
607
607
  "name": "anchorElement",
608
608
  "type": {
609
- "text": "HTMLButtonElement"
609
+ "text": "HTMLAnchorElement"
610
610
  },
611
- "privacy": "private"
611
+ "privacy": "private",
612
+ "description": "HTML anchor element that component clicks by proxy"
612
613
  },
613
614
  {
614
615
  "kind": "field",
@@ -637,16 +638,6 @@
637
638
  "privacy": "protected",
638
639
  "readonly": true
639
640
  },
640
- {
641
- "kind": "method",
642
- "name": "click",
643
- "privacy": "public",
644
- "return": {
645
- "type": {
646
- "text": "void"
647
- }
648
- }
649
- },
650
641
  {
651
642
  "kind": "method",
652
643
  "name": "handleClickCapture",
@@ -785,6 +776,7 @@
785
776
  "text": "'button' | 'submit' | 'reset'"
786
777
  },
787
778
  "default": "'button'",
779
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
788
780
  "fieldName": "type"
789
781
  }
790
782
  ],
@@ -890,6 +882,7 @@
890
882
  },
891
883
  "privacy": "public",
892
884
  "default": "'button'",
885
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
893
886
  "attribute": "type",
894
887
  "inheritedFrom": {
895
888
  "name": "ButtonBase",
@@ -900,9 +893,10 @@
900
893
  "kind": "field",
901
894
  "name": "anchorElement",
902
895
  "type": {
903
- "text": "HTMLButtonElement"
896
+ "text": "HTMLAnchorElement"
904
897
  },
905
898
  "privacy": "private",
899
+ "description": "HTML anchor element that component clicks by proxy",
906
900
  "inheritedFrom": {
907
901
  "name": "ButtonBase",
908
902
  "module": "src/ButtonBase.js"
@@ -934,20 +928,6 @@
934
928
  "module": "src/ButtonBase.js"
935
929
  }
936
930
  },
937
- {
938
- "kind": "method",
939
- "name": "click",
940
- "privacy": "public",
941
- "return": {
942
- "type": {
943
- "text": "void"
944
- }
945
- },
946
- "inheritedFrom": {
947
- "name": "ButtonBase",
948
- "module": "src/ButtonBase.js"
949
- }
950
- },
951
931
  {
952
932
  "kind": "method",
953
933
  "name": "handleClickCapture",
@@ -1135,6 +1115,7 @@
1135
1115
  "text": "'button' | 'submit' | 'reset'"
1136
1116
  },
1137
1117
  "default": "'button'",
1118
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
1138
1119
  "fieldName": "type",
1139
1120
  "inheritedFrom": {
1140
1121
  "name": "ButtonBase",
@@ -1252,6 +1233,7 @@
1252
1233
  },
1253
1234
  "privacy": "public",
1254
1235
  "default": "'button'",
1236
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
1255
1237
  "attribute": "type",
1256
1238
  "inheritedFrom": {
1257
1239
  "name": "ButtonBase",
@@ -1262,9 +1244,10 @@
1262
1244
  "kind": "field",
1263
1245
  "name": "anchorElement",
1264
1246
  "type": {
1265
- "text": "HTMLButtonElement"
1247
+ "text": "HTMLAnchorElement"
1266
1248
  },
1267
1249
  "privacy": "private",
1250
+ "description": "HTML anchor element that component clicks by proxy",
1268
1251
  "inheritedFrom": {
1269
1252
  "name": "ButtonBase",
1270
1253
  "module": "src/ButtonBase.js"
@@ -1296,20 +1279,6 @@
1296
1279
  "module": "src/ButtonBase.js"
1297
1280
  }
1298
1281
  },
1299
- {
1300
- "kind": "method",
1301
- "name": "click",
1302
- "privacy": "public",
1303
- "return": {
1304
- "type": {
1305
- "text": "void"
1306
- }
1307
- },
1308
- "inheritedFrom": {
1309
- "name": "ButtonBase",
1310
- "module": "src/ButtonBase.js"
1311
- }
1312
- },
1313
1282
  {
1314
1283
  "kind": "method",
1315
1284
  "name": "handleClickCapture",
@@ -1504,6 +1473,7 @@
1504
1473
  "text": "'button' | 'submit' | 'reset'"
1505
1474
  },
1506
1475
  "default": "'button'",
1476
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
1507
1477
  "fieldName": "type",
1508
1478
  "inheritedFrom": {
1509
1479
  "name": "ButtonBase",
@@ -1585,6 +1555,7 @@
1585
1555
  "text": "'button' | 'submit' | 'reset'"
1586
1556
  },
1587
1557
  "default": "'button'",
1558
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
1588
1559
  "fieldName": "type",
1589
1560
  "inheritedFrom": {
1590
1561
  "name": "ButtonBase",
@@ -1616,6 +1587,7 @@
1616
1587
  },
1617
1588
  "privacy": "public",
1618
1589
  "default": "'button'",
1590
+ "description": "The default behavior of the button.\nPossible values are: `button` (default), `submit`, and `reset`.",
1619
1591
  "attribute": "type",
1620
1592
  "inheritedFrom": {
1621
1593
  "name": "ButtonBase",
@@ -1626,9 +1598,10 @@
1626
1598
  "kind": "field",
1627
1599
  "name": "anchorElement",
1628
1600
  "type": {
1629
- "text": "HTMLButtonElement"
1601
+ "text": "HTMLAnchorElement"
1630
1602
  },
1631
1603
  "privacy": "private",
1604
+ "description": "HTML anchor element that component clicks by proxy",
1632
1605
  "inheritedFrom": {
1633
1606
  "name": "ButtonBase",
1634
1607
  "module": "src/ButtonBase.js"
@@ -1673,20 +1646,6 @@
1673
1646
  "module": "src/ButtonBase.js"
1674
1647
  }
1675
1648
  },
1676
- {
1677
- "kind": "method",
1678
- "name": "click",
1679
- "privacy": "public",
1680
- "return": {
1681
- "type": {
1682
- "text": "void"
1683
- }
1684
- },
1685
- "inheritedFrom": {
1686
- "name": "ButtonBase",
1687
- "module": "src/ButtonBase.js"
1688
- }
1689
- },
1690
1649
  {
1691
1650
  "kind": "method",
1692
1651
  "name": "handleClickCapture",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/button",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -83,13 +83,13 @@
83
83
  "lit-html"
84
84
  ],
85
85
  "dependencies": {
86
- "@spectrum-web-components/base": "^1.0.1",
87
- "@spectrum-web-components/clear-button": "^1.0.1",
88
- "@spectrum-web-components/close-button": "^1.0.1",
89
- "@spectrum-web-components/icon": "^1.0.1",
90
- "@spectrum-web-components/icons-ui": "^1.0.1",
91
- "@spectrum-web-components/progress-circle": "^1.0.1",
92
- "@spectrum-web-components/shared": "^1.0.1"
86
+ "@spectrum-web-components/base": "^1.0.2",
87
+ "@spectrum-web-components/clear-button": "^1.0.2",
88
+ "@spectrum-web-components/close-button": "^1.0.2",
89
+ "@spectrum-web-components/icon": "^1.0.2",
90
+ "@spectrum-web-components/icons-ui": "^1.0.2",
91
+ "@spectrum-web-components/progress-circle": "^1.0.2",
92
+ "@spectrum-web-components/shared": "^1.0.2"
93
93
  },
94
94
  "devDependencies": {
95
95
  "@spectrum-css/button": "^14.0.0-s2-foundations.18"
@@ -99,6 +99,5 @@
99
99
  "sideEffects": [
100
100
  "./sp-*.js",
101
101
  "./**/*.dev.js"
102
- ],
103
- "gitHead": "b359bc0242712be118c5e3e2cc05f88707d3eeb1"
102
+ ]
104
103
  }
@@ -14,13 +14,19 @@ declare const ButtonBase_base: typeof Focusable & {
14
14
  export declare class ButtonBase extends ButtonBase_base {
15
15
  static get styles(): CSSResultArray;
16
16
  active: boolean;
17
+ /**
18
+ * The default behavior of the button.
19
+ * Possible values are: `button` (default), `submit`, and `reset`.
20
+ */
17
21
  type: 'button' | 'submit' | 'reset';
22
+ /**
23
+ * HTML anchor element that component clicks by proxy
24
+ */
18
25
  private anchorElement;
19
26
  get focusElement(): HTMLElement;
20
27
  protected get hasLabel(): boolean;
21
28
  protected get buttonContent(): TemplateResult[];
22
29
  constructor();
23
- click(): void;
24
30
  private handleClickCapture;
25
31
  private proxyFocus;
26
32
  private shouldProxyClick;
@@ -54,15 +54,6 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
54
54
  ];
55
55
  return content;
56
56
  }
57
- click() {
58
- if (this.disabled) {
59
- return;
60
- }
61
- if (this.shouldProxyClick()) {
62
- return;
63
- }
64
- super.click();
65
- }
66
57
  handleClickCapture(event) {
67
58
  if (this.disabled) {
68
59
  event.preventDefault();
@@ -70,6 +61,9 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
70
61
  event.stopPropagation();
71
62
  return false;
72
63
  }
64
+ if (this.shouldProxyClick()) {
65
+ return;
66
+ }
73
67
  }
74
68
  proxyFocus() {
75
69
  this.focus();
@@ -149,12 +143,10 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
149
143
  if (!this.hasAttribute("role") || this.getAttribute("role") === "button") {
150
144
  this.setAttribute("role", "link");
151
145
  }
152
- this.removeEventListener("click", this.shouldProxyClick);
153
146
  } else {
154
147
  if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
155
148
  this.setAttribute("role", "button");
156
149
  }
157
- this.addEventListener("click", this.shouldProxyClick);
158
150
  }
159
151
  }
160
152
  firstUpdated(changed) {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ButtonBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n\n super.click();\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n this.anchorElement.click();\n handled = true;\n } else if (this.type !== 'button') {\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n if (this.href && this.href.length > 0) {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n this.setAttribute('role', 'link');\n }\n this.removeEventListener('click', this.shouldProxyClick);\n } else {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n this.setAttribute('role', 'button');\n }\n this.addEventListener('click', this.shouldProxyClick);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n // click HTML anchor element by proxy\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/ButtonBase.js CHANGED
@@ -1,13 +1,13 @@
1
- "use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?u(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as c}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as p}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import v from"./button-base.css.js";export class ButtonBase extends f(p(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[v]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
1
+ "use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?u(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as p}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as c}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import m from"./button-base.css.js";export class ButtonBase extends f(c(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[m]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
2
2
  <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
3
3
  `,o`
4
4
  <span id="label">
5
5
  <slot @slotchange=${this.manageTextObservedSlot}></slot>
6
6
  </span>
7
- `]}click(){this.disabled||this.shouldProxyClick()||super.click()}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return o`
7
+ `]}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick()}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return o`
8
8
  ${this.buttonContent}
9
9
  ${super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"})}
10
10
  `}renderButton(){return o`
11
11
  ${this.buttonContent}
12
- `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?((!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"),this.removeEventListener("click",this.shouldProxyClick)):((!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button"),this.addEventListener("click",this.shouldProxyClick))}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([c(".anchor")],ButtonBase.prototype,"anchorElement",2);
12
+ `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?(!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"):(!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button")}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([p(".anchor")],ButtonBase.prototype,"anchorElement",2);
13
13
  //# sourceMappingURL=ButtonBase.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ButtonBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n @query('.anchor')\n private anchorElement!: HTMLButtonElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n\n super.click();\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n this.anchorElement.click();\n handled = true;\n } else if (this.type !== 'button') {\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n if (this.href && this.href.length > 0) {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n this.setAttribute('role', 'link');\n }\n this.removeEventListener('click', this.shouldProxyClick);\n } else {\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n this.setAttribute('role', 'button');\n }\n this.addEventListener('click', this.shouldProxyClick);\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
- "mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,cAAAC,MAAkB,qDAC3B,OAAS,aAAAC,MAAiB,mDAC1B,OAAS,mBAAAC,MAAuB,2DAChC,OAAOC,MAAkB,uBAMlB,aAAM,mBAAmBD,EAAgBF,EAAWC,CAAS,EAAG,GAAI,CACvE,uBACJ,CAAC,CAAE,CAoCC,aAAc,CACV,MAAM,EA/BV,KAAO,OAAS,GAGhB,KAAO,KAAsC,SA6BzC,KAAK,WAAa,KAAK,WAAW,KAAK,IAAI,EAE3C,KAAK,iBAAiB,QAAS,KAAK,mBAAoB,CACpD,QAAS,EACb,CAAC,CACL,CA1CA,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAY,CACxB,CAWA,IAAoB,cAA4B,CAC5C,OAAO,IACX,CAEA,IAAc,UAAoB,CAC9B,OAAO,KAAK,cAChB,CAEA,IAAc,eAAkC,CAW5C,MAVgB,CACZN;AAAA,+CACmC,CAAC,KAAK,QAAQ;AAAA,cAEjDA;AAAA;AAAA,wCAE4B,KAAK,sBAAsB;AAAA;AAAA,aAG3D,CAEJ,CAWgB,OAAc,CACtB,KAAK,UAIL,KAAK,iBAAiB,GAI1B,MAAM,MAAM,CAChB,CAEQ,mBAAmBO,EAA8B,CACrD,GAAI,KAAK,SACL,OAAAA,EAAM,eAAe,EACrBA,EAAM,yBAAyB,EAC/BA,EAAM,gBAAgB,EACf,EAEf,CAEQ,YAAmB,CACvB,KAAK,MAAM,CACf,CAEQ,kBAA4B,CAChC,IAAIC,EAAU,GACd,GAAI,KAAK,cACL,KAAK,cAAc,MAAM,EACzBA,EAAU,WACH,KAAK,OAAS,SAAU,CAC/B,MAAMC,EAAQ,SAAS,cAAc,QAAQ,EAC7CA,EAAM,KAAO,KAAK,KAClB,KAAK,sBAAsB,WAAYA,CAAK,EAC5CA,EAAM,MAAM,EACZA,EAAM,OAAO,EACbD,EAAU,EACd,CACA,OAAOA,CACX,CAEgB,cAA+B,CAC3C,OAAOR;AAAA,cACD,KAAK,aAAa;AAAA,cAClB,MAAM,aAAa,CACjB,GAAI,SACJ,WAAY,GACZ,UAAW,sBACf,CAAC,CAAC;AAAA,SAEV,CAEU,cAA+B,CACrC,OAAOA;AAAA,cACD,KAAK,aAAa;AAAA,SAE5B,CAEmB,QAAyB,CACxC,OAAO,KAAK,MAAQ,KAAK,KAAK,OAAS,EACjC,KAAK,aAAa,EAClB,KAAK,aAAa,CAC5B,CAEU,cAAcO,EAA4B,CAChD,KAAM,CAAE,KAAAG,CAAK,EAAIH,EACjB,OAAQG,EAAM,CACV,IAAK,QACDH,EAAM,eAAe,EACjB,OAAO,KAAK,MAAS,cACrB,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,OAAS,IAElB,MACJ,QACI,KACR,CACJ,CAEQ,eAAeA,EAA4B,CAC/C,KAAM,CAAE,KAAAG,CAAK,EAAIH,EACjB,OAAQG,EAAM,CACV,IAAK,QACL,IAAK,cACD,KAAK,MAAM,EACX,MACJ,QACI,KACR,CACJ,CAEU,YAAYH,EAA4B,CAC9C,KAAM,CAAE,KAAAG,CAAK,EAAIH,EACjB,OAAQG,EAAM,CACV,IAAK,QACD,KAAK,oBAAoB,QAAS,KAAK,WAAW,EAClD,KAAK,OAAS,GACd,KAAK,MAAM,EACX,MACJ,QACI,KACR,CACJ,CAEQ,cAAqB,CACrB,KAAK,MAAQ,KAAK,KAAK,OAAS,IAE5B,CAAC,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,MAAM,IAAM,WAE9B,KAAK,aAAa,OAAQ,MAAM,EAEpC,KAAK,oBAAoB,QAAS,KAAK,gBAAgB,KAGnD,CAAC,KAAK,aAAa,MAAM,GACzB,KAAK,aAAa,MAAM,IAAM,SAE9B,KAAK,aAAa,OAAQ,QAAQ,EAEtC,KAAK,iBAAiB,QAAS,KAAK,gBAAgB,EAE5D,CAEmB,aAAaC,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,UAAU,GAC7B,KAAK,aAAa,WAAY,GAAG,EAEjCA,EAAQ,IAAI,OAAO,IACf,KAAK,MACL,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1C,KAAK,gBAAgB,YAAY,GAGzC,KAAK,aAAa,EAClB,KAAK,iBAAiB,UAAW,KAAK,aAAa,EACnD,KAAK,iBAAiB,WAAY,KAAK,cAAc,CACzD,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,MAAM,GAClB,KAAK,aAAa,EAGlB,KAAK,gBACL,KAAK,cAAc,iBAAiB,QAAS,KAAK,UAAU,EAC5D,KAAK,cAAc,SAAW,GAEtC,CACmB,OAAOC,EAA+B,CACrD,MAAM,OAAOA,CAAO,EAChBA,EAAQ,IAAI,OAAO,IACf,KAAK,MACL,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1C,KAAK,gBAAgB,YAAY,EAG7C,CACJ,CAzMWC,EAAA,CADNZ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAPjC,WAQF,sBAGAY,EAAA,CADNZ,EAAS,CAAE,KAAM,MAAO,CAAC,GAVjB,WAWF,oBAGCY,EAAA,CADPX,EAAM,SAAS,GAbP,WAcD",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n // click HTML anchor element by proxy\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["html", "property", "query", "LikeAnchor", "Focusable", "ObserveSlotText", "buttonStyles", "event", "handled", "proxy", "code", "changed", "changes", "__decorateClass"]
7
7
  }