@synergy-design-system/components 1.0.0-main.2 → 1.0.0-main.20

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 (290) hide show
  1. package/LICENSE +9 -0
  2. package/README.md +150 -1
  3. package/dist/chunks/chunk.23HTU3YE.js +189 -0
  4. package/dist/chunks/chunk.23HTU3YE.js.map +7 -0
  5. package/dist/chunks/chunk.27VJRQCE.js +224 -0
  6. package/dist/chunks/chunk.27VJRQCE.js.map +7 -0
  7. package/dist/chunks/chunk.2XZKXVMR.js +44 -0
  8. package/dist/chunks/chunk.2XZKXVMR.js.map +7 -0
  9. package/dist/chunks/chunk.36BORWIU.js +351 -0
  10. package/dist/chunks/chunk.36BORWIU.js.map +7 -0
  11. package/dist/chunks/chunk.4CBN5LPQ.js +137 -0
  12. package/dist/chunks/chunk.4CBN5LPQ.js.map +7 -0
  13. package/dist/chunks/chunk.4I6M5V6O.js +56 -0
  14. package/dist/chunks/chunk.4I6M5V6O.js.map +7 -0
  15. package/dist/chunks/chunk.4XAK6MOQ.js +45 -0
  16. package/dist/chunks/chunk.4XAK6MOQ.js.map +7 -0
  17. package/dist/chunks/chunk.4ZURABYO.js +24 -0
  18. package/dist/chunks/chunk.4ZURABYO.js.map +7 -0
  19. package/dist/chunks/chunk.6C4JXZZN.js +15 -0
  20. package/dist/chunks/chunk.6C4JXZZN.js.map +7 -0
  21. package/dist/chunks/chunk.7IH6VY33.js +12 -0
  22. package/dist/chunks/chunk.7IH6VY33.js.map +7 -0
  23. package/dist/chunks/chunk.A3SKDWCT.js +42 -0
  24. package/dist/chunks/chunk.A3SKDWCT.js.map +7 -0
  25. package/dist/chunks/chunk.A6SRE7EI.js +280 -0
  26. package/dist/chunks/chunk.A6SRE7EI.js.map +7 -0
  27. package/dist/chunks/chunk.AFEABUNX.js +107 -0
  28. package/dist/chunks/chunk.AFEABUNX.js.map +7 -0
  29. package/dist/chunks/chunk.C7624ITA.js +30 -0
  30. package/dist/chunks/chunk.C7624ITA.js.map +7 -0
  31. package/dist/chunks/chunk.CLAMILD3.js +175 -0
  32. package/dist/chunks/chunk.CLAMILD3.js.map +7 -0
  33. package/dist/chunks/chunk.CODFHJDI.js +360 -0
  34. package/dist/chunks/chunk.CODFHJDI.js.map +7 -0
  35. package/dist/chunks/chunk.CRL545VA.js +63 -0
  36. package/dist/chunks/chunk.CRL545VA.js.map +7 -0
  37. package/dist/chunks/chunk.DJOAQ4JU.js +36 -0
  38. package/dist/chunks/chunk.DJOAQ4JU.js.map +7 -0
  39. package/dist/chunks/chunk.E2GBU3G6.js +12 -0
  40. package/dist/chunks/chunk.E2GBU3G6.js.map +7 -0
  41. package/dist/chunks/chunk.F4MKRDFE.js +127 -0
  42. package/dist/chunks/chunk.F4MKRDFE.js.map +7 -0
  43. package/dist/chunks/chunk.F4MRQLNL.js +25 -0
  44. package/dist/chunks/chunk.F4MRQLNL.js.map +7 -0
  45. package/dist/chunks/chunk.FVSP4LXX.js +138 -0
  46. package/dist/chunks/chunk.FVSP4LXX.js.map +7 -0
  47. package/dist/chunks/chunk.GDNBN76M.js +86 -0
  48. package/dist/chunks/chunk.GDNBN76M.js.map +7 -0
  49. package/dist/chunks/chunk.GNAJOKCJ.js +32 -0
  50. package/dist/chunks/chunk.GNAJOKCJ.js.map +7 -0
  51. package/dist/chunks/chunk.H5LJXPMK.js +12 -0
  52. package/dist/chunks/chunk.H5LJXPMK.js.map +7 -0
  53. package/dist/chunks/chunk.HC2BCHTH.js +480 -0
  54. package/dist/chunks/chunk.HC2BCHTH.js.map +7 -0
  55. package/dist/chunks/chunk.HD5XNRL6.js +12 -0
  56. package/dist/chunks/chunk.HD5XNRL6.js.map +7 -0
  57. package/dist/chunks/chunk.JBYBQ5TQ.js +132 -0
  58. package/dist/chunks/chunk.JBYBQ5TQ.js.map +7 -0
  59. package/dist/chunks/chunk.JHXCBOUD.js +123 -0
  60. package/dist/chunks/chunk.JHXCBOUD.js.map +7 -0
  61. package/dist/chunks/chunk.KXVHGSJZ.js +12 -0
  62. package/dist/chunks/chunk.KXVHGSJZ.js.map +7 -0
  63. package/dist/chunks/chunk.MMHKLOBP.js +12 -0
  64. package/dist/chunks/chunk.MMHKLOBP.js.map +7 -0
  65. package/dist/chunks/chunk.MNMITYTH.js +184 -0
  66. package/dist/chunks/chunk.MNMITYTH.js.map +7 -0
  67. package/dist/chunks/chunk.N2I6HVX3.js +71 -0
  68. package/dist/chunks/chunk.N2I6HVX3.js.map +7 -0
  69. package/dist/chunks/chunk.NKIYFJN2.js +1 -0
  70. package/dist/chunks/chunk.NKIYFJN2.js.map +7 -0
  71. package/dist/chunks/chunk.O7USYXBT.js +23 -0
  72. package/dist/chunks/chunk.O7USYXBT.js.map +7 -0
  73. package/dist/chunks/chunk.OVVMSN4D.js +37 -0
  74. package/dist/chunks/chunk.OVVMSN4D.js.map +7 -0
  75. package/dist/chunks/chunk.OXUFFH57.js +318 -0
  76. package/dist/chunks/chunk.OXUFFH57.js.map +7 -0
  77. package/dist/chunks/chunk.P2LNG2PZ.js +275 -0
  78. package/dist/chunks/chunk.P2LNG2PZ.js.map +7 -0
  79. package/dist/chunks/chunk.PJO6TM3T.js +10 -0
  80. package/dist/chunks/chunk.PJO6TM3T.js.map +7 -0
  81. package/dist/chunks/chunk.QAOCPWQU.js +12 -0
  82. package/dist/chunks/chunk.QAOCPWQU.js.map +7 -0
  83. package/dist/chunks/chunk.QPGMTMMJ.js +12 -0
  84. package/dist/chunks/chunk.QPGMTMMJ.js.map +7 -0
  85. package/dist/chunks/chunk.R6VNLE6N.js +11 -0
  86. package/dist/chunks/chunk.R6VNLE6N.js.map +7 -0
  87. package/dist/chunks/chunk.RSONAU45.js +33 -0
  88. package/dist/chunks/chunk.RSONAU45.js.map +7 -0
  89. package/dist/chunks/chunk.S545KS4R.js +111 -0
  90. package/dist/chunks/chunk.S545KS4R.js.map +7 -0
  91. package/dist/chunks/chunk.SGXORY4I.js +12 -0
  92. package/dist/chunks/chunk.SGXORY4I.js.map +7 -0
  93. package/dist/chunks/chunk.V6VND4OF.js +49 -0
  94. package/dist/chunks/chunk.V6VND4OF.js.map +7 -0
  95. package/dist/chunks/chunk.VZ7S7YYN.js +34 -0
  96. package/dist/chunks/chunk.VZ7S7YYN.js.map +7 -0
  97. package/dist/chunks/chunk.W46CFM2R.js +90 -0
  98. package/dist/chunks/chunk.W46CFM2R.js.map +7 -0
  99. package/dist/chunks/chunk.WFAJR3FN.js +25 -0
  100. package/dist/chunks/chunk.WFAJR3FN.js.map +7 -0
  101. package/dist/chunks/chunk.WJBBJ5U3.js +32 -0
  102. package/dist/chunks/chunk.WJBBJ5U3.js.map +7 -0
  103. package/dist/chunks/chunk.WUT3EE6L.js +12 -0
  104. package/dist/chunks/chunk.WUT3EE6L.js.map +7 -0
  105. package/dist/chunks/chunk.X3WNKQPZ.js +212 -0
  106. package/dist/chunks/chunk.X3WNKQPZ.js.map +7 -0
  107. package/dist/chunks/chunk.XGXFE6IF.js +49 -0
  108. package/dist/chunks/chunk.XGXFE6IF.js.map +7 -0
  109. package/dist/chunks/chunk.YBIBWRKC.js +19 -0
  110. package/dist/chunks/chunk.YBIBWRKC.js.map +7 -0
  111. package/dist/chunks/chunk.YTS5TRJZ.js +376 -0
  112. package/dist/chunks/chunk.YTS5TRJZ.js.map +7 -0
  113. package/dist/chunks/chunk.Z3RZUTQU.js +42 -0
  114. package/dist/chunks/chunk.Z3RZUTQU.js.map +7 -0
  115. package/dist/components/button/button.component.d.ts +123 -0
  116. package/dist/components/button/button.component.js +26 -0
  117. package/dist/components/button/button.component.js.map +7 -0
  118. package/dist/components/button/button.custom.styles.d.ts +2 -0
  119. package/dist/components/button/button.custom.styles.js +8 -0
  120. package/dist/components/button/button.custom.styles.js.map +7 -0
  121. package/dist/components/button/button.d.ts +8 -0
  122. package/dist/components/button/button.js +27 -0
  123. package/dist/components/button/button.js.map +7 -0
  124. package/dist/components/button/button.styles.d.ts +2 -0
  125. package/dist/components/button/button.styles.js +10 -0
  126. package/dist/components/button/button.styles.js.map +7 -0
  127. package/dist/components/button-group/button-group.component.d.ts +28 -0
  128. package/dist/components/button-group/button-group.component.js +11 -0
  129. package/dist/components/button-group/button-group.component.js.map +7 -0
  130. package/dist/components/button-group/button-group.d.ts +8 -0
  131. package/dist/components/button-group/button-group.js +12 -0
  132. package/dist/components/button-group/button-group.js.map +7 -0
  133. package/dist/components/button-group/button-group.styles.d.ts +2 -0
  134. package/dist/components/button-group/button-group.styles.js +9 -0
  135. package/dist/components/button-group/button-group.styles.js.map +7 -0
  136. package/dist/components/checkbox/checkbox.component.d.ts +93 -0
  137. package/dist/components/checkbox/checkbox.component.js +22 -0
  138. package/dist/components/checkbox/checkbox.component.js.map +7 -0
  139. package/dist/components/checkbox/checkbox.custom.styles.d.ts +2 -0
  140. package/dist/components/checkbox/checkbox.custom.styles.js +8 -0
  141. package/dist/components/checkbox/checkbox.custom.styles.js.map +7 -0
  142. package/dist/components/checkbox/checkbox.d.ts +8 -0
  143. package/dist/components/checkbox/checkbox.js +23 -0
  144. package/dist/components/checkbox/checkbox.js.map +7 -0
  145. package/dist/components/checkbox/checkbox.styles.d.ts +2 -0
  146. package/dist/components/checkbox/checkbox.styles.js +10 -0
  147. package/dist/components/checkbox/checkbox.styles.js.map +7 -0
  148. package/dist/components/icon/icon.component.d.ts +42 -0
  149. package/dist/components/icon/icon.component.js +17 -0
  150. package/dist/components/icon/icon.component.js.map +7 -0
  151. package/dist/components/icon/icon.custom.styles.d.ts +2 -0
  152. package/dist/components/icon/icon.custom.styles.js +8 -0
  153. package/dist/components/icon/icon.custom.styles.js.map +7 -0
  154. package/dist/components/icon/icon.d.ts +8 -0
  155. package/dist/components/icon/icon.js +18 -0
  156. package/dist/components/icon/icon.js.map +7 -0
  157. package/dist/components/icon/icon.styles.d.ts +2 -0
  158. package/dist/components/icon/icon.styles.js +10 -0
  159. package/dist/components/icon/icon.styles.js.map +7 -0
  160. package/dist/components/icon/library.d.ts +19 -0
  161. package/dist/components/icon/library.default.d.ts +3 -0
  162. package/dist/components/icon/library.default.js +9 -0
  163. package/dist/components/icon/library.default.js.map +7 -0
  164. package/dist/components/icon/library.js +19 -0
  165. package/dist/components/icon/library.js.map +7 -0
  166. package/dist/components/icon/library.system.d.ts +3 -0
  167. package/dist/components/icon/library.system.js +8 -0
  168. package/dist/components/icon/library.system.js.map +7 -0
  169. package/dist/components/input/input.component.d.ts +175 -0
  170. package/dist/components/input/input.component.js +26 -0
  171. package/dist/components/input/input.component.js.map +7 -0
  172. package/dist/components/input/input.custom.styles.d.ts +2 -0
  173. package/dist/components/input/input.custom.styles.js +8 -0
  174. package/dist/components/input/input.custom.styles.js.map +7 -0
  175. package/dist/components/input/input.d.ts +8 -0
  176. package/dist/components/input/input.js +27 -0
  177. package/dist/components/input/input.js.map +7 -0
  178. package/dist/components/input/input.styles.d.ts +2 -0
  179. package/dist/components/input/input.styles.js +11 -0
  180. package/dist/components/input/input.styles.js.map +7 -0
  181. package/dist/components/radio/radio.component.d.ts +53 -0
  182. package/dist/components/radio/radio.component.js +20 -0
  183. package/dist/components/radio/radio.component.js.map +7 -0
  184. package/dist/components/radio/radio.custom.styles.d.ts +2 -0
  185. package/dist/components/radio/radio.custom.styles.js +8 -0
  186. package/dist/components/radio/radio.custom.styles.js.map +7 -0
  187. package/dist/components/radio/radio.d.ts +8 -0
  188. package/dist/components/radio/radio.js +21 -0
  189. package/dist/components/radio/radio.js.map +7 -0
  190. package/dist/components/radio/radio.styles.d.ts +2 -0
  191. package/dist/components/radio/radio.styles.js +10 -0
  192. package/dist/components/radio/radio.styles.js.map +7 -0
  193. package/dist/components/radio-button/radio-button.component.d.ts +53 -0
  194. package/dist/components/radio-button/radio-button.component.js +15 -0
  195. package/dist/components/radio-button/radio-button.component.js.map +7 -0
  196. package/dist/components/radio-button/radio-button.d.ts +8 -0
  197. package/dist/components/radio-button/radio-button.js +16 -0
  198. package/dist/components/radio-button/radio-button.js.map +7 -0
  199. package/dist/components/radio-button/radio-button.styles.d.ts +2 -0
  200. package/dist/components/radio-button/radio-button.styles.js +11 -0
  201. package/dist/components/radio-button/radio-button.styles.js.map +7 -0
  202. package/dist/components/radio-group/radio-group.component.d.ts +89 -0
  203. package/dist/components/radio-group/radio-group.component.js +18 -0
  204. package/dist/components/radio-group/radio-group.component.js.map +7 -0
  205. package/dist/components/radio-group/radio-group.custom.styles.d.ts +2 -0
  206. package/dist/components/radio-group/radio-group.custom.styles.js +8 -0
  207. package/dist/components/radio-group/radio-group.custom.styles.js.map +7 -0
  208. package/dist/components/radio-group/radio-group.d.ts +8 -0
  209. package/dist/components/radio-group/radio-group.js +19 -0
  210. package/dist/components/radio-group/radio-group.js.map +7 -0
  211. package/dist/components/radio-group/radio-group.styles.d.ts +2 -0
  212. package/dist/components/radio-group/radio-group.styles.js +11 -0
  213. package/dist/components/radio-group/radio-group.styles.js.map +7 -0
  214. package/dist/components/spinner/spinner.component.d.ts +20 -0
  215. package/dist/components/spinner/spinner.component.js +13 -0
  216. package/dist/components/spinner/spinner.component.js.map +7 -0
  217. package/dist/components/spinner/spinner.styles.d.ts +2 -0
  218. package/dist/components/spinner/spinner.styles.js +9 -0
  219. package/dist/components/spinner/spinner.styles.js.map +7 -0
  220. package/dist/components/switch/switch.component.d.ts +86 -0
  221. package/dist/components/switch/switch.component.js +15 -0
  222. package/dist/components/switch/switch.component.js.map +7 -0
  223. package/dist/components/switch/switch.custom.styles.d.ts +2 -0
  224. package/dist/components/switch/switch.custom.styles.js +8 -0
  225. package/dist/components/switch/switch.custom.styles.js.map +7 -0
  226. package/dist/components/switch/switch.d.ts +8 -0
  227. package/dist/components/switch/switch.js +16 -0
  228. package/dist/components/switch/switch.js.map +7 -0
  229. package/dist/components/switch/switch.styles.d.ts +2 -0
  230. package/dist/components/switch/switch.styles.js +10 -0
  231. package/dist/components/switch/switch.styles.js.map +7 -0
  232. package/dist/components/textarea/textarea.component.d.ts +131 -0
  233. package/dist/components/textarea/textarea.component.js +17 -0
  234. package/dist/components/textarea/textarea.component.js.map +7 -0
  235. package/dist/components/textarea/textarea.custom.styles.d.ts +2 -0
  236. package/dist/components/textarea/textarea.custom.styles.js +8 -0
  237. package/dist/components/textarea/textarea.custom.styles.js.map +7 -0
  238. package/dist/components/textarea/textarea.d.ts +8 -0
  239. package/dist/components/textarea/textarea.js +18 -0
  240. package/dist/components/textarea/textarea.js.map +7 -0
  241. package/dist/components/textarea/textarea.styles.d.ts +2 -0
  242. package/dist/components/textarea/textarea.styles.js +11 -0
  243. package/dist/components/textarea/textarea.styles.js.map +7 -0
  244. package/dist/custom-elements.json +4462 -0
  245. package/dist/events/events.d.ts +8 -0
  246. package/dist/events/syn-blur.d.ts +6 -0
  247. package/dist/events/syn-change.d.ts +6 -0
  248. package/dist/events/syn-clear.d.ts +6 -0
  249. package/dist/events/syn-error.d.ts +8 -0
  250. package/dist/events/syn-focus.d.ts +6 -0
  251. package/dist/events/syn-input.d.ts +6 -0
  252. package/dist/events/syn-invalid.d.ts +6 -0
  253. package/dist/events/syn-load.d.ts +6 -0
  254. package/dist/internal/default-value.d.ts +2 -0
  255. package/dist/internal/form.d.ts +73 -0
  256. package/dist/internal/slot.d.ts +23 -0
  257. package/dist/internal/synergy-element.d.ts +47 -0
  258. package/dist/internal/test/form-control-base-tests.d.ts +7 -0
  259. package/dist/internal/test.d.ts +28 -0
  260. package/dist/internal/watch.d.ts +26 -0
  261. package/dist/styles/component.styles.d.ts +2 -0
  262. package/dist/styles/form-control.custom.styles.d.ts +2 -0
  263. package/dist/styles/form-control.styles.d.ts +2 -0
  264. package/dist/synergy-autoloader.d.ts +4 -0
  265. package/dist/synergy-autoloader.js +41 -0
  266. package/dist/synergy-autoloader.js.map +7 -0
  267. package/dist/synergy.d.ts +14 -0
  268. package/dist/synergy.js +104 -0
  269. package/dist/synergy.js.map +7 -0
  270. package/dist/translations/de.d.ts +3 -0
  271. package/dist/translations/de.js +46 -0
  272. package/dist/translations/de.js.map +7 -0
  273. package/dist/translations/en.d.ts +3 -0
  274. package/dist/translations/en.js +8 -0
  275. package/dist/translations/en.js.map +7 -0
  276. package/dist/utilities/base-path.d.ts +18 -0
  277. package/dist/utilities/base-path.js +10 -0
  278. package/dist/utilities/base-path.js.map +7 -0
  279. package/dist/utilities/form.d.ts +11 -0
  280. package/dist/utilities/form.js +11 -0
  281. package/dist/utilities/form.js.map +7 -0
  282. package/dist/utilities/icon-library.d.ts +1 -0
  283. package/dist/utilities/icon-library.js +14 -0
  284. package/dist/utilities/icon-library.js.map +7 -0
  285. package/dist/utilities/localize.d.ts +33 -0
  286. package/dist/utilities/localize.js +11 -0
  287. package/dist/utilities/localize.js.map +7 -0
  288. package/dist/vscode.html-custom-data.json +760 -0
  289. package/dist/web-types.json +1596 -0
  290. package/package.json +61 -29
package/LICENSE ADDED
@@ -0,0 +1,9 @@
1
+ The MIT License
2
+
3
+ Copyright 2023 SICK AG
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,9 +1,154 @@
1
1
  # @synergy-design-system/components
2
2
 
3
- Synergy Web Component library based on [shoelace](https://shoelace.style/).
3
+ This package provides the base of the Synergy Design System as native web components.
4
+ It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/).
5
+
6
+ ## Getting started
7
+
8
+ ### 1. Package installation
9
+
10
+ Run the following steps to install the required packages.
11
+
12
+ ```bash
13
+ # Install the base library and required css files
14
+ npm install --save @synergy-design-system/components @synergy-design-system/tokens
15
+ ```
16
+
17
+ ---
18
+
19
+ ### 2. Load the design tokens
20
+
21
+ The shipped components make heavy use of design tokens, which are provided via [@synergy-design-system/tokens](https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens). Make sure to follow the installation steps there for help on setting the tokens up. Usually it is enough to load the light or dark theme included there.
22
+
23
+ ---
24
+
25
+ ### 3. Define the elements
26
+
27
+ There are multiple ways to load the components:
28
+
29
+ #### Loading all available components
30
+
31
+ To make all components available, just load the main package file. It will make sure that all components and needed dependencies are loaded and available directly.
32
+
33
+ > Please keep in mind that this way of loading the components will create larger bundle sizes!
34
+
35
+ ```html
36
+ <!-- Example 1: Loading via script type module -->
37
+ <!doctype html>
38
+ <html lang="en">
39
+ <head>
40
+ <meta charset="UTF-8" />
41
+ </head>
42
+ <body>
43
+ <div id="root">
44
+ <syn-button variant="text">Button</syn-button>
45
+ <syn-input></syn-input>
46
+ </div>
47
+ <!-- As we are loading all modules, syn-button and syn-input will render correctly -->
48
+ <script type="module" src="../node_modules/@synergy-design-system/components/dist/synergy.js"></script>
49
+ </body>
50
+ </html>
51
+ ```
52
+
53
+ When using a build system, you should load the bundle in JavaScript or TypeScript directly, for example when using vite:
54
+
55
+ ```typescript
56
+ // main.ts
57
+
58
+ // Do not forget to load the design tokens!
59
+ import '@synergy-design-system/tokens/themes/light.css';
60
+
61
+ // This will load synergy.js via the exports map
62
+ import '@synergy-design-system/components';
63
+ ```
64
+
65
+ #### Loading selected components only
66
+
67
+ Use this when you need complete control about which components are loaded. This will usually lead to smaller bundle sizes, which might be preferable for your application. As a downside, you will have to remember adding missing components to your bundle.
68
+
69
+ ```html
70
+ <!-- Example 1: Loading via script type module -->
71
+ <!doctype html>
72
+ <html lang="en">
73
+ <head>
74
+ <meta charset="UTF-8" />
75
+ </head>
76
+ <body>
77
+ <div id="root">
78
+ <syn-button variant="text">Button</syn-button>
79
+ <syn-input></syn-input>
80
+ </div>
81
+ <!-- We are only loading the button, syn-input will render as an empty div! -->
82
+ <script type="module" src="../node_modules/@synergy-design-system/components/dist/components/button/button.js"></script>
83
+ </body>
84
+ </html>
85
+ ```
86
+
87
+ When using a build system, you may also load the bundle in JavaScript or TypeScript directly, for example when using vite:
88
+
89
+ ```typescript
90
+ // main.ts
91
+
92
+ // Do not forget to load the design tokens!
93
+ import '@synergy-design-system/tokens/themes/light.css';
94
+
95
+ // This will only load and define the button itself
96
+ import '@synergy-design-system/components/components/button/button.js';
97
+ ```
98
+
99
+ ---
100
+
101
+ ### 4. Using the provided types
102
+
103
+ The components are built using typescript and provide types for elements and events out of the box. These can be used for working with the dom when working in a typescript environment. You may use them by importing the needed types and using them for elements, like shown in this example:
104
+
105
+ ```typescript
106
+ // main.ts
107
+
108
+ // Do not forget to load the design tokens!
109
+ import '@synergy-design-system/tokens/themes/light.css';
110
+
111
+ // Example 1: Load the type for syn-button from the root:
112
+ import type { SynButton, SynInvalidEvent } from '@synergy-design-system/components';
113
+
114
+ // Example 2: Load the type from the syn-button dir directly.
115
+ // In this case you will have to load the event type from another file!
116
+ import type { SynButton } from '@synergy-design-system/components/components/button/button';
117
+ import type { SynInvalidEvent } from '@synergy-design-system/components/events/syn-invalid';
118
+
119
+ document.addEventListener('load', () => {
120
+ const loadedSynButtons = document.querySelectorAll<SynButton>('syn-button');
121
+
122
+ // Attach a syn-invalid event that is fired every time a button becomes invalid
123
+ Array
124
+ .from(loadedSynButtons) // Type: SynButton[]
125
+ .addEventListener('syn-invalid', (e: SynInvalidEvent) => {
126
+ console.log('Button is now invalid!', e);
127
+ });
128
+ });
129
+ ```
130
+
131
+ ---
132
+
133
+ ### 5. Add html autocompletion to VSCode (optional)
134
+
135
+ This package ships with a [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest) that may be used to provide typings for tags. To enable code completion, please proceed the following way:
136
+
137
+ 1. Install the `@synergy-design-system/components` package.
138
+ 2. If you do **not** have a `.vscode/settings.json` file yet, create it.
139
+ 3. Add support for [vscode-custom-data](https://github.com/microsoft/vscode-custom-data) by adding the following setting to your `.vscode/settings.json`: `"html.customData": ["./node_modules/@synergy-design-system/components/dist/vscode.html-custom-data.json"]`
140
+ 4. Restart VSCode.
141
+ 5. Switch to an html (or similar) file and type `<syn`. Auto-complete now provides a list of available components along with its attributes.
142
+
143
+ > Note the path above is valid for installations using npm.
144
+ > When using another package manager, make sure to set the proper path to `vscode.html-custom-data.json`!
145
+
146
+ ---
4
147
 
5
148
  ## Local setup
149
+
6
150
  ### Using the vendor cli
151
+
7
152
  The vendor cli is taking care about updating our code base according to a new version of shoelace.
8
153
 
9
154
  To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
@@ -12,3 +157,7 @@ If code in our components library should be updated to this new shoelace version
12
157
 
13
158
  All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
14
159
  `pnpm vendor.eject "src/declaration.d.ts"`.
160
+
161
+ ### Adding events to the output
162
+
163
+ To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.
package/dist/chunks/chunk.23HTU3YE.js ADDED
@@ -0,0 +1,189 @@
1
+ import {
2
+ textarea_custom_styles_default
3
+ } from "./chunk.YBIBWRKC.js";
4
+ import {
5
+ form_control_styles_default
6
+ } from "./chunk.JHXCBOUD.js";
7
+ import {
8
+ component_styles_default
9
+ } from "./chunk.O7USYXBT.js";
10
+
11
+ // src/components/textarea/textarea.styles.ts
12
+ import { css } from "lit";
13
+ var textarea_styles_default = css`
14
+ /* stylelint-disable */
15
+ ${component_styles_default}
16
+ ${form_control_styles_default}
17
+
18
+ :host {
19
+ display: block;
20
+ }
21
+
22
+ .textarea {
23
+ display: flex;
24
+ align-items: center;
25
+ position: relative;
26
+ width: 100%;
27
+ font-family: var(--syn-input-font-family);
28
+ font-weight: var(--syn-input-font-weight);
29
+ line-height: var(--syn-line-height-normal);
30
+ letter-spacing: var(--syn-input-letter-spacing);
31
+ vertical-align: middle;
32
+ transition:
33
+ var(--syn-transition-fast) color,
34
+ var(--syn-transition-fast) border,
35
+ var(--syn-transition-fast) box-shadow,
36
+ var(--syn-transition-fast) background-color;
37
+ cursor: text;
38
+ }
39
+
40
+ /* Standard textareas */
41
+ .textarea--standard {
42
+ background-color: var(--syn-input-background-color);
43
+ border: solid var(--syn-input-border-width) var(--syn-input-border-color);
44
+ }
45
+
46
+ .textarea--standard:hover:not(.textarea--disabled) {
47
+ background-color: var(--syn-input-background-color-hover);
48
+ border-color: var(--syn-input-border-color-hover);
49
+ }
50
+ .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
51
+ color: var(--syn-input-color-hover);
52
+ }
53
+
54
+ .textarea--standard.textarea--focused:not(.textarea--disabled) {
55
+ background-color: var(--syn-input-background-color-focus);
56
+ border-color: var(--syn-input-border-color-focus);
57
+ color: var(--syn-input-color-focus);
58
+ box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
59
+ }
60
+
61
+ .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
62
+ color: var(--syn-input-color-focus);
63
+ }
64
+
65
+ .textarea--standard.textarea--disabled {
66
+ background-color: var(--syn-input-background-color-disabled);
67
+ border-color: var(--syn-input-border-color-disabled);
68
+ opacity: 0.5;
69
+ cursor: not-allowed;
70
+ }
71
+
72
+ .textarea--standard.textarea--disabled .textarea__control {
73
+ color: var(--syn-input-color-disabled);
74
+ }
75
+
76
+ .textarea--standard.textarea--disabled .textarea__control::placeholder {
77
+ color: var(--syn-input-placeholder-color-disabled);
78
+ }
79
+
80
+ /* Readonly textareas */
81
+ .textarea--readonly {
82
+ border: none;
83
+ background-color: var(--syn-input-readonly-background-color);
84
+ color: var(--syn-input-color);
85
+ }
86
+
87
+ .textarea--readonly:hover:not(.textarea--disabled) {
88
+ background-color: var(--syn-input-readonly-background-color-hover);
89
+ }
90
+
91
+ .textarea--readonly.textarea--focused:not(.textarea--disabled) {
92
+ background-color: var(--syn-input-readonly-background-color-focus);
93
+ outline: var(--syn-focus-ring);
94
+ outline-offset: var(--syn-focus-ring-offset);
95
+ }
96
+
97
+ .textarea--readonly.textarea--disabled {
98
+ background-color: var(--syn-input-readonly-background-color-disabled);
99
+ opacity: 0.5;
100
+ cursor: not-allowed;
101
+ }
102
+
103
+ .textarea__control {
104
+ flex: 1 1 auto;
105
+ font-family: inherit;
106
+ font-size: inherit;
107
+ font-weight: inherit;
108
+ line-height: 1.4;
109
+ color: var(--syn-input-color);
110
+ border: none;
111
+ background: none;
112
+ box-shadow: none;
113
+ cursor: inherit;
114
+ -webkit-appearance: none;
115
+ }
116
+
117
+ .textarea__control::-webkit-search-decoration,
118
+ .textarea__control::-webkit-search-cancel-button,
119
+ .textarea__control::-webkit-search-results-button,
120
+ .textarea__control::-webkit-search-results-decoration {
121
+ -webkit-appearance: none;
122
+ }
123
+
124
+ .textarea__control::placeholder {
125
+ color: var(--syn-input-placeholder-color);
126
+ user-select: none;
127
+ -webkit-user-select: none;
128
+ }
129
+
130
+ .textarea__control:focus {
131
+ outline: none;
132
+ }
133
+
134
+ /*
135
+ * Size modifiers
136
+ */
137
+
138
+ .textarea--small {
139
+ border-radius: var(--syn-input-border-radius-small);
140
+ font-size: var(--syn-input-font-size-small);
141
+ }
142
+
143
+ .textarea--small .textarea__control {
144
+ padding: 0.5em var(--syn-input-spacing-small);
145
+ }
146
+
147
+ .textarea--medium {
148
+ border-radius: var(--syn-input-border-radius-medium);
149
+ font-size: var(--syn-input-font-size-medium);
150
+ }
151
+
152
+ .textarea--medium .textarea__control {
153
+ padding: 0.5em var(--syn-input-spacing-medium);
154
+ }
155
+
156
+ .textarea--large {
157
+ border-radius: var(--syn-input-border-radius-large);
158
+ font-size: var(--syn-input-font-size-large);
159
+ }
160
+
161
+ .textarea--large .textarea__control {
162
+ padding: 0.5em var(--syn-input-spacing-large);
163
+ }
164
+
165
+ /*
166
+ * Resize types
167
+ */
168
+
169
+ .textarea--resize-none .textarea__control {
170
+ resize: none;
171
+ }
172
+
173
+ .textarea--resize-vertical .textarea__control {
174
+ resize: vertical;
175
+ }
176
+
177
+ .textarea--resize-auto .textarea__control {
178
+ height: auto;
179
+ resize: none;
180
+ overflow-y: hidden;
181
+ }
182
+
183
+ ${textarea_custom_styles_default}
184
+ `;
185
+
186
+ export {
187
+ textarea_styles_default
188
+ };
189
+ //# sourceMappingURL=chunk.23HTU3YE.js.map
package/dist/chunks/chunk.23HTU3YE.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/textarea/textarea.styles.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './textarea.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n ${componentStyles}\n ${formControlStyles}\n\n :host {\n display: block;\n }\n\n .textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--syn-input-font-family);\n font-weight: var(--syn-input-font-weight);\n line-height: var(--syn-line-height-normal);\n letter-spacing: var(--syn-input-letter-spacing);\n vertical-align: middle;\n transition:\n var(--syn-transition-fast) color,\n var(--syn-transition-fast) border,\n var(--syn-transition-fast) box-shadow,\n var(--syn-transition-fast) background-color;\n cursor: text;\n }\n\n /* Standard textareas */\n .textarea--standard {\n background-color: var(--syn-input-background-color);\n border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n }\n\n .textarea--standard:hover:not(.textarea--disabled) {\n background-color: var(--syn-input-background-color-hover);\n border-color: var(--syn-input-border-color-hover);\n }\n .textarea--standard:hover:not(.textarea--disabled) .textarea__control {\n color: var(--syn-input-color-hover);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) {\n background-color: var(--syn-input-background-color-focus);\n border-color: var(--syn-input-border-color-focus);\n color: var(--syn-input-color-focus);\n box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n }\n\n .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {\n color: var(--syn-input-color-focus);\n }\n\n .textarea--standard.textarea--disabled {\n background-color: var(--syn-input-background-color-disabled);\n border-color: var(--syn-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea--standard.textarea--disabled .textarea__control {\n color: var(--syn-input-color-disabled);\n }\n\n .textarea--standard.textarea--disabled .textarea__control::placeholder {\n color: var(--syn-input-placeholder-color-disabled);\n }\n\n /* Readonly textareas */\n .textarea--readonly {\n border: none;\n background-color: var(--syn-input-readonly-background-color);\n color: var(--syn-input-color);\n }\n\n .textarea--readonly:hover:not(.textarea--disabled) {\n background-color: var(--syn-input-readonly-background-color-hover);\n }\n\n .textarea--readonly.textarea--focused:not(.textarea--disabled) {\n background-color: var(--syn-input-readonly-background-color-focus);\n outline: var(--syn-focus-ring);\n outline-offset: var(--syn-focus-ring-offset);\n }\n\n .textarea--readonly.textarea--disabled {\n background-color: var(--syn-input-readonly-background-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--syn-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .textarea__control::-webkit-search-decoration,\n .textarea__control::-webkit-search-cancel-button,\n .textarea__control::-webkit-search-results-button,\n .textarea__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .textarea__control::placeholder {\n color: var(--syn-input-placeholder-color);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .textarea__control:focus {\n outline: none;\n }\n\n /*\n * Size modifiers\n */\n\n .textarea--small {\n border-radius: var(--syn-input-border-radius-small);\n font-size: var(--syn-input-font-size-small);\n }\n\n .textarea--small .textarea__control {\n padding: 0.5em var(--syn-input-spacing-small);\n }\n\n .textarea--medium {\n border-radius: var(--syn-input-border-radius-medium);\n font-size: var(--syn-input-font-size-medium);\n }\n\n .textarea--medium .textarea__control {\n padding: 0.5em var(--syn-input-spacing-medium);\n }\n\n .textarea--large {\n border-radius: var(--syn-input-border-radius-large);\n font-size: var(--syn-input-font-size-large);\n }\n\n .textarea--large .textarea__control {\n padding: 0.5em var(--syn-input-spacing-large);\n }\n\n /*\n * Resize types\n */\n\n .textarea--resize-none .textarea__control {\n resize: none;\n }\n\n .textarea--resize-vertical .textarea__control {\n resize: vertical;\n }\n\n .textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n overflow-y: hidden;\n }\n\n ${customStyles}\n`;\n\n"],
5
+ "mappings": ";;;;;;;;;;;AAMA,SAAS,WAAW;AAKpB,IAAO,0BAAQ;AAAA;AAAA,IAEX,wBAAe;AAAA,IACf,2BAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAuKjB,8BAAY;AAAA;",
6
+ "names": []
7
+ }
package/dist/chunks/chunk.27VJRQCE.js ADDED
@@ -0,0 +1,224 @@
1
+ import {
2
+ defaultValue
3
+ } from "./chunk.WFAJR3FN.js";
4
+ import {
5
+ checkbox_styles_default
6
+ } from "./chunk.4CBN5LPQ.js";
7
+ import {
8
+ FormControlController
9
+ } from "./chunk.P2LNG2PZ.js";
10
+ import {
11
+ SynIcon
12
+ } from "./chunk.CLAMILD3.js";
13
+ import {
14
+ watch
15
+ } from "./chunk.VZ7S7YYN.js";
16
+ import {
17
+ SynergyElement
18
+ } from "./chunk.CRL545VA.js";
19
+ import {
20
+ __decorateClass
21
+ } from "./chunk.DJOAQ4JU.js";
22
+
23
+ // src/components/checkbox/checkbox.component.ts
24
+ import { classMap } from "lit/directives/class-map.js";
25
+ import { html } from "lit";
26
+ import { ifDefined } from "lit/directives/if-defined.js";
27
+ import { live } from "lit/directives/live.js";
28
+ import { property, query, state } from "lit/decorators.js";
29
+ var SynCheckbox = class extends SynergyElement {
30
+ constructor() {
31
+ super(...arguments);
32
+ this.formControlController = new FormControlController(this, {
33
+ value: (control) => control.checked ? control.value || "on" : void 0,
34
+ defaultValue: (control) => control.defaultChecked,
35
+ setValue: (control, checked) => control.checked = checked
36
+ });
37
+ this.hasFocus = false;
38
+ this.title = "";
39
+ this.name = "";
40
+ this.size = "medium";
41
+ this.disabled = false;
42
+ this.checked = false;
43
+ this.indeterminate = false;
44
+ this.defaultChecked = false;
45
+ this.form = "";
46
+ this.required = false;
47
+ }
48
+ /** Gets the validity state object */
49
+ get validity() {
50
+ return this.input.validity;
51
+ }
52
+ /** Gets the validation message */
53
+ get validationMessage() {
54
+ return this.input.validationMessage;
55
+ }
56
+ firstUpdated() {
57
+ this.formControlController.updateValidity();
58
+ }
59
+ handleClick() {
60
+ this.checked = !this.checked;
61
+ this.indeterminate = false;
62
+ this.emit("syn-change");
63
+ }
64
+ handleBlur() {
65
+ this.hasFocus = false;
66
+ this.emit("syn-blur");
67
+ }
68
+ handleInput() {
69
+ this.emit("syn-input");
70
+ }
71
+ handleInvalid(event) {
72
+ this.formControlController.setValidity(false);
73
+ this.formControlController.emitInvalidEvent(event);
74
+ }
75
+ handleFocus() {
76
+ this.hasFocus = true;
77
+ this.emit("syn-focus");
78
+ }
79
+ handleDisabledChange() {
80
+ this.formControlController.setValidity(this.disabled);
81
+ }
82
+ handleStateChange() {
83
+ this.input.checked = this.checked;
84
+ this.input.indeterminate = this.indeterminate;
85
+ this.formControlController.updateValidity();
86
+ }
87
+ /** Simulates a click on the checkbox. */
88
+ click() {
89
+ this.input.click();
90
+ }
91
+ /** Sets focus on the checkbox. */
92
+ focus(options) {
93
+ this.input.focus(options);
94
+ }
95
+ /** Removes focus from the checkbox. */
96
+ blur() {
97
+ this.input.blur();
98
+ }
99
+ /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
100
+ checkValidity() {
101
+ return this.input.checkValidity();
102
+ }
103
+ /** Gets the associated form, if one exists. */
104
+ getForm() {
105
+ return this.formControlController.getForm();
106
+ }
107
+ /** Checks for validity and shows the browser's validation message if the control is invalid. */
108
+ reportValidity() {
109
+ return this.input.reportValidity();
110
+ }
111
+ /**
112
+ * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
113
+ * the custom validation message, call this method with an empty string.
114
+ */
115
+ setCustomValidity(message) {
116
+ this.input.setCustomValidity(message);
117
+ this.formControlController.updateValidity();
118
+ }
119
+ render() {
120
+ return html`
121
+ <label
122
+ part="base"
123
+ class=${classMap({
124
+ checkbox: true,
125
+ "checkbox--checked": this.checked,
126
+ "checkbox--disabled": this.disabled,
127
+ "checkbox--focused": this.hasFocus,
128
+ "checkbox--indeterminate": this.indeterminate,
129
+ "checkbox--small": this.size === "small",
130
+ "checkbox--medium": this.size === "medium",
131
+ "checkbox--large": this.size === "large"
132
+ })}
133
+ >
134
+ <input
135
+ class="checkbox__input"
136
+ type="checkbox"
137
+ title=${this.title}
138
+ name=${this.name}
139
+ value=${ifDefined(this.value)}
140
+ .indeterminate=${live(this.indeterminate)}
141
+ .checked=${live(this.checked)}
142
+ .disabled=${this.disabled}
143
+ .required=${this.required}
144
+ aria-checked=${this.checked ? "true" : "false"}
145
+ @click=${this.handleClick}
146
+ @input=${this.handleInput}
147
+ @invalid=${this.handleInvalid}
148
+ @blur=${this.handleBlur}
149
+ @focus=${this.handleFocus}
150
+ />
151
+
152
+ <span
153
+ part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}"
154
+ class="checkbox__control"
155
+ >
156
+ ${this.checked ? html`
157
+ <syn-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></syn-icon>
158
+ ` : ""}
159
+ ${!this.checked && this.indeterminate ? html`
160
+ <syn-icon
161
+ part="indeterminate-icon"
162
+ class="checkbox__indeterminate-icon"
163
+ library="system"
164
+ name="indeterminate"
165
+ ></syn-icon>
166
+ ` : ""}
167
+ </span>
168
+
169
+ <div part="label" class="checkbox__label">
170
+ <slot></slot>
171
+ </div>
172
+ </label>
173
+ `;
174
+ }
175
+ };
176
+ SynCheckbox.styles = checkbox_styles_default;
177
+ SynCheckbox.dependencies = { "syn-icon": SynIcon };
178
+ __decorateClass([
179
+ query('input[type="checkbox"]')
180
+ ], SynCheckbox.prototype, "input", 2);
181
+ __decorateClass([
182
+ state()
183
+ ], SynCheckbox.prototype, "hasFocus", 2);
184
+ __decorateClass([
185
+ property()
186
+ ], SynCheckbox.prototype, "title", 2);
187
+ __decorateClass([
188
+ property()
189
+ ], SynCheckbox.prototype, "name", 2);
190
+ __decorateClass([
191
+ property()
192
+ ], SynCheckbox.prototype, "value", 2);
193
+ __decorateClass([
194
+ property({ reflect: true })
195
+ ], SynCheckbox.prototype, "size", 2);
196
+ __decorateClass([
197
+ property({ type: Boolean, reflect: true })
198
+ ], SynCheckbox.prototype, "disabled", 2);
199
+ __decorateClass([
200
+ property({ type: Boolean, reflect: true })
201
+ ], SynCheckbox.prototype, "checked", 2);
202
+ __decorateClass([
203
+ property({ type: Boolean, reflect: true })
204
+ ], SynCheckbox.prototype, "indeterminate", 2);
205
+ __decorateClass([
206
+ defaultValue("checked")
207
+ ], SynCheckbox.prototype, "defaultChecked", 2);
208
+ __decorateClass([
209
+ property({ reflect: true })
210
+ ], SynCheckbox.prototype, "form", 2);
211
+ __decorateClass([
212
+ property({ type: Boolean, reflect: true })
213
+ ], SynCheckbox.prototype, "required", 2);
214
+ __decorateClass([
215
+ watch("disabled", { waitUntilFirstUpdate: true })
216
+ ], SynCheckbox.prototype, "handleDisabledChange", 1);
217
+ __decorateClass([
218
+ watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
219
+ ], SynCheckbox.prototype, "handleStateChange", 1);
220
+
221
+ export {
222
+ SynCheckbox
223
+ };
224
+ //# sourceMappingURL=chunk.27VJRQCE.js.map
package/dist/chunks/chunk.27VJRQCE.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/checkbox/checkbox.component.ts"],
4
+ "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n static styles: CSSResultGroup = styles;\n static dependencies = { 'syn-icon': SynIcon };\n\n private readonly formControlController = new FormControlController(this, {\n value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: SynCheckbox) => control.defaultChecked,\n setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n });\n\n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n @state() private hasFocus = false;\n\n @property() title = ''; // make reactive to pass through\n\n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n\n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: string;\n\n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Gets the validity state object */\n get validity() {\n return this.input.validity;\n }\n\n /** Gets the validation message */\n get validationMessage() {\n return this.input.validationMessage;\n }\n\n firstUpdated() {\n this.formControlController.updateValidity();\n }\n\n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('syn-change');\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.emit('syn-blur');\n }\n\n private handleInput() {\n this.emit('syn-input');\n }\n\n private handleInvalid(event: Event) {\n this.formControlController.setValidity(false);\n this.formControlController.emitInvalidEvent(event);\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.emit('syn-focus');\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n // Disabled form controls are always valid\n this.formControlController.setValidity(this.disabled);\n }\n\n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n this.formControlController.updateValidity();\n }\n\n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n\n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n\n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n\n /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n checkValidity() {\n return this.input.checkValidity();\n }\n\n /** Gets the associated form, if one exists. */\n getForm(): HTMLFormElement | null {\n return this.formControlController.getForm();\n }\n\n /** Checks for validity and shows the browser's validation message if the control is invalid. */\n reportValidity() {\n return this.input.reportValidity();\n }\n\n /**\n * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n * the custom validation message, call this method with an empty string.\n */\n setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.formControlController.updateValidity();\n }\n\n render() {\n //\n // NOTE: we use a <div> around the label slot because of this Chrome bug.\n //\n // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n //\n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--small': this.size === 'small',\n 'checkbox--medium': this.size === 'medium',\n 'checkbox--large': this.size === 'large'\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate ? ' control--indeterminate' : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <syn-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n name=\"indeterminate\"\n ></syn-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n <slot></slot>\n </div>\n </label>\n `;\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
package/dist/chunks/chunk.2XZKXVMR.js ADDED
@@ -0,0 +1,44 @@
1
+ // src/components/checkbox/checkbox.custom.styles.ts
2
+ import { css } from "lit";
3
+ var checkbox_custom_styles_default = css`
4
+ .checkbox__control {
5
+ border-radius: var(--syn-input-border-radius-small);
6
+ }
7
+
8
+ :host([data-user-invalid]) .checkbox__control {
9
+ border-color: var(--syn-input-border-color-focus-error);
10
+ }
11
+
12
+ /**
13
+ * Hover
14
+ * Applies the hover state to the whole component
15
+ */
16
+ .checkbox:not(.checkbox--checked):not(.checkbox--disabled):hover .checkbox__control {
17
+ background-color: var(--syn-input-background-color-hover);
18
+ border-color: var(--syn-input-border-color-hover);
19
+ }
20
+
21
+ /**
22
+ * Checked/indeterminate + hover
23
+ * Applies the hover state to the whole component
24
+ */
25
+ .checkbox.checkbox--checked:not(.checkbox--disabled):hover .checkbox__control,
26
+ .checkbox.checkbox--indeterminate:not(.checkbox--disabled):hover .checkbox__control {
27
+ background-color: var(--syn-color-primary-900);
28
+ border-color: var(--syn-color-primary-900);
29
+ }
30
+
31
+ .checkbox__label {
32
+ margin-inline-start: var(--syn-spacing-x-small);
33
+ }
34
+
35
+ /* Disabled */
36
+ .checkbox--disabled .checkbox__label {
37
+ color: var(--syn-color-neutral-700);
38
+ }
39
+ `;
40
+
41
+ export {
42
+ checkbox_custom_styles_default
43
+ };
44
+ //# sourceMappingURL=chunk.2XZKXVMR.js.map