@politiet/sheriff-web-components 0.1.4 → 0.6.0

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 (238) hide show
  1. package/README.md +2 -52
  2. package/dist/index.d.ts +15 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +15 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/react-wrappers/SDSButtonWrapper.d.ts +2 -0
  7. package/dist/react-wrappers/SDSButtonWrapper.d.ts.map +1 -1
  8. package/dist/react-wrappers/SDSButtonWrapper.js +2 -0
  9. package/dist/react-wrappers/SDSButtonWrapper.js.map +1 -1
  10. package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts +5 -0
  11. package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts.map +1 -0
  12. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +12 -0
  13. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -0
  14. package/dist/react-wrappers/SDSCheckboxWrapper.d.ts +7 -0
  15. package/dist/react-wrappers/SDSCheckboxWrapper.d.ts.map +1 -0
  16. package/dist/react-wrappers/SDSCheckboxWrapper.js +14 -0
  17. package/dist/react-wrappers/SDSCheckboxWrapper.js.map +1 -0
  18. package/dist/react-wrappers/SDSChipWrapper.d.ts +6 -0
  19. package/dist/react-wrappers/SDSChipWrapper.d.ts.map +1 -0
  20. package/dist/react-wrappers/SDSChipWrapper.js +13 -0
  21. package/dist/react-wrappers/SDSChipWrapper.js.map +1 -0
  22. package/dist/react-wrappers/SDSDetailWrapper.d.ts +3 -0
  23. package/dist/react-wrappers/SDSDetailWrapper.d.ts.map +1 -0
  24. package/dist/react-wrappers/SDSDetailWrapper.js +10 -0
  25. package/dist/react-wrappers/SDSDetailWrapper.js.map +1 -0
  26. package/dist/react-wrappers/SDSHeadingWrapper.d.ts +3 -0
  27. package/dist/react-wrappers/SDSHeadingWrapper.d.ts.map +1 -0
  28. package/dist/react-wrappers/SDSHeadingWrapper.js +10 -0
  29. package/dist/react-wrappers/SDSHeadingWrapper.js.map +1 -0
  30. package/dist/react-wrappers/SDSIconWrapper.d.ts +3 -0
  31. package/dist/react-wrappers/SDSIconWrapper.d.ts.map +1 -0
  32. package/dist/react-wrappers/SDSIconWrapper.js +10 -0
  33. package/dist/react-wrappers/SDSIconWrapper.js.map +1 -0
  34. package/dist/react-wrappers/SDSLabelWrapper.d.ts +3 -0
  35. package/dist/react-wrappers/SDSLabelWrapper.d.ts.map +1 -0
  36. package/dist/react-wrappers/SDSLabelWrapper.js +10 -0
  37. package/dist/react-wrappers/SDSLabelWrapper.js.map +1 -0
  38. package/dist/react-wrappers/SDSLinkWrapper.d.ts +3 -0
  39. package/dist/react-wrappers/SDSLinkWrapper.d.ts.map +1 -0
  40. package/dist/react-wrappers/SDSLinkWrapper.js +10 -0
  41. package/dist/react-wrappers/SDSLinkWrapper.js.map +1 -0
  42. package/dist/react-wrappers/SDSLoaderWrapper.d.ts +3 -0
  43. package/dist/react-wrappers/SDSLoaderWrapper.d.ts.map +1 -0
  44. package/dist/react-wrappers/SDSLoaderWrapper.js +10 -0
  45. package/dist/react-wrappers/SDSLoaderWrapper.js.map +1 -0
  46. package/dist/react-wrappers/SDSNotificationWrapper.d.ts +5 -0
  47. package/dist/react-wrappers/SDSNotificationWrapper.d.ts.map +1 -0
  48. package/dist/react-wrappers/SDSNotificationWrapper.js +12 -0
  49. package/dist/react-wrappers/SDSNotificationWrapper.js.map +1 -0
  50. package/dist/react-wrappers/SDSParagraphWrapper.d.ts +3 -0
  51. package/dist/react-wrappers/SDSParagraphWrapper.d.ts.map +1 -0
  52. package/dist/react-wrappers/SDSParagraphWrapper.js +10 -0
  53. package/dist/react-wrappers/SDSParagraphWrapper.js.map +1 -0
  54. package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +5 -0
  55. package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts.map +1 -0
  56. package/dist/react-wrappers/SDSRadioGroupWrapper.js +12 -0
  57. package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -0
  58. package/dist/react-wrappers/SDSRadioWrapper.d.ts +7 -0
  59. package/dist/react-wrappers/SDSRadioWrapper.d.ts.map +1 -0
  60. package/dist/react-wrappers/SDSRadioWrapper.js +14 -0
  61. package/dist/react-wrappers/SDSRadioWrapper.js.map +1 -0
  62. package/dist/react-wrappers/SDSSwitchWrapper.d.ts +7 -0
  63. package/dist/react-wrappers/SDSSwitchWrapper.d.ts.map +1 -0
  64. package/dist/react-wrappers/SDSSwitchWrapper.js +14 -0
  65. package/dist/react-wrappers/SDSSwitchWrapper.js.map +1 -0
  66. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts +9 -0
  67. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts.map +1 -0
  68. package/dist/react-wrappers/SDSTextFieldWrapper.js +16 -0
  69. package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -0
  70. package/dist/react-wrappers/SDSTextWrapper.d.ts +3 -0
  71. package/dist/react-wrappers/SDSTextWrapper.d.ts.map +1 -0
  72. package/dist/react-wrappers/SDSTextWrapper.js +10 -0
  73. package/dist/react-wrappers/SDSTextWrapper.js.map +1 -0
  74. package/dist/react-wrappers/index.d.ts +19 -0
  75. package/dist/react-wrappers/index.d.ts.map +1 -0
  76. package/dist/react-wrappers/index.js +19 -0
  77. package/dist/react-wrappers/index.js.map +1 -0
  78. package/dist/sds-button/sds-button.d.ts +11 -3
  79. package/dist/sds-button/sds-button.d.ts.map +1 -1
  80. package/dist/sds-button/sds-button.js +83 -13
  81. package/dist/sds-button/sds-button.js.map +1 -1
  82. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  83. package/dist/sds-button/sds-button.styles.js +41 -10
  84. package/dist/sds-button/sds-button.styles.js.map +1 -1
  85. package/dist/sds-checkbox/sds-checkbox.d.ts +26 -0
  86. package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -0
  87. package/dist/sds-checkbox/sds-checkbox.js +116 -0
  88. package/dist/sds-checkbox/sds-checkbox.js.map +1 -0
  89. package/dist/sds-checkbox/sds-checkbox.styles.d.ts +2 -0
  90. package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -0
  91. package/dist/sds-checkbox/sds-checkbox.styles.js +110 -0
  92. package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -0
  93. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +18 -0
  94. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -0
  95. package/dist/sds-checkbox-group/sds-checkbox-group.js +75 -0
  96. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -0
  97. package/dist/sds-checkbox-group/sds-checkbox-group.styles.d.ts +2 -0
  98. package/dist/sds-checkbox-group/sds-checkbox-group.styles.d.ts.map +1 -0
  99. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +52 -0
  100. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -0
  101. package/dist/sds-chip/sds-chip.d.ts +15 -10
  102. package/dist/sds-chip/sds-chip.d.ts.map +1 -1
  103. package/dist/sds-chip/sds-chip.js +60 -70
  104. package/dist/sds-chip/sds-chip.js.map +1 -1
  105. package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
  106. package/dist/sds-chip/sds-chip.styles.js +42 -75
  107. package/dist/sds-chip/sds-chip.styles.js.map +1 -1
  108. package/dist/sds-detail/sds-detail.d.ts +14 -0
  109. package/dist/sds-detail/sds-detail.d.ts.map +1 -0
  110. package/dist/sds-detail/sds-detail.js +36 -0
  111. package/dist/sds-detail/sds-detail.js.map +1 -0
  112. package/dist/sds-detail/sds-detail.styles.d.ts +2 -0
  113. package/dist/sds-detail/sds-detail.styles.d.ts.map +1 -0
  114. package/dist/sds-detail/sds-detail.styles.js +25 -0
  115. package/dist/sds-detail/sds-detail.styles.js.map +1 -0
  116. package/dist/sds-heading/sds-heading.d.ts +16 -0
  117. package/dist/sds-heading/sds-heading.d.ts.map +1 -0
  118. package/dist/sds-heading/sds-heading.js +57 -0
  119. package/dist/sds-heading/sds-heading.js.map +1 -0
  120. package/dist/sds-heading/sds-heading.styles.d.ts +2 -0
  121. package/dist/sds-heading/sds-heading.styles.d.ts.map +1 -0
  122. package/dist/sds-heading/sds-heading.styles.js +105 -0
  123. package/dist/sds-heading/sds-heading.styles.js.map +1 -0
  124. package/dist/sds-icon/sds-icon-loader.d.ts +7 -0
  125. package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -0
  126. package/dist/sds-icon/sds-icon-loader.js +26 -0
  127. package/dist/sds-icon/sds-icon-loader.js.map +1 -0
  128. package/dist/sds-icon/sds-icon.allowed-colors.d.ts +3 -0
  129. package/dist/sds-icon/sds-icon.allowed-colors.d.ts.map +1 -0
  130. package/dist/sds-icon/sds-icon.allowed-colors.js +17 -0
  131. package/dist/sds-icon/sds-icon.allowed-colors.js.map +1 -0
  132. package/dist/sds-icon/sds-icon.allowed-names.d.ts +3 -0
  133. package/dist/sds-icon/sds-icon.allowed-names.d.ts.map +1 -0
  134. package/dist/sds-icon/sds-icon.allowed-names.js +2 -0
  135. package/dist/sds-icon/sds-icon.allowed-names.js.map +1 -0
  136. package/dist/sds-icon/sds-icon.color-types.d.ts +2 -0
  137. package/dist/sds-icon/sds-icon.color-types.d.ts.map +1 -0
  138. package/dist/sds-icon/sds-icon.color-types.js +2 -0
  139. package/dist/sds-icon/sds-icon.color-types.js.map +1 -0
  140. package/dist/sds-icon/sds-icon.d.ts +27 -0
  141. package/dist/sds-icon/sds-icon.d.ts.map +1 -0
  142. package/dist/sds-icon/sds-icon.icon-types.d.ts +2 -0
  143. package/dist/sds-icon/sds-icon.icon-types.d.ts.map +1 -0
  144. package/dist/sds-icon/sds-icon.icon-types.js +2 -0
  145. package/dist/sds-icon/sds-icon.icon-types.js.map +1 -0
  146. package/dist/sds-icon/sds-icon.js +83 -0
  147. package/dist/sds-icon/sds-icon.js.map +1 -0
  148. package/dist/sds-icon/sds-icon.styles.d.ts +2 -0
  149. package/dist/sds-icon/sds-icon.styles.d.ts.map +1 -0
  150. package/dist/sds-icon/sds-icon.styles.js +15 -0
  151. package/dist/sds-icon/sds-icon.styles.js.map +1 -0
  152. package/dist/sds-label/sds-label.d.ts +15 -0
  153. package/dist/sds-label/sds-label.d.ts.map +1 -0
  154. package/dist/sds-label/sds-label.js +43 -0
  155. package/dist/sds-label/sds-label.js.map +1 -0
  156. package/dist/sds-label/sds-label.styles.d.ts +2 -0
  157. package/dist/sds-label/sds-label.styles.d.ts.map +1 -0
  158. package/dist/sds-label/sds-label.styles.js +31 -0
  159. package/dist/sds-label/sds-label.styles.js.map +1 -0
  160. package/dist/sds-link/sds-link.d.ts +17 -0
  161. package/dist/sds-link/sds-link.d.ts.map +1 -0
  162. package/dist/sds-link/sds-link.js +45 -0
  163. package/dist/sds-link/sds-link.js.map +1 -0
  164. package/dist/sds-link/sds-link.styles.d.ts +2 -0
  165. package/dist/sds-link/sds-link.styles.d.ts.map +1 -0
  166. package/dist/sds-link/sds-link.styles.js +74 -0
  167. package/dist/sds-link/sds-link.styles.js.map +1 -0
  168. package/dist/sds-loader/sds-loader.d.ts +16 -0
  169. package/dist/sds-loader/sds-loader.d.ts.map +1 -0
  170. package/dist/sds-loader/sds-loader.js +39 -0
  171. package/dist/sds-loader/sds-loader.js.map +1 -0
  172. package/dist/sds-loader/sds-loader.styles.d.ts +2 -0
  173. package/dist/sds-loader/sds-loader.styles.d.ts.map +1 -0
  174. package/dist/sds-loader/sds-loader.styles.js +39 -0
  175. package/dist/sds-loader/sds-loader.styles.js.map +1 -0
  176. package/dist/sds-nav-card/sds-nav-card.d.ts +1 -2
  177. package/dist/sds-nav-card/sds-nav-card.d.ts.map +1 -1
  178. package/dist/sds-nav-card/sds-nav-card.js +6 -11
  179. package/dist/sds-nav-card/sds-nav-card.js.map +1 -1
  180. package/dist/sds-nav-card/sds-nav-card.styles.js +1 -1
  181. package/dist/sds-nav-card/sds-nav-card.styles.js.map +1 -1
  182. package/dist/sds-notification/sds-notification.d.ts +17 -0
  183. package/dist/sds-notification/sds-notification.d.ts.map +1 -0
  184. package/dist/sds-notification/sds-notification.js +70 -0
  185. package/dist/sds-notification/sds-notification.js.map +1 -0
  186. package/dist/sds-notification/sds-notification.styles.d.ts +2 -0
  187. package/dist/sds-notification/sds-notification.styles.d.ts.map +1 -0
  188. package/dist/sds-notification/sds-notification.styles.js +160 -0
  189. package/dist/sds-notification/sds-notification.styles.js.map +1 -0
  190. package/dist/sds-paragraph/sds-paragraph.d.ts +14 -0
  191. package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -0
  192. package/dist/sds-paragraph/sds-paragraph.js +37 -0
  193. package/dist/sds-paragraph/sds-paragraph.js.map +1 -0
  194. package/dist/sds-paragraph/sds-paragraph.styles.d.ts +2 -0
  195. package/dist/sds-paragraph/sds-paragraph.styles.d.ts.map +1 -0
  196. package/dist/sds-paragraph/sds-paragraph.styles.js +37 -0
  197. package/dist/sds-paragraph/sds-paragraph.styles.js.map +1 -0
  198. package/dist/sds-radio/sds-radio.d.ts +49 -0
  199. package/dist/sds-radio/sds-radio.d.ts.map +1 -0
  200. package/dist/sds-radio/sds-radio.js +241 -0
  201. package/dist/sds-radio/sds-radio.js.map +1 -0
  202. package/dist/sds-radio/sds-radio.styles.d.ts +2 -0
  203. package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -0
  204. package/dist/sds-radio/sds-radio.styles.js +109 -0
  205. package/dist/sds-radio/sds-radio.styles.js.map +1 -0
  206. package/dist/sds-radio-group/sds-radio-group.d.ts +22 -0
  207. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -0
  208. package/dist/sds-radio-group/sds-radio-group.js +75 -0
  209. package/dist/sds-radio-group/sds-radio-group.js.map +1 -0
  210. package/dist/sds-radio-group/sds-radio-group.styles.d.ts +2 -0
  211. package/dist/sds-radio-group/sds-radio-group.styles.d.ts.map +1 -0
  212. package/dist/sds-radio-group/sds-radio-group.styles.js +47 -0
  213. package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -0
  214. package/dist/sds-switch/sds-switch.d.ts +43 -0
  215. package/dist/sds-switch/sds-switch.d.ts.map +1 -0
  216. package/dist/sds-switch/sds-switch.js +189 -0
  217. package/dist/sds-switch/sds-switch.js.map +1 -0
  218. package/dist/sds-switch/sds-switch.styles.d.ts +2 -0
  219. package/dist/sds-switch/sds-switch.styles.d.ts.map +1 -0
  220. package/dist/sds-switch/sds-switch.styles.js +125 -0
  221. package/dist/sds-switch/sds-switch.styles.js.map +1 -0
  222. package/dist/sds-text/sds-text.d.ts +14 -0
  223. package/dist/sds-text/sds-text.d.ts.map +1 -0
  224. package/dist/sds-text/sds-text.js +37 -0
  225. package/dist/sds-text/sds-text.js.map +1 -0
  226. package/dist/sds-text/sds-text.styles.d.ts +2 -0
  227. package/dist/sds-text/sds-text.styles.d.ts.map +1 -0
  228. package/dist/sds-text/sds-text.styles.js +31 -0
  229. package/dist/sds-text/sds-text.styles.js.map +1 -0
  230. package/dist/sds-textfield/sds-textfield.d.ts +35 -0
  231. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -0
  232. package/dist/sds-textfield/sds-textfield.js +179 -0
  233. package/dist/sds-textfield/sds-textfield.js.map +1 -0
  234. package/dist/sds-textfield/sds-textfield.styles.d.ts +2 -0
  235. package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -0
  236. package/dist/sds-textfield/sds-textfield.styles.js +116 -0
  237. package/dist/sds-textfield/sds-textfield.styles.js.map +1 -0
  238. package/package.json +36 -17
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SDSTextWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC7C,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,OAAO;IACrB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACV,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSText } from '../sds-text/sds-text';\n\nexport const SDSTextWrapper = createComponent({\n\ttagName: 'sds-text',\n\telementClass: SDSText,\n\treact: React,\n\tevents: {},\n});\n"]}
@@ -0,0 +1,19 @@
1
+ export { SDSButtonWrapper } from './SDSButtonWrapper';
2
+ export { SDSCheckboxGroupWrapper } from './SDSCheckboxGroupWrapper';
3
+ export { SDSCheckboxWrapper } from './SDSCheckboxWrapper';
4
+ export { SDSChipWrapper } from './SDSChipWrapper';
5
+ export { SDSDetailWrapper } from './SDSDetailWrapper';
6
+ export { SDSHeadingWrapper } from './SDSHeadingWrapper';
7
+ export { SDSIconWrapper } from './SDSIconWrapper';
8
+ export { SDSLabelWrapper } from './SDSLabelWrapper';
9
+ export { SDSLinkWrapper } from './SDSLinkWrapper';
10
+ export { SDSLoaderWrapper } from './SDSLoaderWrapper';
11
+ export { SDSNavCardWrapper } from './SDSNavCardWrapper';
12
+ export { SDSNotificationWrapper } from './SDSNotificationWrapper';
13
+ export { SDSParagraphWrapper } from './SDSParagraphWrapper';
14
+ export { SDSRadioGroupWrapper } from './SDSRadioGroupWrapper';
15
+ export { SDSRadioWrapper } from './SDSRadioWrapper';
16
+ export { SDSSwitchWrapper } from './SDSSwitchWrapper';
17
+ export { SDSTextFieldWrapper } from './SDSTextFieldWrapper';
18
+ export { SDSTextWrapper } from './SDSTextWrapper';
19
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,19 @@
1
+ export { SDSButtonWrapper } from './SDSButtonWrapper';
2
+ export { SDSCheckboxGroupWrapper } from './SDSCheckboxGroupWrapper';
3
+ export { SDSCheckboxWrapper } from './SDSCheckboxWrapper';
4
+ export { SDSChipWrapper } from './SDSChipWrapper';
5
+ export { SDSDetailWrapper } from './SDSDetailWrapper';
6
+ export { SDSHeadingWrapper } from './SDSHeadingWrapper';
7
+ export { SDSIconWrapper } from './SDSIconWrapper';
8
+ export { SDSLabelWrapper } from './SDSLabelWrapper';
9
+ export { SDSLinkWrapper } from './SDSLinkWrapper';
10
+ export { SDSLoaderWrapper } from './SDSLoaderWrapper';
11
+ export { SDSNavCardWrapper } from './SDSNavCardWrapper';
12
+ export { SDSNotificationWrapper } from './SDSNotificationWrapper';
13
+ export { SDSParagraphWrapper } from './SDSParagraphWrapper';
14
+ export { SDSRadioGroupWrapper } from './SDSRadioGroupWrapper';
15
+ export { SDSRadioWrapper } from './SDSRadioWrapper';
16
+ export { SDSSwitchWrapper } from './SDSSwitchWrapper';
17
+ export { SDSTextFieldWrapper } from './SDSTextFieldWrapper';
18
+ export { SDSTextWrapper } from './SDSTextWrapper';
19
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react-wrappers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { SDSButtonWrapper } from './SDSButtonWrapper';\nexport { SDSCheckboxGroupWrapper } from './SDSCheckboxGroupWrapper';\nexport { SDSCheckboxWrapper } from './SDSCheckboxWrapper';\nexport { SDSChipWrapper } from './SDSChipWrapper';\nexport { SDSDetailWrapper } from './SDSDetailWrapper';\nexport { SDSHeadingWrapper } from './SDSHeadingWrapper';\nexport { SDSIconWrapper } from './SDSIconWrapper';\nexport { SDSLabelWrapper } from './SDSLabelWrapper';\nexport { SDSLinkWrapper } from './SDSLinkWrapper';\nexport { SDSLoaderWrapper } from './SDSLoaderWrapper';\nexport { SDSNavCardWrapper } from './SDSNavCardWrapper';\nexport { SDSNotificationWrapper } from './SDSNotificationWrapper';\nexport { SDSParagraphWrapper } from './SDSParagraphWrapper';\nexport { SDSRadioGroupWrapper } from './SDSRadioGroupWrapper';\nexport { SDSRadioWrapper } from './SDSRadioWrapper';\nexport { SDSSwitchWrapper } from './SDSSwitchWrapper';\nexport { SDSTextFieldWrapper } from './SDSTextFieldWrapper';\nexport { SDSTextWrapper } from './SDSTextWrapper';\n"]}
@@ -1,16 +1,24 @@
1
1
  import { LitElement } from 'lit';
2
2
  type ButtonType = 'button' | 'submit' | 'reset';
3
- type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
3
+ type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
4
4
  type ButtonSize = 'large' | 'medium' | 'small';
5
5
  export declare class SDSButton extends LitElement {
6
6
  static styles: import("lit").CSSResult[];
7
- name: string;
7
+ static formAssociated: boolean;
8
+ readonly internals: ElementInternals;
8
9
  type: ButtonType;
9
10
  variant: ButtonVariant;
10
11
  size: ButtonSize;
11
12
  disabled: boolean;
13
+ name?: string;
14
+ value: string;
15
+ form?: string;
16
+ constructor();
12
17
  private readonly _handleClick;
13
- render(): import("lit-html").TemplateResult<1>;
18
+ focus(): void;
19
+ blur(): void;
20
+ click(): void;
21
+ render(): import("lit").TemplateResult<1>;
14
22
  }
15
23
  declare global {
16
24
  interface HTMLElementTagNameMap {
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,EAAE,OAAO,CAAS;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAY3B;IAEO,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
1
+ {"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAG5C,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAEiB,QAAQ,EAAE,OAAO,CAAS;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;;IAQzD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
@@ -7,63 +7,133 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { LitElement, html } from 'lit';
8
8
  import { customElement, property } from 'lit/decorators.js';
9
9
  import { classMap } from 'lit/directives/class-map.js';
10
+ import { ifDefined } from 'lit/directives/if-defined.js';
10
11
  import { styles } from './sds-button.styles';
11
12
  let SDSButton = class SDSButton extends LitElement {
12
13
  constructor() {
13
- super(...arguments);
14
+ super();
14
15
  this.type = 'button';
15
16
  this.variant = 'primary';
16
17
  this.size = 'large';
17
18
  this.disabled = false;
19
+ this.value = '';
18
20
  this._handleClick = (event) => {
19
21
  event.preventDefault();
20
22
  event.stopImmediatePropagation();
21
23
  if (!this.disabled) {
22
- this.dispatchEvent(new CustomEvent('click', {
23
- bubbles: true,
24
- composed: true,
25
- }));
24
+ switch (this.type) {
25
+ case 'submit': {
26
+ const submitEvent = new CustomEvent('submit', {
27
+ bubbles: true,
28
+ composed: true,
29
+ cancelable: true,
30
+ });
31
+ const shouldSubmit = this.dispatchEvent(submitEvent);
32
+ if (shouldSubmit) {
33
+ if (this.form) {
34
+ const root = this.getRootNode();
35
+ const formElement = root.querySelector(`form#${this.form}`);
36
+ formElement?.submit();
37
+ }
38
+ else if (this.internals.form) {
39
+ this.internals.form.submit();
40
+ }
41
+ }
42
+ break;
43
+ }
44
+ case 'reset': {
45
+ const resetEvent = new CustomEvent('reset', {
46
+ bubbles: true,
47
+ composed: true,
48
+ cancelable: true,
49
+ });
50
+ const shouldReset = this.dispatchEvent(resetEvent);
51
+ if (shouldReset) {
52
+ if (this.form) {
53
+ const root = this.getRootNode();
54
+ const formElement = root.querySelector(`form#${this.form}`);
55
+ formElement?.reset();
56
+ }
57
+ else if (this.internals.form) {
58
+ this.internals.form.reset();
59
+ }
60
+ }
61
+ break;
62
+ }
63
+ default:
64
+ this.dispatchEvent(new CustomEvent('click', {
65
+ bubbles: true,
66
+ composed: true,
67
+ }));
68
+ }
26
69
  }
27
70
  };
71
+ this.internals = this.attachInternals();
72
+ this.attachShadow({ mode: 'open', delegatesFocus: true });
73
+ }
74
+ focus() {
75
+ if (!this.disabled)
76
+ this.shadowRoot?.querySelector('button')?.click();
77
+ }
78
+ blur() {
79
+ if (!this.disabled)
80
+ this.shadowRoot?.querySelector('button')?.click();
81
+ }
82
+ click() {
83
+ if (!this.disabled)
84
+ this.shadowRoot?.querySelector('button')?.click();
28
85
  }
29
86
  render() {
30
87
  const buttonClasses = {
31
88
  'sds-button': true,
32
89
  'sds-button--secondary': this.variant === 'secondary',
33
90
  'sds-button--tertiary': this.variant === 'tertiary',
91
+ 'sds-button--critical': this.variant === 'critical',
34
92
  'sds-button--medium': this.size === 'medium',
35
93
  'sds-button--small': this.size === 'small',
36
94
  };
37
95
  return html `
38
96
  <button
97
+ id="control"
98
+ form="${ifDefined(this.form)}"
39
99
  class="${classMap(buttonClasses)}"
40
100
  type="${this.type}"
41
- name="${this.name}"
101
+ name="${ifDefined(this.name)}"
102
+ value="${ifDefined(this.value)}"
42
103
  ?disabled="${this.disabled}"
43
104
  @click="${this._handleClick}"
44
105
  >
106
+ <slot name="before"></slot>
45
107
  <slot></slot>
108
+ <slot name="after"></slot>
46
109
  </button>
47
110
  `;
48
111
  }
49
112
  };
50
113
  // Styling
51
114
  SDSButton.styles = [styles];
115
+ SDSButton.formAssociated = true;
52
116
  __decorate([
53
- property({ type: String })
54
- ], SDSButton.prototype, "name", void 0);
55
- __decorate([
56
- property({ type: String })
117
+ property({ type: String, reflect: true })
57
118
  ], SDSButton.prototype, "type", void 0);
58
119
  __decorate([
59
- property({ type: String })
120
+ property({ type: String, reflect: true })
60
121
  ], SDSButton.prototype, "variant", void 0);
61
122
  __decorate([
62
- property({ type: String })
123
+ property({ type: String, reflect: true })
63
124
  ], SDSButton.prototype, "size", void 0);
64
125
  __decorate([
65
- property({ type: Boolean })
126
+ property({ type: Boolean, reflect: true })
66
127
  ], SDSButton.prototype, "disabled", void 0);
128
+ __decorate([
129
+ property({ type: String, reflect: true })
130
+ ], SDSButton.prototype, "name", void 0);
131
+ __decorate([
132
+ property({ type: String, reflect: true })
133
+ ], SDSButton.prototype, "value", void 0);
134
+ __decorate([
135
+ property({ type: String, reflect: true })
136
+ ], SDSButton.prototype, "form", void 0);
67
137
  SDSButton = __decorate([
68
138
  customElement('sds-button')
69
139
  ], SDSButton);
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QASN,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAG3B,aAAQ,GAAY,KAAK,CAAC;QAET,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;oBACxB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAuBH,CAAC;IArBS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA;;aAEA,QAAQ,CAAC,aAAa,CAAC;YACxB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,YAAY;;;;GAI5B,CAAC;IACH,CAAC;;AArDD,UAAU;AACM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACQ;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACF;AAlBd,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuDrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\n@customElement('sds-button')\nexport class SDSButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tname!: string;\n\n\t@property({ type: String })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled: boolean = false;\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${this.name}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\n@customElement('sds-button')\nexport class SDSButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) form?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.submit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.submit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--critical': this.variant === 'critical',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiHlB,CAAC"}
1
+ {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgJlB,CAAC"}
@@ -1,5 +1,11 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
+ :host {
4
+ --_color-semantic-surface-critical-hover: #b32a23;
5
+ display: inline-block;
6
+ box-sizing: border-box;
7
+ }
8
+
3
9
  .sds-button {
4
10
  align-items: center;
5
11
  display: inline-flex;
@@ -13,18 +19,12 @@ export const styles = css `
13
19
  cursor: pointer;
14
20
 
15
21
  color: var(--sds-color-semantic-text-on-action);
16
- font-family: 'Roboto';
22
+ font-family: var(--sds-typography-font-family);
17
23
  font-size: 1rem;
18
24
  font-weight: 500;
19
25
  line-height: 1.5;
20
26
  text-align: center;
21
27
 
22
- &:focus {
23
- background-color: var(--sds-color-semantic-surface-action-default);
24
- outline: 2px solid var(--sds-color-semantic-surface-action-default);
25
- outline-offset: 1px;
26
- }
27
-
28
28
  &:hover {
29
29
  background-color: var(--sds-color-semantic-surface-action-hover);
30
30
  border: 2px solid var(--sds-color-semantic-surface-action-hover);
@@ -44,6 +44,13 @@ export const styles = css `
44
44
  }
45
45
  }
46
46
 
47
+ .sds-button:focus,
48
+ :host(:focus) .give-focus {
49
+ background-color: var(--sds-color-semantic-surface-action-default);
50
+ outline: 2px solid var(--sds-color-semantic-surface-action-default);
51
+ outline-offset: 1px;
52
+ }
53
+
47
54
  .sds-button--secondary {
48
55
  background-color: var(--sds-color-semantic-surface-action-inverted);
49
56
  border: 2px solid var(--sds-color-semantic-border-action);
@@ -80,7 +87,6 @@ export const styles = css `
80
87
  &:focus {
81
88
  background-color: transparent;
82
89
  border: 2px solid transparent;
83
- text-decoration: underline;
84
90
  }
85
91
 
86
92
  &:hover {
@@ -93,14 +99,39 @@ export const styles = css `
93
99
  color: var(--sds-color-semantic-text-on-action);
94
100
  outline: 0;
95
101
  position: relative;
96
- text-decoration: underline;
97
102
  }
98
103
 
99
104
  &:disabled {
100
105
  border: 2px solid transparent;
101
106
  background: transparent;
102
107
  color: var(--sds-color-semantic-text-disabled);
103
- text-decoration: underline;
108
+ }
109
+ }
110
+
111
+ .sds-button--critical {
112
+ background-color: var(--sds-color-semantic-surface-critical-xtreme);
113
+ border: 2px solid var(--sds-color-semantic-border-critical);
114
+ color: var(--sds-color-semantic-text-on-critical);
115
+
116
+ &:focus {
117
+ background-color: var(--sds-color-semantic-surface-critical-xtreme);
118
+ border: 2px solid var(--sds-color-semantic-border-critical);
119
+ }
120
+
121
+ &:hover {
122
+ background-color: var(--_color-semantic-surface-critical-hover);
123
+ border: 2px solid var(--_color-semantic-surface-critical-hover);
124
+ }
125
+
126
+ &:active {
127
+ background-color: var(--sds-color-semantic-surface-action-active);
128
+ border: 2px solid var(--sds-color-semantic-surface-action-active);
129
+ }
130
+
131
+ &:disabled {
132
+ background-color: var(--sds-color-semantic-surface-disabled);
133
+ border: 2px solid var(--sds-color-semantic-surface-disabled);
134
+ color: var(--sds-color-semantic-text-subtle);
104
135
  }
105
136
  }
106
137
 
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: 'Roboto';\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
@@ -0,0 +1,26 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class SDSCheckbox extends LitElement {
3
+ static styles: import("lit").CSSResult[];
4
+ static formAssociated: boolean;
5
+ readonly internals: ElementInternals;
6
+ name?: string;
7
+ label?: string;
8
+ value?: string;
9
+ checked: boolean;
10
+ disabled: boolean;
11
+ error: boolean;
12
+ constructor();
13
+ private readonly _handleChange;
14
+ private readonly _handleFocus;
15
+ private readonly _handleBlur;
16
+ focus(): void;
17
+ blur(): void;
18
+ click(): void;
19
+ render(): import("lit").TemplateResult<1>;
20
+ }
21
+ declare global {
22
+ interface HTMLElementTagNameMap {
23
+ 'sds-checkbox': SDSCheckbox;
24
+ }
25
+ }
26
+ //# sourceMappingURL=sds-checkbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAI5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,KAAK,UAAS;;IASd,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAS1B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA8Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
@@ -0,0 +1,116 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, nothing } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { ifDefined } from 'lit/directives/if-defined.js';
10
+ import { classMap } from 'lit/directives/class-map.js';
11
+ import { styles } from './sds-checkbox.styles';
12
+ let SDSCheckbox = class SDSCheckbox extends LitElement {
13
+ constructor() {
14
+ super();
15
+ this.checked = false;
16
+ this.disabled = false;
17
+ this.error = false;
18
+ // Event handling
19
+ this._handleChange = (event) => {
20
+ event.stopImmediatePropagation();
21
+ if (!this.disabled) {
22
+ const elem = event.target;
23
+ this.checked = elem.checked;
24
+ this.dispatchEvent(new CustomEvent('change', {
25
+ detail: { checked: this.checked, value: elem.value },
26
+ bubbles: true,
27
+ composed: true,
28
+ }));
29
+ }
30
+ };
31
+ this._handleFocus = (event) => {
32
+ event.stopImmediatePropagation();
33
+ this.dispatchEvent(new CustomEvent('focus', {
34
+ detail: { checked: this.checked },
35
+ bubbles: true,
36
+ composed: true,
37
+ }));
38
+ };
39
+ this._handleBlur = (event) => {
40
+ event.stopImmediatePropagation();
41
+ this.dispatchEvent(new CustomEvent('blur', {
42
+ detail: { checked: this.checked },
43
+ bubbles: true,
44
+ composed: true,
45
+ }));
46
+ };
47
+ this.internals = this.attachInternals();
48
+ this.attachShadow({ mode: 'open', delegatesFocus: true });
49
+ }
50
+ focus() {
51
+ if (!this.disabled)
52
+ this.shadowRoot?.querySelector('input')?.focus();
53
+ }
54
+ blur() {
55
+ if (!this.disabled)
56
+ this.shadowRoot?.querySelector('input')?.blur();
57
+ }
58
+ click() {
59
+ if (!this.disabled)
60
+ this.shadowRoot?.querySelector('input')?.click();
61
+ }
62
+ render() {
63
+ const checkboxClasses = {
64
+ 'sds-checkbox': true,
65
+ 'sds-checkbox--error': Boolean(this.error),
66
+ };
67
+ const inputClasses = {
68
+ 'sds-checkbox__input': true,
69
+ 'sds-checkbox__input--error': Boolean(this.error),
70
+ };
71
+ return html `
72
+ <div class="${classMap(checkboxClasses)}">
73
+ <label class="sds-checkbox__label">
74
+ <input
75
+ type="checkbox"
76
+ name="${ifDefined(this.name)}"
77
+ value="${ifDefined(this.value)}"
78
+ ?checked="${this.checked}"
79
+ ?disabled="${this.disabled}"
80
+ @change="${this._handleChange}"
81
+ @focus="${this._handleFocus}"
82
+ @blur="${this._handleBlur}"
83
+ class="${classMap(inputClasses)}"
84
+ />
85
+ ${this.label ? html `<span class="sds-checkbox__text">${this.label}</span>` : nothing}
86
+ </label>
87
+ </div>
88
+ `;
89
+ }
90
+ };
91
+ // Styling
92
+ SDSCheckbox.styles = [styles];
93
+ SDSCheckbox.formAssociated = true;
94
+ __decorate([
95
+ property({ type: String, reflect: true })
96
+ ], SDSCheckbox.prototype, "name", void 0);
97
+ __decorate([
98
+ property({ type: String, reflect: true })
99
+ ], SDSCheckbox.prototype, "label", void 0);
100
+ __decorate([
101
+ property({ type: String })
102
+ ], SDSCheckbox.prototype, "value", void 0);
103
+ __decorate([
104
+ property({ type: Boolean, reflect: true })
105
+ ], SDSCheckbox.prototype, "checked", void 0);
106
+ __decorate([
107
+ property({ type: Boolean, reflect: true })
108
+ ], SDSCheckbox.prototype, "disabled", void 0);
109
+ __decorate([
110
+ property({ type: Boolean, reflect: true })
111
+ ], SDSCheckbox.prototype, "error", void 0);
112
+ SDSCheckbox = __decorate([
113
+ customElement('sds-checkbox')
114
+ ], SDSCheckbox);
115
+ export { SDSCheckbox };
116
+ //# sourceMappingURL=sds-checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox.styles';\n\n@customElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true })\n\tname?: string;\n\n\t@property({ type: String, reflect: true })\n\tlabel?: string;\n\n\t@property({ type: String })\n\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\tchecked = false;\n\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Boolean, reflect: true })\n\terror = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\t// Event handling\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { checked: this.checked, value: elem.value },\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tdetail: { checked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tdetail: { checked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=sds-checkbox.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2GlB,CAAC"}