scu-web-components 0.0.14 → 0.0.17

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 (267) hide show
  1. package/dist/custom-elements.json +69 -69
  2. package/dist/docs/components/manifest.json +80 -80
  3. package/dist/docs/config.json +1 -1
  4. package/dist/tokens/source/cssApi/scw-theme-business-hook.css.json +6 -0
  5. package/dist/tokens/source/cssApi/scw-theme-business-hook.css.json.gz +0 -0
  6. package/dist/tokens/source/cssApi/scw-theme-checking-hook.css.json +6 -0
  7. package/dist/tokens/source/cssApi/scw-theme-checking-hook.css.json.gz +0 -0
  8. package/dist/tokens/source/cssApi/scw-theme-credit-cards-hook.css.json +6 -0
  9. package/dist/tokens/source/cssApi/scw-theme-credit-cards-hook.css.json.gz +0 -0
  10. package/dist/tokens/source/cssApi/scw-theme-error-hook.css.json +6 -0
  11. package/dist/tokens/source/cssApi/scw-theme-error-hook.css.json.gz +0 -0
  12. package/dist/tokens/source/cssApi/scw-theme-grey-hook.css.json +6 -0
  13. package/dist/tokens/source/cssApi/scw-theme-grey-hook.css.json.gz +0 -0
  14. package/dist/tokens/source/cssApi/scw-theme-heloc-hook.css.json +6 -0
  15. package/dist/tokens/source/cssApi/scw-theme-heloc-hook.css.json.gz +0 -0
  16. package/dist/tokens/source/cssApi/scw-theme-information-hook.css.json +6 -0
  17. package/dist/tokens/source/cssApi/scw-theme-information-hook.css.json.gz +0 -0
  18. package/dist/tokens/source/cssApi/scw-theme-investments-hook.css.json +6 -0
  19. package/dist/tokens/source/cssApi/scw-theme-investments-hook.css.json.gz +0 -0
  20. package/dist/tokens/source/cssApi/scw-theme-mortgage-hook.css.json +6 -0
  21. package/dist/tokens/source/cssApi/scw-theme-mortgage-hook.css.json.gz +0 -0
  22. package/dist/tokens/source/cssApi/scw-theme-personal-hook.css.json +6 -0
  23. package/dist/tokens/source/cssApi/scw-theme-personal-hook.css.json.gz +0 -0
  24. package/dist/tokens/source/cssApi/scw-theme-primary-hook.css.json +6 -0
  25. package/dist/tokens/source/cssApi/scw-theme-primary-hook.css.json.gz +0 -0
  26. package/dist/tokens/source/cssApi/scw-theme-red-shoes-hook.css.json +6 -0
  27. package/dist/tokens/source/cssApi/scw-theme-red-shoes-hook.css.json.gz +0 -0
  28. package/dist/tokens/source/cssApi/scw-theme-savings-hook.css.json +6 -0
  29. package/dist/tokens/source/cssApi/scw-theme-savings-hook.css.json.gz +0 -0
  30. package/dist/tokens/source/cssApi/scw-theme-student-hook.css.json +6 -0
  31. package/dist/tokens/source/cssApi/scw-theme-student-hook.css.json.gz +0 -0
  32. package/dist/tokens/source/cssApi/scw-theme-success-hook.css.json +6 -0
  33. package/dist/tokens/source/cssApi/scw-theme-success-hook.css.json.gz +0 -0
  34. package/dist/tokens/source/cssApi/scw-theme-warning-hook.css.json +6 -0
  35. package/dist/tokens/source/cssApi/scw-theme-warning-hook.css.json.gz +0 -0
  36. package/dist/tokens/source/cssApi.css +350 -0
  37. package/dist/tokens/source/cssApi.css.gz +0 -0
  38. package/dist/tokens/source/cssApi.css.json +96 -0
  39. package/dist/tokens/source/cssApi.css.json.gz +0 -0
  40. package/dist/tokens/source/jsCss.js +1 -1
  41. package/dist/tokens/source/jsCss.js.gz +0 -0
  42. package/dist/tokens/source/jsCssGenerator.js +1 -1
  43. package/dist/tokens/source/jsCssGenerator.js.gz +0 -0
  44. package/dist/tokens/source/jsCssGeneratorSansAssets.js +1 -1
  45. package/dist/tokens/source/jsCssGeneratorSansAssets.js.gz +0 -0
  46. package/dist/tokens/styles.css +350 -0
  47. package/dist/tokens/styles.css.gz +0 -0
  48. package/dist/tokens/stylesEmbedded.css +350 -0
  49. package/dist/tokens/stylesEmbedded.css.gz +0 -0
  50. package/package.json +3 -2
  51. package/src/utils/responsive/breakpoints.mjs +22 -0
  52. package/dist/chunks/chunk.24V5767A.js +0 -2
  53. package/dist/chunks/chunk.24V5767A.js.map +0 -7
  54. package/dist/chunks/chunk.2JGLMQBO.js +0 -17
  55. package/dist/chunks/chunk.2JGLMQBO.js.map +0 -7
  56. package/dist/chunks/chunk.2OGLBG6V.js +0 -2
  57. package/dist/chunks/chunk.2OGLBG6V.js.map +0 -7
  58. package/dist/chunks/chunk.2YPNWI6A.js +0 -2
  59. package/dist/chunks/chunk.2YPNWI6A.js.map +0 -7
  60. package/dist/chunks/chunk.3LZ2QEZD.js +0 -2
  61. package/dist/chunks/chunk.3LZ2QEZD.js.map +0 -7
  62. package/dist/chunks/chunk.3VX5S2EF.js +0 -248
  63. package/dist/chunks/chunk.3VX5S2EF.js.map +0 -7
  64. package/dist/chunks/chunk.3XFY5V3W.js +0 -2
  65. package/dist/chunks/chunk.3XFY5V3W.js.map +0 -7
  66. package/dist/chunks/chunk.42T5K4LW.js +0 -2
  67. package/dist/chunks/chunk.42T5K4LW.js.map +0 -7
  68. package/dist/chunks/chunk.4LETPOO6.js +0 -17
  69. package/dist/chunks/chunk.4LETPOO6.js.map +0 -7
  70. package/dist/chunks/chunk.4TPUL4UC.js +0 -248
  71. package/dist/chunks/chunk.4TPUL4UC.js.map +0 -7
  72. package/dist/chunks/chunk.5HFTCC2U.js +0 -248
  73. package/dist/chunks/chunk.5HFTCC2U.js.map +0 -7
  74. package/dist/chunks/chunk.5IS6RKXJ.js +0 -2
  75. package/dist/chunks/chunk.5IS6RKXJ.js.map +0 -7
  76. package/dist/chunks/chunk.5RNXQTNO.js +0 -4
  77. package/dist/chunks/chunk.5RNXQTNO.js.map +0 -7
  78. package/dist/chunks/chunk.5WHRZ32E.js +0 -2
  79. package/dist/chunks/chunk.5WHRZ32E.js.map +0 -7
  80. package/dist/chunks/chunk.6EMPXCD2.js +0 -2
  81. package/dist/chunks/chunk.6EMPXCD2.js.map +0 -7
  82. package/dist/chunks/chunk.6MEYURY5.js +0 -17
  83. package/dist/chunks/chunk.6MEYURY5.js.map +0 -7
  84. package/dist/chunks/chunk.6OM5IIEW.js +0 -17
  85. package/dist/chunks/chunk.6OM5IIEW.js.map +0 -7
  86. package/dist/chunks/chunk.6XFPEKI6.js +0 -2
  87. package/dist/chunks/chunk.6XFPEKI6.js.map +0 -7
  88. package/dist/chunks/chunk.72WKCCIK.js +0 -2
  89. package/dist/chunks/chunk.72WKCCIK.js.map +0 -7
  90. package/dist/chunks/chunk.7FPJHYYG.js +0 -2
  91. package/dist/chunks/chunk.7FPJHYYG.js.map +0 -7
  92. package/dist/chunks/chunk.7OLAPDNG.js +0 -2
  93. package/dist/chunks/chunk.7OLAPDNG.js.map +0 -7
  94. package/dist/chunks/chunk.7PVCEEH4.js +0 -17
  95. package/dist/chunks/chunk.7PVCEEH4.js.map +0 -7
  96. package/dist/chunks/chunk.7QLJ2WVO.js +0 -4
  97. package/dist/chunks/chunk.7QLJ2WVO.js.map +0 -7
  98. package/dist/chunks/chunk.7WQZG5J4.js +0 -256
  99. package/dist/chunks/chunk.7WQZG5J4.js.map +0 -7
  100. package/dist/chunks/chunk.A3L3HAIU.js +0 -17
  101. package/dist/chunks/chunk.A3L3HAIU.js.map +0 -7
  102. package/dist/chunks/chunk.A4CPTDR2.js +0 -2
  103. package/dist/chunks/chunk.A4CPTDR2.js.map +0 -7
  104. package/dist/chunks/chunk.AJNSUUTO.js +0 -2
  105. package/dist/chunks/chunk.AJNSUUTO.js.map +0 -7
  106. package/dist/chunks/chunk.ALWGDFKP.js +0 -256
  107. package/dist/chunks/chunk.ALWGDFKP.js.map +0 -7
  108. package/dist/chunks/chunk.AVHM62UB.js +0 -2
  109. package/dist/chunks/chunk.AVHM62UB.js.map +0 -7
  110. package/dist/chunks/chunk.BJKRRAIV.js +0 -2
  111. package/dist/chunks/chunk.BJKRRAIV.js.map +0 -7
  112. package/dist/chunks/chunk.BQFFP6YO.js +0 -2
  113. package/dist/chunks/chunk.BQFFP6YO.js.map +0 -7
  114. package/dist/chunks/chunk.BS63UGCN.js +0 -2
  115. package/dist/chunks/chunk.BS63UGCN.js.map +0 -7
  116. package/dist/chunks/chunk.BXNLDFIF.js +0 -17
  117. package/dist/chunks/chunk.BXNLDFIF.js.map +0 -7
  118. package/dist/chunks/chunk.C7HVESZZ.js +0 -4
  119. package/dist/chunks/chunk.C7HVESZZ.js.map +0 -7
  120. package/dist/chunks/chunk.C7YDEBNB.js +0 -2
  121. package/dist/chunks/chunk.C7YDEBNB.js.map +0 -7
  122. package/dist/chunks/chunk.CIHOF2AT.js +0 -4
  123. package/dist/chunks/chunk.CIHOF2AT.js.map +0 -7
  124. package/dist/chunks/chunk.CWNIRMSQ.js +0 -2
  125. package/dist/chunks/chunk.CWNIRMSQ.js.map +0 -7
  126. package/dist/chunks/chunk.D3NKZAQX.js +0 -4
  127. package/dist/chunks/chunk.D3NKZAQX.js.map +0 -7
  128. package/dist/chunks/chunk.DJT4JFAM.js +0 -2
  129. package/dist/chunks/chunk.DJT4JFAM.js.map +0 -7
  130. package/dist/chunks/chunk.DM37HC2Z.js +0 -248
  131. package/dist/chunks/chunk.DM37HC2Z.js.map +0 -7
  132. package/dist/chunks/chunk.DOB7NEBD.js +0 -17
  133. package/dist/chunks/chunk.DOB7NEBD.js.map +0 -7
  134. package/dist/chunks/chunk.DSURZFO6.js +0 -17
  135. package/dist/chunks/chunk.DSURZFO6.js.map +0 -7
  136. package/dist/chunks/chunk.DWQBU2W3.js +0 -2
  137. package/dist/chunks/chunk.DWQBU2W3.js.map +0 -7
  138. package/dist/chunks/chunk.EGOU5NNX.js +0 -256
  139. package/dist/chunks/chunk.EGOU5NNX.js.map +0 -7
  140. package/dist/chunks/chunk.EJN24JDG.js +0 -4
  141. package/dist/chunks/chunk.EJN24JDG.js.map +0 -7
  142. package/dist/chunks/chunk.ERS2LHPX.js +0 -2
  143. package/dist/chunks/chunk.ERS2LHPX.js.map +0 -7
  144. package/dist/chunks/chunk.FARGBWSO.js +0 -2
  145. package/dist/chunks/chunk.FARGBWSO.js.map +0 -7
  146. package/dist/chunks/chunk.FMESUIDM.js +0 -248
  147. package/dist/chunks/chunk.FMESUIDM.js.map +0 -7
  148. package/dist/chunks/chunk.FOYMD2Z3.js +0 -248
  149. package/dist/chunks/chunk.FOYMD2Z3.js.map +0 -7
  150. package/dist/chunks/chunk.FPIOHJIV.js +0 -248
  151. package/dist/chunks/chunk.FPIOHJIV.js.map +0 -7
  152. package/dist/chunks/chunk.FTGUVK33.js +0 -2
  153. package/dist/chunks/chunk.FTGUVK33.js.map +0 -7
  154. package/dist/chunks/chunk.FZVMLSWI.js +0 -2
  155. package/dist/chunks/chunk.FZVMLSWI.js.map +0 -7
  156. package/dist/chunks/chunk.GBRGIUR7.js +0 -2
  157. package/dist/chunks/chunk.GBRGIUR7.js.map +0 -7
  158. package/dist/chunks/chunk.GO5DFO25.js +0 -17
  159. package/dist/chunks/chunk.GO5DFO25.js.map +0 -7
  160. package/dist/chunks/chunk.GSAHIC5A.js +0 -2
  161. package/dist/chunks/chunk.GSAHIC5A.js.map +0 -7
  162. package/dist/chunks/chunk.GU6KITXR.js +0 -4
  163. package/dist/chunks/chunk.GU6KITXR.js.map +0 -7
  164. package/dist/chunks/chunk.HO5WDOW7.js +0 -4
  165. package/dist/chunks/chunk.HO5WDOW7.js.map +0 -7
  166. package/dist/chunks/chunk.HQVBB74W.js +0 -248
  167. package/dist/chunks/chunk.HQVBB74W.js.map +0 -7
  168. package/dist/chunks/chunk.IJYTCKBX.js +0 -256
  169. package/dist/chunks/chunk.IJYTCKBX.js.map +0 -7
  170. package/dist/chunks/chunk.JR7VHEBV.js +0 -2
  171. package/dist/chunks/chunk.JR7VHEBV.js.map +0 -7
  172. package/dist/chunks/chunk.JVWZSBDQ.js +0 -2
  173. package/dist/chunks/chunk.JVWZSBDQ.js.map +0 -7
  174. package/dist/chunks/chunk.K5K6KLKL.js +0 -2
  175. package/dist/chunks/chunk.K5K6KLKL.js.map +0 -7
  176. package/dist/chunks/chunk.KDQDIARJ.js +0 -4
  177. package/dist/chunks/chunk.KDQDIARJ.js.map +0 -7
  178. package/dist/chunks/chunk.KRXR5GLU.js +0 -2
  179. package/dist/chunks/chunk.KRXR5GLU.js.map +0 -7
  180. package/dist/chunks/chunk.LXVYLELY.js +0 -256
  181. package/dist/chunks/chunk.LXVYLELY.js.map +0 -7
  182. package/dist/chunks/chunk.LYU6SWCY.js +0 -2
  183. package/dist/chunks/chunk.LYU6SWCY.js.map +0 -7
  184. package/dist/chunks/chunk.M326OSG5.js +0 -2
  185. package/dist/chunks/chunk.M326OSG5.js.map +0 -7
  186. package/dist/chunks/chunk.MDBRRL2K.js +0 -2
  187. package/dist/chunks/chunk.MDBRRL2K.js.map +0 -7
  188. package/dist/chunks/chunk.MRG6GDNO.js +0 -256
  189. package/dist/chunks/chunk.MRG6GDNO.js.map +0 -7
  190. package/dist/chunks/chunk.MXLEDBOH.js +0 -2
  191. package/dist/chunks/chunk.MXLEDBOH.js.map +0 -7
  192. package/dist/chunks/chunk.NCGTJPXB.js +0 -2
  193. package/dist/chunks/chunk.NCGTJPXB.js.map +0 -7
  194. package/dist/chunks/chunk.NO662DMX.js +0 -2
  195. package/dist/chunks/chunk.NO662DMX.js.map +0 -7
  196. package/dist/chunks/chunk.NWMVTP6R.js +0 -2
  197. package/dist/chunks/chunk.NWMVTP6R.js.map +0 -7
  198. package/dist/chunks/chunk.OCWKTXPR.js +0 -2
  199. package/dist/chunks/chunk.OCWKTXPR.js.map +0 -7
  200. package/dist/chunks/chunk.OFJIWBBK.js +0 -17
  201. package/dist/chunks/chunk.OFJIWBBK.js.map +0 -7
  202. package/dist/chunks/chunk.OZFJTYAZ.js +0 -256
  203. package/dist/chunks/chunk.OZFJTYAZ.js.map +0 -7
  204. package/dist/chunks/chunk.PLTBQ7DH.js +0 -2
  205. package/dist/chunks/chunk.PLTBQ7DH.js.map +0 -7
  206. package/dist/chunks/chunk.POMD6HP5.js +0 -2
  207. package/dist/chunks/chunk.POMD6HP5.js.map +0 -7
  208. package/dist/chunks/chunk.PQXWIVHO.js +0 -2
  209. package/dist/chunks/chunk.PQXWIVHO.js.map +0 -7
  210. package/dist/chunks/chunk.Q2ZM7GYB.js +0 -2
  211. package/dist/chunks/chunk.Q2ZM7GYB.js.map +0 -7
  212. package/dist/chunks/chunk.QJYAC5DP.js +0 -2
  213. package/dist/chunks/chunk.QJYAC5DP.js.map +0 -7
  214. package/dist/chunks/chunk.RAGWQGAB.js +0 -2
  215. package/dist/chunks/chunk.RAGWQGAB.js.map +0 -7
  216. package/dist/chunks/chunk.RC3Y4QKC.js +0 -2
  217. package/dist/chunks/chunk.RC3Y4QKC.js.map +0 -7
  218. package/dist/chunks/chunk.RWTLTBM6.js +0 -2
  219. package/dist/chunks/chunk.RWTLTBM6.js.map +0 -7
  220. package/dist/chunks/chunk.S2NCWVSN.js +0 -256
  221. package/dist/chunks/chunk.S2NCWVSN.js.map +0 -7
  222. package/dist/chunks/chunk.SG4QRTJJ.js +0 -256
  223. package/dist/chunks/chunk.SG4QRTJJ.js.map +0 -7
  224. package/dist/chunks/chunk.SNPBQAU7.js +0 -17
  225. package/dist/chunks/chunk.SNPBQAU7.js.map +0 -7
  226. package/dist/chunks/chunk.SSIAYAIS.js +0 -4
  227. package/dist/chunks/chunk.SSIAYAIS.js.map +0 -7
  228. package/dist/chunks/chunk.TATO6JEE.js +0 -2
  229. package/dist/chunks/chunk.TATO6JEE.js.map +0 -7
  230. package/dist/chunks/chunk.TCZKT5R7.js +0 -248
  231. package/dist/chunks/chunk.TCZKT5R7.js.map +0 -7
  232. package/dist/chunks/chunk.TXY4KKCK.js +0 -248
  233. package/dist/chunks/chunk.TXY4KKCK.js.map +0 -7
  234. package/dist/chunks/chunk.U5YAJDOO.js +0 -2
  235. package/dist/chunks/chunk.U5YAJDOO.js.map +0 -7
  236. package/dist/chunks/chunk.UC62M6HO.js +0 -256
  237. package/dist/chunks/chunk.UC62M6HO.js.map +0 -7
  238. package/dist/chunks/chunk.UIEDTBCA.js +0 -2
  239. package/dist/chunks/chunk.UIEDTBCA.js.map +0 -7
  240. package/dist/chunks/chunk.VBADKI3X.js +0 -2
  241. package/dist/chunks/chunk.VBADKI3X.js.map +0 -7
  242. package/dist/chunks/chunk.VG2C3CXQ.js +0 -2
  243. package/dist/chunks/chunk.VG2C3CXQ.js.map +0 -7
  244. package/dist/chunks/chunk.VJOMSNKI.js +0 -2
  245. package/dist/chunks/chunk.VJOMSNKI.js.map +0 -7
  246. package/dist/chunks/chunk.VKEOYY6W.js +0 -4
  247. package/dist/chunks/chunk.VKEOYY6W.js.map +0 -7
  248. package/dist/chunks/chunk.WD5BLRHC.js +0 -2
  249. package/dist/chunks/chunk.WD5BLRHC.js.map +0 -7
  250. package/dist/chunks/chunk.WDWX2PYK.js +0 -2
  251. package/dist/chunks/chunk.WDWX2PYK.js.map +0 -7
  252. package/dist/chunks/chunk.WKTCJRNO.js +0 -256
  253. package/dist/chunks/chunk.WKTCJRNO.js.map +0 -7
  254. package/dist/chunks/chunk.WMJFRAUU.js +0 -248
  255. package/dist/chunks/chunk.WMJFRAUU.js.map +0 -7
  256. package/dist/chunks/chunk.WSU6CE53.js +0 -248
  257. package/dist/chunks/chunk.WSU6CE53.js.map +0 -7
  258. package/dist/chunks/chunk.WURSPCXJ.js +0 -4
  259. package/dist/chunks/chunk.WURSPCXJ.js.map +0 -7
  260. package/dist/chunks/chunk.YJ6TKSVL.js +0 -2
  261. package/dist/chunks/chunk.YJ6TKSVL.js.map +0 -7
  262. package/dist/chunks/chunk.YSV3QDAO.js +0 -2
  263. package/dist/chunks/chunk.YSV3QDAO.js.map +0 -7
  264. package/dist/chunks/chunk.Z2CV4J4E.js +0 -256
  265. package/dist/chunks/chunk.Z2CV4J4E.js.map +0 -7
  266. package/dist/chunks/chunk.ZOTOB633.js +0 -2
  267. package/dist/chunks/chunk.ZOTOB633.js.map +0 -7
@@ -1,248 +0,0 @@
1
- import{a as n,b as i}from"./chunk.RGGLFZST.js";import{a as g}from"./chunk.2YPNWI6A.js";import{c}from"./chunk.VSIKGAIE.js";import{a as r,b as a,c as s,e as l}from"./chunk.NUBCUBHW.js";import{a as d}from"./chunk.UM2EZXNH.js";import{g as o}from"./chunk.5YJY6NT6.js";var h=r`
2
- :host {
3
- /* scw element */
4
- position: relative;
5
- box-sizing: border-box;
6
- --margin-right: initial;
7
- --margin-bottom: initial;
8
- --gap-h-int: initial;
9
- --gap-v-int: initial;
10
- margin-right: var(--margin-right, var(--gap-h-int, initial));
11
- margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
12
- display: block;
13
- }
14
-
15
- :host([warning]) {
16
- outline: 2px solid red !important;
17
- }
18
-
19
- :host([size=medium]) {
20
- display: block;
21
- background-color: rgba(0, 0, 0, 0);
22
- display: flex;
23
- flex-flow: column nowrap;
24
- justify-content: flex-start;
25
- align-items: flex-start;
26
- padding-left: 0px;
27
- padding-right: 0px;
28
- padding-top: 0px;
29
- padding-bottom: 0px;
30
- /*.image-box {
31
- width: 100%;
32
- padding-bottom: 38.8888888889%;
33
- position: relative;
34
- }*/
35
- /*.image {
36
- @include size-medium-image-mixins.box;
37
-
38
- position: absolute;
39
- inset: 0;
40
- background-position: center;
41
- background-size: cover;
42
- }*/
43
- /*.action {
44
- @include size-medium-action-mixins.box;
45
- @include size-medium-action-mixins.sizing;
46
- }*/
47
- }
48
- :host([size=medium]) > *:not(:last-child) {
49
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
50
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
51
- }
52
- :host([size=medium]) .description {
53
- text-align: LEFT;
54
- font: var(--scw-type-text-font);
55
- color: var(--scw-color-grey-02);
56
- align-self: stretch;
57
- }
58
-
59
- :host([size=small]) {
60
- display: block;
61
- background-color: rgba(0, 0, 0, 0);
62
- display: flex;
63
- flex-flow: column nowrap;
64
- justify-content: flex-start;
65
- align-items: flex-start;
66
- padding-left: 0px;
67
- padding-right: 0px;
68
- padding-top: 0px;
69
- padding-bottom: 0px;
70
- /*.image-box {
71
- width: 100%;
72
- padding-bottom: 88.9473684211%;
73
- position: relative;
74
- }*/
75
- /*.image {
76
- @include size-small-image-mixins.box;
77
-
78
- position: absolute;
79
- inset: 0;
80
- background-position: center;
81
- background-size: cover;
82
- }*/
83
- }
84
- :host([size=small]) > *:not(:last-child) {
85
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
86
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
87
- }
88
- :host([size=small]) .description {
89
- display: none;
90
- }
91
- :host([size=small]) .action {
92
- display: none;
93
- }
94
-
95
- :host .super-heading.mortgage {
96
- text-align: LEFT;
97
- font: var(--scw-type-text-bold-condensed-font);
98
- color: var(--scw-color-04, var(--scw-color-mortgage-04));
99
- align-self: stretch;
100
- }
101
- :host .super-heading.savings {
102
- text-align: LEFT;
103
- font: var(--scw-type-text-bold-condensed-font);
104
- color: var(--scw-color-04, var(--scw-color-savings-04));
105
- align-self: stretch;
106
- }
107
- :host .super-heading.student {
108
- text-align: LEFT;
109
- font: var(--scw-type-text-bold-condensed-font);
110
- color: var(--scw-color-04, var(--scw-color-student-04));
111
- align-self: stretch;
112
- }
113
- :host .super-heading.investments {
114
- text-align: LEFT;
115
- font: var(--scw-type-text-bold-condensed-font);
116
- color: var(--scw-color-04, var(--scw-color-investments-04));
117
- align-self: stretch;
118
- }
119
- :host .super-heading.checking {
120
- text-align: LEFT;
121
- font: var(--scw-type-text-bold-condensed-font);
122
- color: var(--scw-color-04, var(--scw-color-checking-04));
123
- align-self: stretch;
124
- }
125
- :host .super-heading.credit-cards {
126
- text-align: LEFT;
127
- font: var(--scw-type-text-bold-condensed-font);
128
- color: var(--scw-color-04, var(--scw-color-credit-cards-04));
129
- align-self: stretch;
130
- }
131
-
132
- :host {
133
- display: block;
134
- background-color: var(--scw-color, rgba(0, 0, 0, 0));
135
- display: flex;
136
- flex-flow: column nowrap;
137
- justify-content: flex-start;
138
- align-items: flex-start;
139
- padding-left: 0px;
140
- padding-right: 0px;
141
- padding-top: 0px;
142
- padding-bottom: 0px;
143
- /*.image {
144
- @include default-image-mixins.box;
145
-
146
- position: absolute;
147
- inset: 0;
148
- background-position: center;
149
- background-size: cover;
150
- }*/
151
- }
152
- :host > *:not(:last-child) {
153
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
154
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
155
- }
156
- :host .image-box {
157
- background-color: var(--scw-color-09, var(--scw-color-grey-09));
158
- border-radius: 10px 10px 10px 10px;
159
- align-self: stretch;
160
- flex: 1;
161
- }
162
- :host .heading {
163
- background-color: var(--scw-color, rgba(0, 0, 0, 0));
164
- align-self: stretch;
165
- }
166
- :host .super-heading {
167
- text-align: LEFT;
168
- font: var(--scw-type-text-bold-condensed-font);
169
- color: var(--scw-color-03, var(--scw-color-primary-03));
170
- align-self: stretch;
171
- }
172
- :host .description {
173
- text-align: LEFT;
174
- font: var(--scw-type-text-06-font);
175
- color: var(--scw-color-02, var(--scw-color-grey-02));
176
- align-self: stretch;
177
- }
178
- :host .action {
179
- width: 83px;
180
- height: 32px;
181
- }
182
-
183
- :host([action=none]) {
184
- pointer-events: none;
185
- }
186
-
187
- :host([action=whole]) {
188
- pointer-events: all;
189
- }
190
-
191
- :host([action=whole]:hover) {
192
- cursor: pointer;
193
- }
194
-
195
- :host([action=whole]:focus-visible) {
196
- outline: none;
197
- box-shadow: var(--scw-effect-focus-shadow);
198
- border-radius: 10px 10px 4px 4px;
199
- }
200
-
201
- :host([action=link]) {
202
- pointer-events: none;
203
- }
204
- :host([action=link]) scw-link {
205
- pointer-events: all;
206
- }`;var e=class extends c{constructor(){super();this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let t=g();this.headerNodeName=n(`scw-${"heading"}${t}`),this.imageNodeName=n(`scw-${"image"}${t}`),this.linkNodeName=n(`scw-${"link"}${t}`)}static get styles(){return[super.styles,h]}parseAndValidateLightDom(){d(this),super.parseAndValidateLightDom()}clickHandler(t){t.stopPropagation(),this.click()}warn(t){this._heading=`error: ${t}`,l.prototype.warn.call(this,t)}renderImage(){if((this.src||this.srcset)&&this.alt){let t="636:350";return this.size==="medium"?t="414:163":this.size==="small"&&(t="1:1"),i`
207
- <${this.imageNodeName}
208
- class="image-box"
209
- src="${this.src}"
210
- srcset="${this.srcset}"
211
- aria-label="${this.alt}"
212
- aspect-ratio="${t}"
213
- object-fit="cover">
214
- </${this.imageNodeName}>
215
- `}}renderHeading(){return i`
216
- <${this.headerNodeName}
217
- dynamic class="heading">
218
- <h1>${this._heading}</h1>
219
- </${this.headerNodeName}>`}renderButton(){return this.action==="link"?i`
220
- <${this.linkNodeName}
221
- color="${this.color}"
222
- aria-label="${this._linkLabel?this._linkLabel:"no label"}"
223
- @click="${this.clickHandler}">
224
- </${this.linkNodeName}>`:null}renderBody(){return i`
225
- ${this.renderImage()}
226
- ${this._superHeading?i`
227
- <div class="super-heading ${this.color}">
228
- ${this._superHeading}
229
- </div>`:""}
230
- <${this.headerNodeName}
231
- dynamic class="heading">
232
- ${this.size==="large"?i`
233
- <h1>${this._heading}</h1>
234
- `:""}
235
- ${this.size==="medium"?i`
236
- <h2>${this._heading}</h2>
237
- `:""}
238
- ${this.size==="small"?i`
239
- <h3>${this._heading}</h3>
240
- `:""}
241
- </${this.headerNodeName}>
242
- ${this._description?i`
243
- <div class="description">
244
- ${this._description}
245
- </div>`:""}`}render(){return this.action==="whole"?this.renderBody():i`
246
- ${this.renderBody()}
247
- ${this.renderButton()}`}};o([s()],e.prototype,"src",2),o([s()],e.prototype,"srcset",2),o([s()],e.prototype,"alt",2),o([s()],e.prototype,"_heading",2),o([s()],e.prototype,"_superHeading",2),o([s()],e.prototype,"_description",2),o([s()],e.prototype,"_linkLabel",2),o([a({type:String,reflect:!0})],e.prototype,"size",2),o([a({type:String,reflect:!0})],e.prototype,"action",2);export{e as a};
248
- //# sourceMappingURL=chunk.4TPUL4UC.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scss/scw-card.scss", "../../src/scw-card/ScwCard.ts"],
4
- "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n /* scw element */\n position: relative;\n box-sizing: border-box;\n --margin-right: initial;\n --margin-bottom: initial;\n --gap-h-int: initial;\n --gap-v-int: initial;\n margin-right: var(--margin-right, var(--gap-h-int, initial));\n margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));\n display: block;\n}\n\n:host([warning]) {\n outline: 2px solid red !important;\n}\n\n:host([size=medium]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 38.8888888889%;\n position: relative;\n }*/\n /*.image {\n @include size-medium-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n /*.action {\n @include size-medium-action-mixins.box;\n @include size-medium-action-mixins.sizing;\n }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=medium]) .description {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-02);\n align-self: stretch;\n}\n\n:host([size=small]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 88.9473684211%;\n position: relative;\n }*/\n /*.image {\n @include size-small-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host([size=small]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=small]) .description {\n display: none;\n}\n:host([size=small]) .action {\n display: none;\n}\n\n:host .super-heading.mortgage {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-mortgage-04));\n align-self: stretch;\n}\n:host .super-heading.savings {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-savings-04));\n align-self: stretch;\n}\n:host .super-heading.student {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-student-04));\n align-self: stretch;\n}\n:host .super-heading.investments {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-investments-04));\n align-self: stretch;\n}\n:host .super-heading.checking {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-checking-04));\n align-self: stretch;\n}\n:host .super-heading.credit-cards {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-credit-cards-04));\n align-self: stretch;\n}\n\n:host {\n display: block;\n background-color: var(--scw-color, rgba(0, 0, 0, 0));\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image {\n @include default-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host .image-box {\n background-color: var(--scw-color-09, var(--scw-color-grey-09));\n border-radius: 10px 10px 10px 10px;\n align-self: stretch;\n flex: 1;\n}\n:host .heading {\n background-color: var(--scw-color, rgba(0, 0, 0, 0));\n align-self: stretch;\n}\n:host .super-heading {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n align-self: stretch;\n}\n:host .description {\n text-align: LEFT;\n font: var(--scw-type-text-06-font);\n color: var(--scw-color-02, var(--scw-color-grey-02));\n align-self: stretch;\n}\n:host .action {\n width: 83px;\n height: 32px;\n}\n\n:host([action=none]) {\n pointer-events: none;\n}\n\n:host([action=whole]) {\n pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n outline: none;\n box-shadow: var(--scw-effect-focus-shadow);\n border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n pointer-events: none;\n}\n:host([action=link]) scw-link {\n pointer-events: all;\n}`;\n", "import {property, state} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {ScwCardSizes, ScwCardActions} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport ScwLinkBase from '../scw-link-base/ScwLinkBase';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n The parts of scw-card are configured via nested html elements.\n img defines the image, heading the main heading, sup the category heading,\n and p the descriptive text. Only headings is required (with src, srcset,\n and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n /**\n * styles\n */\n static get styles() {\n return [\n super.styles,\n styles,\n ];\n }\n\n // ============== ScwCard ====================================================\n /** (ScwCard) The src of the image within the card */\n @state() src: string | undefined;\n\n /** (ScwCard) The srcset of the image within the card */\n @state() srcset: string | undefined;\n\n /** (ScwCard) Alternative description of the image. */\n @state() alt: string | undefined;\n\n /** (ScwCard) Main title or header of the card (determined by\n * <h1, h2, h3> content) */\n @state() _heading: string | undefined;\n\n /** (ScwCard) Super title, describing a category or area pertaining to title\n * (determined by <sup> content) */\n @state() _superHeading: string | undefined;\n\n /** (ScwCard) Fuller description of what the card is about (determined by\n * <p> content) */\n @state() _description: string | undefined;\n\n /** (ScwCard) Label on the link */\n @state() _linkLabel : string | undefined;\n\n // ----------- END STATES ----------------------------------------------------\n /** (ScwCard) Readonly - Size of the card. This\n * is determined by the nested html content (h1 = large,\n * h2 = medium, h3 = small). */\n @property({type: String, reflect: true})\n size: ScwCardSizes = ScwCardSizes.large;\n\n /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n * This is determined by the use of an anchor tag. */\n @property({type: String, reflect: true})\n action: ScwCardActions = ScwCardActions.none;\n\n /** scw-header with versioning suffix */\n headerNodeName : any;\n\n /** scw-image with versioning suffix */\n imageNodeName : any;\n\n /** scw-link with versioning suffix */\n linkNodeName : any;\n\n /**\n * Constructor\n */\n constructor() {\n super();\n this.element = Components.card;\n this.clickHandler = this.clickHandler.bind(this);\n\n const suffix = getSuffix();\n this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n }\n\n /** parseAndValidateLightDom, just adding local parsing and validation */\n parseAndValidateLightDom() {\n parseLightDomCard(this);\n super.parseAndValidateLightDom();\n }\n\n /**\n * Handle click event from link so it doesn't trigger twice\n * @param {Event} evt\n */\n clickHandler(evt : Event) {\n evt.stopPropagation();\n this.click();\n }\n\n /**\n * change the main heading to be the error.\n * @param {string} message describing warning\n */\n warn( message: string ) {\n this._heading = `error: ${message}`;\n ScwComponent.prototype.warn.call(this, message );\n }\n\n /**\n * Render image area\n * @return {object} component DOM\n */\n renderImage() {\n if (\n ( this.src || this.srcset ) &&\n this.alt ) {\n // ultimately this is simpliest way to do this (versus CSS...)\n // it is NOT connected to Figma proportions as a consequence.\n let aspectRatio = '636:350';\n if (this.size === ScwCardSizes.medium ) {\n aspectRatio = '414:163';\n } else if (this.size === ScwCardSizes.small) {\n aspectRatio = '1:1';\n }\n\n return html`\n <${this.imageNodeName}\n class=\"image-box\"\n src=\"${this.src}\"\n srcset=\"${this.srcset}\"\n aria-label=\"${this.alt}\"\n aspect-ratio=\"${aspectRatio}\"\n object-fit=\"cover\">\n </${this.imageNodeName}>\n `;\n }\n }\n\n /**\n * Render heading area\n * @return {object} component DOM\n */\n renderHeading() {\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h1>${this._heading}</h1>\n </${this.headerNodeName}>`;\n\n /*\n switch ( this.size ) {\n case ScwCardSizes.large:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h1>${this._heading}</h1>\n </${this.headerNodeName}>`;\n case ScwCardSizes.medium:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h2>${this._heading}</h2>\n </${this.headerNodeName}>`;\n case ScwCardSizes.small:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h3>${this._heading}</h3>\n </${this.headerNodeName}>`;\n default:\n return html``;\n }*/\n }\n\n /**\n * Render link area\n * @return {object} component DOM\n */\n renderButton() {\n if ( this.action === ScwCardActions.link) {\n return html`\n <${this.linkNodeName}\n color=\"${this.color}\"\n aria-label=\"${this._linkLabel ? this._linkLabel : 'no label'}\" \n @click=\"${this.clickHandler}\">\n </${this.linkNodeName}>`;\n }\n return null;\n }\n\n /**\n * render body\n * @return {object} component DOM\n */\n renderBody() : object {\n return html`\n ${this.renderImage()}\n ${this._superHeading ?\n html`\n <div class=\"super-heading ${this.color}\">\n ${this._superHeading}\n </div>` : ''\n }\n <${this.headerNodeName}\n dynamic class=\"heading\">\n ${(this.size === ScwCardSizes.large) ? html`\n <h1>${this._heading}</h1>\n ` : ''}\n ${(this.size === ScwCardSizes.medium) ? html`\n <h2>${this._heading}</h2>\n ` : ''}\n ${(this.size === ScwCardSizes.small) ? html`\n <h3>${this._heading}</h3>\n ` : ''}\n </${this.headerNodeName}>\n ${this._description ?\n html`\n <div class=\"description\">\n ${this._description}\n </div>` : ''\n }`;\n }\n\n /**\n * render\n * @return {object} component DOM\n */\n render() : object {\n if (this.action === ScwCardActions.whole) {\n return this.renderBody();\n } else {\n return html`\n ${this.renderBody()}\n ${this.renderButton()}`;\n };\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,248 +0,0 @@
1
- import{a as n,b as i}from"./chunk.RGGLFZST.js";import{a as g}from"./chunk.RC3Y4QKC.js";import{c}from"./chunk.VSIKGAIE.js";import{a as r,b as a,c as s,e as l}from"./chunk.NUBCUBHW.js";import{a as d}from"./chunk.UM2EZXNH.js";import{g as o}from"./chunk.5YJY6NT6.js";var h=r`
2
- :host {
3
- /* scw element */
4
- position: relative;
5
- box-sizing: border-box;
6
- --margin-right: initial;
7
- --margin-bottom: initial;
8
- --gap-h-int: initial;
9
- --gap-v-int: initial;
10
- margin-right: var(--margin-right, var(--gap-h-int, initial));
11
- margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
12
- display: block;
13
- }
14
-
15
- :host([warning]) {
16
- outline: 2px solid red !important;
17
- }
18
-
19
- :host([size=medium]) {
20
- display: block;
21
- background-color: rgba(0, 0, 0, 0);
22
- display: flex;
23
- flex-flow: column nowrap;
24
- justify-content: flex-start;
25
- align-items: flex-start;
26
- padding-left: 0px;
27
- padding-right: 0px;
28
- padding-top: 0px;
29
- padding-bottom: 0px;
30
- /*.image-box {
31
- width: 100%;
32
- padding-bottom: 38.8888888889%;
33
- position: relative;
34
- }*/
35
- /*.image {
36
- @include size-medium-image-mixins.box;
37
-
38
- position: absolute;
39
- inset: 0;
40
- background-position: center;
41
- background-size: cover;
42
- }*/
43
- /*.action {
44
- @include size-medium-action-mixins.box;
45
- @include size-medium-action-mixins.sizing;
46
- }*/
47
- }
48
- :host([size=medium]) > *:not(:last-child) {
49
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
50
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
51
- }
52
- :host([size=medium]) .description {
53
- text-align: LEFT;
54
- font: var(--scw-type-text-font);
55
- color: var(--scw-color-grey-02);
56
- align-self: stretch;
57
- }
58
-
59
- :host([size=small]) {
60
- display: block;
61
- background-color: rgba(0, 0, 0, 0);
62
- display: flex;
63
- flex-flow: column nowrap;
64
- justify-content: flex-start;
65
- align-items: flex-start;
66
- padding-left: 0px;
67
- padding-right: 0px;
68
- padding-top: 0px;
69
- padding-bottom: 0px;
70
- /*.image-box {
71
- width: 100%;
72
- padding-bottom: 88.9473684211%;
73
- position: relative;
74
- }*/
75
- /*.image {
76
- @include size-small-image-mixins.box;
77
-
78
- position: absolute;
79
- inset: 0;
80
- background-position: center;
81
- background-size: cover;
82
- }*/
83
- }
84
- :host([size=small]) > *:not(:last-child) {
85
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
86
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
87
- }
88
- :host([size=small]) .description {
89
- display: none;
90
- }
91
- :host([size=small]) .action {
92
- display: none;
93
- }
94
-
95
- :host .super-heading.mortgage {
96
- text-align: LEFT;
97
- font: var(--scw-type-text-bold-condensed-font);
98
- color: var(--scw-color-04, var(--scw-color-mortgage-04));
99
- align-self: stretch;
100
- }
101
- :host .super-heading.savings {
102
- text-align: LEFT;
103
- font: var(--scw-type-text-bold-condensed-font);
104
- color: var(--scw-color-04, var(--scw-color-savings-04));
105
- align-self: stretch;
106
- }
107
- :host .super-heading.student {
108
- text-align: LEFT;
109
- font: var(--scw-type-text-bold-condensed-font);
110
- color: var(--scw-color-04, var(--scw-color-student-04));
111
- align-self: stretch;
112
- }
113
- :host .super-heading.investments {
114
- text-align: LEFT;
115
- font: var(--scw-type-text-bold-condensed-font);
116
- color: var(--scw-color-04, var(--scw-color-investments-04));
117
- align-self: stretch;
118
- }
119
- :host .super-heading.checking {
120
- text-align: LEFT;
121
- font: var(--scw-type-text-bold-condensed-font);
122
- color: var(--scw-color-04, var(--scw-color-checking-04));
123
- align-self: stretch;
124
- }
125
- :host .super-heading.credit-cards {
126
- text-align: LEFT;
127
- font: var(--scw-type-text-bold-condensed-font);
128
- color: var(--scw-color-04, var(--scw-color-credit-cards-04));
129
- align-self: stretch;
130
- }
131
-
132
- :host {
133
- display: block;
134
- background-color: var(--scw-color, rgba(0, 0, 0, 0));
135
- display: flex;
136
- flex-flow: column nowrap;
137
- justify-content: flex-start;
138
- align-items: flex-start;
139
- padding-left: 0px;
140
- padding-right: 0px;
141
- padding-top: 0px;
142
- padding-bottom: 0px;
143
- /*.image {
144
- @include default-image-mixins.box;
145
-
146
- position: absolute;
147
- inset: 0;
148
- background-position: center;
149
- background-size: cover;
150
- }*/
151
- }
152
- :host > *:not(:last-child) {
153
- margin-bottom: calc(var(--scw-spacing-1) * 0.8);
154
- --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
155
- }
156
- :host .image-box {
157
- background-color: var(--scw-color-09, var(--scw-color-grey-09));
158
- border-radius: 10px 10px 10px 10px;
159
- align-self: stretch;
160
- flex: 1;
161
- }
162
- :host .heading {
163
- background-color: var(--scw-color, rgba(0, 0, 0, 0));
164
- align-self: stretch;
165
- }
166
- :host .super-heading {
167
- text-align: LEFT;
168
- font: var(--scw-type-text-bold-condensed-font);
169
- color: var(--scw-color-03, var(--scw-color-primary-03));
170
- align-self: stretch;
171
- }
172
- :host .description {
173
- text-align: LEFT;
174
- font: var(--scw-type-text-06-font);
175
- color: var(--scw-color-02, var(--scw-color-grey-02));
176
- align-self: stretch;
177
- }
178
- :host .action {
179
- width: 83px;
180
- height: 32px;
181
- }
182
-
183
- :host([action=none]) {
184
- pointer-events: none;
185
- }
186
-
187
- :host([action=whole]) {
188
- pointer-events: all;
189
- }
190
-
191
- :host([action=whole]:hover) {
192
- cursor: pointer;
193
- }
194
-
195
- :host([action=whole]:focus-visible) {
196
- outline: none;
197
- box-shadow: var(--scw-effect-focus-shadow);
198
- border-radius: 10px 10px 4px 4px;
199
- }
200
-
201
- :host([action=link]) {
202
- pointer-events: none;
203
- }
204
- :host([action=link]) scw-link {
205
- pointer-events: all;
206
- }`;var e=class extends c{constructor(){super();this.size="large";this.action="none";this.element="card",this.clickHandler=this.clickHandler.bind(this);let t=g();this.headerNodeName=n(`scw-${"heading"}${t}`),this.imageNodeName=n(`scw-${"image"}${t}`),this.linkNodeName=n(`scw-${"link"}${t}`)}static get styles(){return[super.styles,h]}parseAndValidateLightDom(){d(this),super.parseAndValidateLightDom()}clickHandler(t){t.stopPropagation(),this.click()}warn(t){this._heading=`error: ${t}`,l.prototype.warn.call(this,t)}renderImage(){if((this.src||this.srcset)&&this.alt){let t="636:350";return this.size==="medium"?t="414:163":this.size==="small"&&(t="1:1"),i`
207
- <${this.imageNodeName}
208
- class="image-box"
209
- src="${this.src}"
210
- srcset="${this.srcset}"
211
- aria-label="${this.alt}"
212
- aspect-ratio="${t}"
213
- object-fit="cover">
214
- </${this.imageNodeName}>
215
- `}}renderHeading(){return i`
216
- <${this.headerNodeName}
217
- dynamic class="heading">
218
- <h1>${this._heading}</h1>
219
- </${this.headerNodeName}>`}renderButton(){return this.action==="link"?i`
220
- <${this.linkNodeName}
221
- color="${this.color}"
222
- aria-label="${this._linkLabel?this._linkLabel:"no label"}"
223
- @click="${this.clickHandler}">
224
- </${this.linkNodeName}>`:null}renderBody(){return i`
225
- ${this.renderImage()}
226
- ${this._superHeading?i`
227
- <div class="super-heading ${this.color}">
228
- ${this._superHeading}
229
- </div>`:""}
230
- <${this.headerNodeName}
231
- dynamic class="heading">
232
- ${this.size==="large"?i`
233
- <h1>${this._heading}</h1>
234
- `:""}
235
- ${this.size==="medium"?i`
236
- <h2>${this._heading}</h2>
237
- `:""}
238
- ${this.size==="small"?i`
239
- <h3>${this._heading}</h3>
240
- `:""}
241
- </${this.headerNodeName}>
242
- ${this._description?i`
243
- <div class="description">
244
- ${this._description}
245
- </div>`:""}`}render(){return this.action==="whole"?this.renderBody():i`
246
- ${this.renderBody()}
247
- ${this.renderButton()}`}};o([s()],e.prototype,"src",2),o([s()],e.prototype,"srcset",2),o([s()],e.prototype,"alt",2),o([s()],e.prototype,"_heading",2),o([s()],e.prototype,"_superHeading",2),o([s()],e.prototype,"_description",2),o([s()],e.prototype,"_linkLabel",2),o([a({type:String,reflect:!0})],e.prototype,"size",2),o([a({type:String,reflect:!0})],e.prototype,"action",2);export{e as a};
248
- //# sourceMappingURL=chunk.5HFTCC2U.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["sass-plugin-0:/Users/scottrouse/Workspace/scu-design-system-mono/scu-web-components/src/scw-card/scss/scw-card.scss", "../../src/scw-card/ScwCard.ts"],
4
- "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n /* scw element */\n position: relative;\n box-sizing: border-box;\n --margin-right: initial;\n --margin-bottom: initial;\n --gap-h-int: initial;\n --gap-v-int: initial;\n margin-right: var(--margin-right, var(--gap-h-int, initial));\n margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));\n display: block;\n}\n\n:host([warning]) {\n outline: 2px solid red !important;\n}\n\n:host([size=medium]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 38.8888888889%;\n position: relative;\n }*/\n /*.image {\n @include size-medium-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n /*.action {\n @include size-medium-action-mixins.box;\n @include size-medium-action-mixins.sizing;\n }*/\n}\n:host([size=medium]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=medium]) .description {\n text-align: LEFT;\n font: var(--scw-type-text-font);\n color: var(--scw-color-grey-02);\n align-self: stretch;\n}\n\n:host([size=small]) {\n display: block;\n background-color: rgba(0, 0, 0, 0);\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image-box {\n width: 100%;\n padding-bottom: 88.9473684211%;\n position: relative;\n }*/\n /*.image {\n @include size-small-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host([size=small]) > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host([size=small]) .description {\n display: none;\n}\n:host([size=small]) .action {\n display: none;\n}\n\n:host .super-heading.mortgage {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-mortgage-04));\n align-self: stretch;\n}\n:host .super-heading.savings {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-savings-04));\n align-self: stretch;\n}\n:host .super-heading.student {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-student-04));\n align-self: stretch;\n}\n:host .super-heading.investments {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-investments-04));\n align-self: stretch;\n}\n:host .super-heading.checking {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-checking-04));\n align-self: stretch;\n}\n:host .super-heading.credit-cards {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-04, var(--scw-color-credit-cards-04));\n align-self: stretch;\n}\n\n:host {\n display: block;\n background-color: var(--scw-color, rgba(0, 0, 0, 0));\n display: flex;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding-left: 0px;\n padding-right: 0px;\n padding-top: 0px;\n padding-bottom: 0px;\n /*.image {\n @include default-image-mixins.box;\n\n position: absolute;\n inset: 0;\n background-position: center;\n background-size: cover;\n }*/\n}\n:host > *:not(:last-child) {\n margin-bottom: calc(var(--scw-spacing-1) * 0.8);\n --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );\n}\n:host .image-box {\n background-color: var(--scw-color-09, var(--scw-color-grey-09));\n border-radius: 10px 10px 10px 10px;\n align-self: stretch;\n flex: 1;\n}\n:host .heading {\n background-color: var(--scw-color, rgba(0, 0, 0, 0));\n align-self: stretch;\n}\n:host .super-heading {\n text-align: LEFT;\n font: var(--scw-type-text-bold-condensed-font);\n color: var(--scw-color-03, var(--scw-color-primary-03));\n align-self: stretch;\n}\n:host .description {\n text-align: LEFT;\n font: var(--scw-type-text-06-font);\n color: var(--scw-color-02, var(--scw-color-grey-02));\n align-self: stretch;\n}\n:host .action {\n width: 83px;\n height: 32px;\n}\n\n:host([action=none]) {\n pointer-events: none;\n}\n\n:host([action=whole]) {\n pointer-events: all;\n}\n\n:host([action=whole]:hover) {\n cursor: pointer;\n}\n\n:host([action=whole]:focus-visible) {\n outline: none;\n box-shadow: var(--scw-effect-focus-shadow);\n border-radius: 10px 10px 4px 4px;\n}\n\n:host([action=link]) {\n pointer-events: none;\n}\n:host([action=link]) scw-link {\n pointer-events: all;\n}`;\n", "import {property, state} from 'lit/decorators.js';\nimport {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport styles from './scss/scw-card.scss';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {ScwCardSizes, ScwCardActions} from './scw-card-enums';\nimport parseLightDomCard from './scw-card-light-dom';\nimport ScwLinkBase from '../scw-link-base/ScwLinkBase';\nimport {Components} from '../utils/enums/Components';\nimport getSuffix from '../utils/suffix';\n\n/**\n * ScwCard a first LitElement web component\n * @class\n * @tag scw-card\n *\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p />\"]\n The parts of scw-card are configured via nested html elements.\n img defines the image, heading the main heading, sup the category heading,\n and p the descriptive text. Only headings is required (with src, srcset,\n and alt attributes).\n * @slot [default=\"<img src alt /><h1, h2, h3 /><sup /><p /><a />\"]\n Adding an anchor will show a link.\n * @slot [default=\"<a><img src alt /><h1, h2, h3 /><sup /><p /></a>\"]\n Wrapping the entire content in an anchor will make it interactive\n */\nexport default class ScwCard extends ScwLinkBase {\n /**\n * styles\n */\n static get styles() {\n return [\n super.styles,\n styles,\n ];\n }\n\n // ============== ScwCard ====================================================\n /** (ScwCard) The src of the image within the card */\n @state() src: string | undefined;\n\n /** (ScwCard) The srcset of the image within the card */\n @state() srcset: string | undefined;\n\n /** (ScwCard) Alternative description of the image. */\n @state() alt: string | undefined;\n\n /** (ScwCard) Main title or header of the card (determined by\n * <h1, h2, h3> content) */\n @state() _heading: string | undefined;\n\n /** (ScwCard) Super title, describing a category or area pertaining to title\n * (determined by <sup> content) */\n @state() _superHeading: string | undefined;\n\n /** (ScwCard) Fuller description of what the card is about (determined by\n * <p> content) */\n @state() _description: string | undefined;\n\n /** (ScwCard) Label on the link */\n @state() _linkLabel : string | undefined;\n\n // ----------- END STATES ----------------------------------------------------\n /** (ScwCard) Readonly - Size of the card. This\n * is determined by the nested html content (h1 = large,\n * h2 = medium, h3 = small). */\n @property({type: String, reflect: true})\n size: ScwCardSizes = ScwCardSizes.large;\n\n /** (ScwCard) Readonly - The type of action (whole card, link, or none).\n * This is determined by the use of an anchor tag. */\n @property({type: String, reflect: true})\n action: ScwCardActions = ScwCardActions.none;\n\n /** scw-header with versioning suffix */\n headerNodeName : any;\n\n /** scw-image with versioning suffix */\n imageNodeName : any;\n\n /** scw-link with versioning suffix */\n linkNodeName : any;\n\n /**\n * Constructor\n */\n constructor() {\n super();\n this.element = Components.card;\n this.clickHandler = this.clickHandler.bind(this);\n\n const suffix = getSuffix();\n this.headerNodeName = unsafeStatic(`scw-${Components.heading}${suffix}`);\n this.imageNodeName = unsafeStatic(`scw-${Components.image}${suffix}`);\n this.linkNodeName = unsafeStatic(`scw-${Components.link}${suffix}`);\n }\n\n /** parseAndValidateLightDom, just adding local parsing and validation */\n parseAndValidateLightDom() {\n parseLightDomCard(this);\n super.parseAndValidateLightDom();\n }\n\n /**\n * Handle click event from link so it doesn't trigger twice\n * @param {Event} evt\n */\n clickHandler(evt : Event) {\n evt.stopPropagation();\n this.click();\n }\n\n /**\n * change the main heading to be the error.\n * @param {string} message describing warning\n */\n warn( message: string ) {\n this._heading = `error: ${message}`;\n ScwComponent.prototype.warn.call(this, message );\n }\n\n /**\n * Render image area\n * @return {object} component DOM\n */\n renderImage() {\n if (\n ( this.src || this.srcset ) &&\n this.alt ) {\n // ultimately this is simpliest way to do this (versus CSS...)\n // it is NOT connected to Figma proportions as a consequence.\n let aspectRatio = '636:350';\n if (this.size === ScwCardSizes.medium ) {\n aspectRatio = '414:163';\n } else if (this.size === ScwCardSizes.small) {\n aspectRatio = '1:1';\n }\n\n return html`\n <${this.imageNodeName}\n class=\"image-box\"\n src=\"${this.src}\"\n srcset=\"${this.srcset}\"\n aria-label=\"${this.alt}\"\n aspect-ratio=\"${aspectRatio}\"\n object-fit=\"cover\">\n </${this.imageNodeName}>\n `;\n }\n }\n\n /**\n * Render heading area\n * @return {object} component DOM\n */\n renderHeading() {\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h1>${this._heading}</h1>\n </${this.headerNodeName}>`;\n\n /*\n switch ( this.size ) {\n case ScwCardSizes.large:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h1>${this._heading}</h1>\n </${this.headerNodeName}>`;\n case ScwCardSizes.medium:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h2>${this._heading}</h2>\n </${this.headerNodeName}>`;\n case ScwCardSizes.small:\n return html`\n <${this.headerNodeName}\n dynamic class=\"heading\">\n <h3>${this._heading}</h3>\n </${this.headerNodeName}>`;\n default:\n return html``;\n }*/\n }\n\n /**\n * Render link area\n * @return {object} component DOM\n */\n renderButton() {\n if ( this.action === ScwCardActions.link) {\n return html`\n <${this.linkNodeName}\n color=\"${this.color}\"\n aria-label=\"${this._linkLabel ? this._linkLabel : 'no label'}\" \n @click=\"${this.clickHandler}\">\n </${this.linkNodeName}>`;\n }\n return null;\n }\n\n /**\n * render body\n * @return {object} component DOM\n */\n renderBody() : object {\n return html`\n ${this.renderImage()}\n ${this._superHeading ?\n html`\n <div class=\"super-heading ${this.color}\">\n ${this._superHeading}\n </div>` : ''\n }\n <${this.headerNodeName}\n dynamic class=\"heading\">\n ${(this.size === ScwCardSizes.large) ? html`\n <h1>${this._heading}</h1>\n ` : ''}\n ${(this.size === ScwCardSizes.medium) ? html`\n <h2>${this._heading}</h2>\n ` : ''}\n ${(this.size === ScwCardSizes.small) ? html`\n <h3>${this._heading}</h3>\n ` : ''}\n </${this.headerNodeName}>\n ${this._description ?\n html`\n <div class=\"description\">\n ${this._description}\n </div>` : ''\n }`;\n }\n\n /**\n * render\n * @return {object} component DOM\n */\n render() : object {\n if (this.action === ScwCardActions.whole) {\n return this.renderBody();\n } else {\n return html`\n ${this.renderBody()}\n ${this.renderButton()}`;\n };\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,2 +0,0 @@
1
- import{a as e}from"./chunk.OZFJTYAZ.js";customElements.define("scw-link",e);
2
- //# sourceMappingURL=chunk.5IS6RKXJ.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/scw-link/scw-link.ts"],
4
- "sourcesContent": ["import ScwLink from './ScwLink';\ncustomElements.define('scw-link', ScwLink );\n"],
5
- "mappings": "wCACA,eAAe,OAAO,WAAY,CAAQ",
6
- "names": []
7
- }
@@ -1,4 +0,0 @@
1
- import{a as u}from"./chunk.MDBRRL2K.js";import{b as n,c as r,e as f}from"./chunk.NUBCUBHW.js";import{a as o}from"./chunk.ZS4C3T6Z.js";import{g as a}from"./chunk.5YJY6NT6.js";var c=(e=>(e.text="text",e.boolean="boolean",e.submit="submit",e))(c||{}),h=(i=>(i.submit="submit",i.cancel="cancel",i))(h||{}),t=class extends f{constructor(){super(...arguments);this.formType="text";this.value="";this.placeholder="";this.selected=!1;this.readOnly=!1;this.required=!1;this.requiredLabel=" *";this.focused=!1;this.invalid=!1}connectedCallback(){super.connectedCallback(),this.required&&this.createAndAddValidationRule("required",this.requiredFeedback)}decorateValues(i){if(!this.name){this.warn(`${this.element} didn't find a name`);return}this.formType==="boolean"?i[this.name]=this.selected:i[this.name]=this.value}findIfRequired(){let i=this.findValidationRules();return i?i.isRequired():!1}findValidationRules(){return Array.from(this.children).find(l=>l.nodeName.indexOf("SCW-VALIDATION")===0)}validate(){let i=this.findValidationRules(),e=[];return i&&(e=i.validate(this.value)),this.invalid=e.length>0,this.invalid?this.feedback=e[0].feedback:this.feedback="",e}createValidateRule(){return document.createElement(`scw-${"validate"}${u()}`)}addValidationRule(i){let e=this.findValidationRules();e||(e=document.createElement(`scw-${"validation"}${u()}`),this.prepend(e)),Array.from(e.children).find(s=>s.getAttribute("type")===i.type)||e.appendChild(i)}createAndAddValidationRule(i,e){let l=this.createValidateRule();l.setAttribute("type",i),e&&l.setAttribute("feedback",e),this.addValidationRule(l)}removeValidationRule(i){let e=this.findValidationRules();if(!e)return;let d=Array.from(e.children).find(s=>s.type===i);d&&d.parentNode&&d.parentNode.removeChild(d)}render(){return o`
2
- scw-form-component
3
- `}};a([n({type:c,reflect:!0,attribute:"form-type"})],t.prototype,"formType",2),a([n({type:String})],t.prototype,"name",2),a([n({type:String})],t.prototype,"value",2),a([n({type:String})],t.prototype,"placeholder",2),a([n({type:String})],t.prototype,"selected",2),a([n({type:Boolean,attribute:"read-only"})],t.prototype,"readOnly",2),a([n({type:Boolean})],t.prototype,"required",2),a([n({type:String,attribute:"required-label"})],t.prototype,"requiredLabel",2),a([n({type:String,attribute:"required-feedback"})],t.prototype,"requiredFeedback",2),a([r()],t.prototype,"feedback",2),a([r()],t.prototype,"focused",2),a([r()],t.prototype,"invalid",2);export{c as a,h as b,t as c};
4
- //# sourceMappingURL=chunk.5RNXQTNO.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/scw-form-component/scw-form-component.ts"],
4
- "sourcesContent": ["import {html} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport ScwComponent from '../scw-component/ScwComponent';\nimport {Components} from '../utils/enums/Components';\nimport ScwValidate from '../scw-validate/scw-validate';\nimport ScwValidation from '../scw-validation/scw-validation';\nimport {ValidationResult, ValidationTypes}\n from '../scw-validate/validationTypes';\nimport getSuffix from '../utils/suffix';\n\nexport enum ScwFormComponentTypes {\n text = 'text',\n boolean = 'boolean',\n submit = 'submit'\n}\n\nexport enum ScwFormComponentSubmitTypes {\n submit = 'submit',\n cancel = 'cancel'\n}\n\n/**\n * ScwFormComponent\n * @class\n * @tag scw-form-component\n */\nexport default class ScwFormComponent extends ScwComponent {\n // ============== ScwFormComponent ===========================================\n /** (ScwFormComponent) the usage in a form (& scw-form a query target) */\n @property({\n type: ScwFormComponentTypes,\n reflect: true,\n attribute: 'form-type',\n })\n formType: ScwFormComponentTypes = ScwFormComponentTypes.text;\n\n /** (ScwFormComponent) name to identify form element and attach data */\n @property({type: String})\n name: string | undefined;\n\n /** (ScwFormComponent) name to identify form element and attach data */\n @property({type: String})\n value: string = '';\n\n /** (ScwFormComponent) text showing when there is no value */\n @property({type: String})\n placeholder: string = '';\n\n /** (ScwFormComponent) name to identify form element and attach data */\n @property({type: String})\n selected: boolean = false;\n\n /** (ScwFormComponent) read-only state management */\n @property({type: Boolean, attribute: 'read-only'})\n readOnly: boolean = false;\n\n /** (ScwFormComponent) required state management */\n @property({type: Boolean})\n required: boolean = false;\n\n /** (ScwFormComponent) label indicator for required */\n @property({type: String, attribute: 'required-label'})\n requiredLabel: string = ' *';\n\n /** (ScwFormComponent) label indicator for required */\n @property({type: String, attribute: 'required-feedback'})\n requiredFeedback?: string;\n\n // ===== STATE ===============================================================\n /** the text to use for feedback */\n @state() feedback: string | undefined;\n\n /** determines whether the input is focused or not */\n @state() focused : boolean = false;\n\n /** whether this form element is valid, passed validation */\n @state() invalid: boolean = false;\n\n /** connectedCallback */\n connectedCallback(): void {\n super.connectedCallback();\n if (this.required) {\n this.createAndAddValidationRule(\n ValidationTypes.required,\n this.requiredFeedback,\n );\n }\n }\n\n /** (ScwFormComponent) each form element to decorates the final data object\n * @param {Object} formData\n */\n decorateValues(formData: {}): void {\n if (!this.name) {\n this.warn(`${this.element} didn't find a name`);\n return;\n }\n if (this.formType === ScwFormComponentTypes.boolean) {\n formData[this.name] = this.selected;// ? 'true' : 'false';\n } else {\n formData[this.name] = this.value;\n }\n }\n\n /**\n * Check to see if form element is required w/o knowing if there is validation\n * @return {boolean}\n */\n findIfRequired() : boolean {\n const rules = this.findValidationRules();\n if (rules) {\n return rules.isRequired();\n }\n return false;\n }\n\n /**\n * Find validation child if there...\n * @return {ScwValidation | undefined}\n */\n findValidationRules() : ScwValidation | undefined {\n const childrenArr = Array.from(this.children);\n const validation = childrenArr.find((child: any) => {\n // component may not be initialized yet...\n return child.nodeName.indexOf('SCW-VALIDATION') === 0;\n // return child.element === Components.validation;\n });\n return validation as unknown as ScwValidation;\n }\n\n /**\n * run the validation rules if there...\n * @param {string} value\n * @return {ValidationResult[]}\n */\n validate() : ValidationResult[] {\n const validation = this.findValidationRules();\n let results : ValidationResult[] = [];\n if (validation) {\n results = validation.validate(this.value);\n }\n this.invalid = ( results.length > 0);\n if (this.invalid ) {\n this.feedback = results[0].feedback;\n } else {\n this.feedback = '';\n }\n return results;\n }\n\n\n /**\n * create a validation rule from scratch\n * @return {ScwValidate}\n */\n createValidateRule() : ScwValidate {\n return document.createElement(\n `scw-${Components.validate}${getSuffix()}`,\n ) as unknown as ScwValidate;\n }\n\n /**\n * add validation to to child validation (create if not there)\n * @param {ScwValidate} rule\n */\n addValidationRule(rule: ScwValidate ) {\n let validationRules = this.findValidationRules();\n if (!validationRules) {\n validationRules = document.createElement(\n `scw-${Components.validation}${getSuffix()}`,\n ) as unknown as ScwValidation;\n this.prepend( validationRules );\n }\n // Check for dups?\n const children = Array.from(validationRules.children);\n const existingRule = children.find((child : any) => {\n return child.getAttribute('type') === rule.type;\n });\n if ( !existingRule ) {\n validationRules.appendChild(rule);\n }\n }\n\n /**\n * create a validation of a certain type...\n * @param {ValidationTypes} type\n * @param {string} feedbackOverride\n */\n createAndAddValidationRule(\n type: ValidationTypes,\n feedbackOverride?: string,\n ) {\n const rule = this.createValidateRule();\n rule.setAttribute('type', type );// .type = type;\n if (feedbackOverride) {\n rule.setAttribute('feedback', feedbackOverride );\n }\n this.addValidationRule( rule );\n }\n\n /**\n *\n * @param {ValidationTypes} type\n */\n removeValidationRule(\n type: ValidationTypes,\n ) {\n const validationRules = this.findValidationRules();\n if (!validationRules) return;\n const children = Array.from(validationRules.children);\n const child = children.find(\n (child : any) => child.type === type,\n ) as unknown as HTMLElement;\n if ( child && child.parentNode ) child.parentNode.removeChild(child);\n }\n\n /**\n * render\n * @return {object} component DOM\n */\n render(): object {\n return html`\n scw-form-component\n `;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,2 +0,0 @@
1
- import{b as f}from"./chunk.OFJIWBBK.js";function t(i="-"){return f&&f.suffix?`${i}${f.suffix}`:""}export{t as a};
2
- //# sourceMappingURL=chunk.5WHRZ32E.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/utils/suffix.ts"],
4
- "sourcesContent": ["import {config} from '../scw';\n\n/**\n * Pulls suffix from global design system config with some formatting options\n * @param {string} connector\n * @return {string}\n */\nexport default function getSuffix(connector: string = '-') {\n return config ? config.suffix ? `${connector}${config.suffix}` : '' : '';\n}\n\n"],
5
- "mappings": "wCAOe,WAAmB,EAAoB,IAAK,CACzD,MAAO,IAAS,EAAO,OAAS,GAAG,IAAY,EAAO,SAAgB,EACxE",
6
- "names": []
7
- }
@@ -1,2 +0,0 @@
1
- import{a as t}from"./chunk.C7YDEBNB.js";customElements.define("scw-button",t);
2
- //# sourceMappingURL=chunk.6EMPXCD2.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/scw-button/scw-button.ts"],
4
- "sourcesContent": ["import ScwButton from './ScwButton.js';\ncustomElements.define('scw-button', ScwButton );\n"],
5
- "mappings": "wCACA,eAAe,OAAO,aAAc,CAAU",
6
- "names": []
7
- }