@scania/tegel 0.0.1-beta.7 → 0.0.1-beta.9

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 (281) hide show
  1. package/package.json +1 -1
  2. package/readme.md +7 -8
  3. package/dist/cjs/index-e1c79686.js +0 -1912
  4. package/dist/cjs/index.cjs.js +0 -2
  5. package/dist/cjs/loader.cjs.js +0 -21
  6. package/dist/cjs/popper-11d5f714.js +0 -1801
  7. package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
  8. package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
  9. package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
  10. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
  11. package/dist/cjs/sdds-button.cjs.entry.js +0 -36
  12. package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
  13. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
  14. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
  15. package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
  16. package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
  17. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
  18. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
  19. package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
  20. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
  21. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
  22. package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
  23. package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
  24. package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
  25. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
  26. package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
  27. package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
  28. package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
  29. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
  30. package/dist/cjs/sdds-table.cjs.entry.js +0 -69
  31. package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
  32. package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
  33. package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
  34. package/dist/cjs/tegel.cjs.js +0 -19
  35. package/dist/collection/collection-manifest.json +0 -40
  36. package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
  37. package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
  38. package/dist/collection/components/accordion/accordion.css +0 -77
  39. package/dist/collection/components/accordion/accordion.js +0 -62
  40. package/dist/collection/components/badge/badges.css +0 -42
  41. package/dist/collection/components/badge/badges.js +0 -150
  42. package/dist/collection/components/button/button-component.js +0 -154
  43. package/dist/collection/components/button/button.css +0 -658
  44. package/dist/collection/components/data-table/table/table.css +0 -15
  45. package/dist/collection/components/data-table/table/table.js +0 -253
  46. package/dist/collection/components/data-table/table-body/table-body.css +0 -22
  47. package/dist/collection/components/data-table/table-body/table-body.js +0 -425
  48. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
  49. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
  50. package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
  51. package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
  52. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
  53. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
  54. package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
  55. package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
  56. package/dist/collection/components/data-table/table-header/table-header.css +0 -204
  57. package/dist/collection/components/data-table/table-header/table-header.js +0 -153
  58. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
  59. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
  60. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
  61. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
  62. package/dist/collection/components/datetime/datetime.css +0 -375
  63. package/dist/collection/components/datetime/datetime.js +0 -251
  64. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
  65. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
  66. package/dist/collection/components/dropdown/dropdown.css +0 -891
  67. package/dist/collection/components/dropdown/dropdown.js +0 -554
  68. package/dist/collection/components/icon/icon.css +0 -16
  69. package/dist/collection/components/icon/icon.js +0 -89
  70. package/dist/collection/components/icon/iconsArray.js +0 -2
  71. package/dist/collection/components/modal/modal.css +0 -324
  72. package/dist/collection/components/modal/modal.js +0 -146
  73. package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
  74. package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
  75. package/dist/collection/components/popover-menu/popover-menu.css +0 -19
  76. package/dist/collection/components/popover-menu/popover-menu.js +0 -189
  77. package/dist/collection/components/slider/slider.css +0 -260
  78. package/dist/collection/components/slider/slider.js +0 -682
  79. package/dist/collection/components/spinner/spinner.css +0 -79
  80. package/dist/collection/components/spinner/spinner.js +0 -61
  81. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
  82. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
  83. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
  84. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
  85. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
  86. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
  87. package/dist/collection/components/textarea/textarea.css +0 -283
  88. package/dist/collection/components/textarea/textarea.js +0 -336
  89. package/dist/collection/components/textfield/textfield.css +0 -494
  90. package/dist/collection/components/textfield/textfield.js +0 -359
  91. package/dist/collection/components/tooltip/tooltip.css +0 -46
  92. package/dist/collection/components/tooltip/tooltip.js +0 -200
  93. package/dist/collection/index.js +0 -1
  94. package/dist/collection/stories/assets/code-brackets.svg +0 -1
  95. package/dist/collection/stories/assets/colors.svg +0 -1
  96. package/dist/collection/stories/assets/comments.svg +0 -1
  97. package/dist/collection/stories/assets/direction.svg +0 -1
  98. package/dist/collection/stories/assets/flow.svg +0 -1
  99. package/dist/collection/stories/assets/plugin.svg +0 -1
  100. package/dist/collection/stories/assets/repo.svg +0 -1
  101. package/dist/collection/stories/assets/stackalt.svg +0 -1
  102. package/dist/collection/utils/utils.js +0 -12
  103. package/dist/components/dropdown-option.js +0 -100
  104. package/dist/components/dropdown.js +0 -296
  105. package/dist/components/icon.js +0 -58
  106. package/dist/components/index.d.ts +0 -50
  107. package/dist/components/index.js +0 -30
  108. package/dist/components/popper.js +0 -1799
  109. package/dist/components/sdds-accordion-item.d.ts +0 -11
  110. package/dist/components/sdds-accordion-item.js +0 -60
  111. package/dist/components/sdds-accordion.d.ts +0 -11
  112. package/dist/components/sdds-accordion.js +0 -38
  113. package/dist/components/sdds-badges.d.ts +0 -11
  114. package/dist/components/sdds-badges.js +0 -76
  115. package/dist/components/sdds-body-cell.d.ts +0 -11
  116. package/dist/components/sdds-body-cell.js +0 -6
  117. package/dist/components/sdds-button.d.ts +0 -11
  118. package/dist/components/sdds-button.js +0 -58
  119. package/dist/components/sdds-datetime.d.ts +0 -11
  120. package/dist/components/sdds-datetime.js +0 -90
  121. package/dist/components/sdds-dropdown-filter.d.ts +0 -11
  122. package/dist/components/sdds-dropdown-filter.js +0 -138
  123. package/dist/components/sdds-dropdown-option.d.ts +0 -11
  124. package/dist/components/sdds-dropdown-option.js +0 -6
  125. package/dist/components/sdds-dropdown.d.ts +0 -11
  126. package/dist/components/sdds-dropdown.js +0 -6
  127. package/dist/components/sdds-header-cell.d.ts +0 -11
  128. package/dist/components/sdds-header-cell.js +0 -173
  129. package/dist/components/sdds-icon.d.ts +0 -11
  130. package/dist/components/sdds-icon.js +0 -6
  131. package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
  132. package/dist/components/sdds-inline-tabs-fullbleed.js +0 -115
  133. package/dist/components/sdds-inline-tabs.d.ts +0 -11
  134. package/dist/components/sdds-inline-tabs.js +0 -235
  135. package/dist/components/sdds-modal.d.ts +0 -11
  136. package/dist/components/sdds-modal.js +0 -69
  137. package/dist/components/sdds-navigation-tabs.d.ts +0 -11
  138. package/dist/components/sdds-navigation-tabs.js +0 -113
  139. package/dist/components/sdds-popover-canvas.d.ts +0 -11
  140. package/dist/components/sdds-popover-canvas.js +0 -97
  141. package/dist/components/sdds-popover-menu.d.ts +0 -11
  142. package/dist/components/sdds-popover-menu.js +0 -96
  143. package/dist/components/sdds-slider.d.ts +0 -11
  144. package/dist/components/sdds-slider.js +0 -366
  145. package/dist/components/sdds-spinner.d.ts +0 -11
  146. package/dist/components/sdds-spinner.js +0 -37
  147. package/dist/components/sdds-table-body-row-expandable.d.ts +0 -11
  148. package/dist/components/sdds-table-body-row-expandable.js +0 -104
  149. package/dist/components/sdds-table-body-row.d.ts +0 -11
  150. package/dist/components/sdds-table-body-row.js +0 -6
  151. package/dist/components/sdds-table-body.d.ts +0 -11
  152. package/dist/components/sdds-table-body.js +0 -337
  153. package/dist/components/sdds-table-footer.d.ts +0 -11
  154. package/dist/components/sdds-table-footer.js +0 -196
  155. package/dist/components/sdds-table-header.d.ts +0 -11
  156. package/dist/components/sdds-table-header.js +0 -125
  157. package/dist/components/sdds-table-toolbar.d.ts +0 -11
  158. package/dist/components/sdds-table-toolbar.js +0 -88
  159. package/dist/components/sdds-table.d.ts +0 -11
  160. package/dist/components/sdds-table.js +0 -92
  161. package/dist/components/sdds-textarea.d.ts +0 -11
  162. package/dist/components/sdds-textarea.js +0 -90
  163. package/dist/components/sdds-textfield.d.ts +0 -11
  164. package/dist/components/sdds-textfield.js +0 -111
  165. package/dist/components/sdds-tooltip.d.ts +0 -11
  166. package/dist/components/sdds-tooltip.js +0 -116
  167. package/dist/components/table-body-cell.js +0 -102
  168. package/dist/components/table-body-row.js +0 -119
  169. package/dist/esm/index-b67b15a6.js +0 -1884
  170. package/dist/esm/index.js +0 -1
  171. package/dist/esm/loader.js +0 -17
  172. package/dist/esm/polyfills/core-js.js +0 -11
  173. package/dist/esm/polyfills/css-shim.js +0 -1
  174. package/dist/esm/polyfills/dom.js +0 -79
  175. package/dist/esm/polyfills/es5-html-element.js +0 -1
  176. package/dist/esm/polyfills/index.js +0 -34
  177. package/dist/esm/polyfills/system.js +0 -6
  178. package/dist/esm/popper-f860750c.js +0 -1799
  179. package/dist/esm/sdds-accordion-item.entry.js +0 -30
  180. package/dist/esm/sdds-accordion.entry.js +0 -17
  181. package/dist/esm/sdds-badges.entry.js +0 -51
  182. package/dist/esm/sdds-body-cell_2.entry.js +0 -168
  183. package/dist/esm/sdds-button.entry.js +0 -32
  184. package/dist/esm/sdds-datetime.entry.js +0 -62
  185. package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
  186. package/dist/esm/sdds-dropdown_2.entry.js +0 -330
  187. package/dist/esm/sdds-header-cell.entry.js +0 -137
  188. package/dist/esm/sdds-icon.entry.js +0 -38
  189. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
  190. package/dist/esm/sdds-inline-tabs.entry.js +0 -207
  191. package/dist/esm/sdds-modal.entry.js +0 -45
  192. package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
  193. package/dist/esm/sdds-popover-canvas.entry.js +0 -72
  194. package/dist/esm/sdds-popover-menu.entry.js +0 -71
  195. package/dist/esm/sdds-slider.entry.js +0 -332
  196. package/dist/esm/sdds-spinner.entry.js +0 -17
  197. package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
  198. package/dist/esm/sdds-table-body.entry.js +0 -285
  199. package/dist/esm/sdds-table-footer.entry.js +0 -161
  200. package/dist/esm/sdds-table-header.entry.js +0 -96
  201. package/dist/esm/sdds-table-toolbar.entry.js +0 -62
  202. package/dist/esm/sdds-table.entry.js +0 -65
  203. package/dist/esm/sdds-textarea.entry.js +0 -57
  204. package/dist/esm/sdds-textfield.entry.js +0 -78
  205. package/dist/esm/sdds-tooltip.entry.js +0 -91
  206. package/dist/esm/tegel.js +0 -17
  207. package/dist/index.cjs.js +0 -1
  208. package/dist/index.js +0 -1
  209. package/dist/node_modules/@types/jest/index.d.ts +0 -1512
  210. package/dist/tegel/index.esm.js +0 -0
  211. package/dist/tegel/p-040efb32.entry.js +0 -1
  212. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  213. package/dist/tegel/p-157e1618.js +0 -2
  214. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  215. package/dist/tegel/p-2f376504.entry.js +0 -1
  216. package/dist/tegel/p-44ced895.entry.js +0 -1
  217. package/dist/tegel/p-4880f03d.entry.js +0 -1
  218. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  219. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  220. package/dist/tegel/p-4cb85347.entry.js +0 -1
  221. package/dist/tegel/p-52031b5a.entry.js +0 -1
  222. package/dist/tegel/p-677baf7f.entry.js +0 -1
  223. package/dist/tegel/p-71797eaf.entry.js +0 -1
  224. package/dist/tegel/p-7373284c.entry.js +0 -1
  225. package/dist/tegel/p-7451779b.entry.js +0 -1
  226. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  227. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  228. package/dist/tegel/p-96021bd0.entry.js +0 -1
  229. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  230. package/dist/tegel/p-a5919930.entry.js +0 -1
  231. package/dist/tegel/p-b01cface.entry.js +0 -1
  232. package/dist/tegel/p-bf896643.entry.js +0 -1
  233. package/dist/tegel/p-c311725c.entry.js +0 -1
  234. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  235. package/dist/tegel/p-d91caec6.entry.js +0 -1
  236. package/dist/tegel/p-e10eec33.entry.js +0 -1
  237. package/dist/tegel/p-ec26fc38.js +0 -1
  238. package/dist/tegel/p-f2262a69.entry.js +0 -1
  239. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
  240. package/dist/tegel/tegel.css +0 -101
  241. package/dist/tegel/tegel.esm.js +0 -1
  242. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +0 -17
  243. package/dist/types/components/accordion/accordion.d.ts +0 -7
  244. package/dist/types/components/badge/badges.d.ts +0 -16
  245. package/dist/types/components/button/button-component.d.ts +0 -15
  246. package/dist/types/components/data-table/table/table.d.ts +0 -47
  247. package/dist/types/components/data-table/table-body/table-body.d.ts +0 -54
  248. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +0 -24
  249. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +0 -27
  250. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +0 -27
  251. package/dist/types/components/data-table/table-footer/table-footer.d.ts +0 -50
  252. package/dist/types/components/data-table/table-header/table-header.d.ts +0 -27
  253. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +0 -45
  254. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +0 -22
  255. package/dist/types/components/datetime/datetime.d.ts +0 -32
  256. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +0 -42
  257. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -19
  258. package/dist/types/components/dropdown/dropdown.d.ts +0 -56
  259. package/dist/types/components/icon/icon.d.ts +0 -12
  260. package/dist/types/components/modal/modal.d.ts +0 -16
  261. package/dist/types/components/popover-canvas/popover-canvas.d.ts +0 -18
  262. package/dist/types/components/popover-menu/popover-menu.d.ts +0 -18
  263. package/dist/types/components/slider/slider.d.ts +0 -82
  264. package/dist/types/components/spinner/spinner.d.ts +0 -7
  265. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -41
  266. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
  267. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +0 -18
  268. package/dist/types/components/textarea/textarea.d.ts +0 -41
  269. package/dist/types/components/textfield/textfield.d.ts +0 -42
  270. package/dist/types/components/tooltip/tooltip.d.ts +0 -20
  271. package/dist/types/components.d.ts +0 -1752
  272. package/dist/types/global.d.ts +0 -2
  273. package/dist/types/index.d.ts +0 -1
  274. package/dist/types/stencil-public-runtime.d.ts +0 -1581
  275. package/dist/types/utils/utils.d.ts +0 -2
  276. package/loader/cdn.js +0 -3
  277. package/loader/index.cjs.js +0 -3
  278. package/loader/index.d.ts +0 -12
  279. package/loader/index.es2017.js +0 -3
  280. package/loader/index.js +0 -4
  281. package/loader/package.json +0 -11
@@ -1,283 +0,0 @@
1
- :root,
2
- .sdds-theme-light {
3
- --sdds-textarea-color: var(--sdds-grey-868);
4
- --sdds-textarea-bg: var(--sdds-white);
5
- --sdds-textarea-placeholder: var(--sdds-grey-500);
6
- --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
7
- --sdds-textarea-on-white-bg: var(--sdds-grey-50);
8
- --sdds-textarea-disabled-color: var(--sdds-grey-400);
9
- --sdds-textarea-disabled-bg: var(--sdds-white);
10
- --sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
11
- --sdds-textarea-disabled-label: var(--sdds-grey-400);
12
- --sdds-textarea-label-color: var(--sdds-grey-958);
13
- --sdds-textarea-label-inside-color: var(--sdds-grey-700);
14
- --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
15
- --sdds-textarea-helper: var(--sdds-grey-700);
16
- --sdds-textarea-helper-error: var(--sdds-red-500);
17
- --sdds-textarea-bar: var(--sdds-blue-400);
18
- --sdds-textarea-bar-error: var(--sdds-red-500);
19
- --sdds-textarea-textcounter: var(--sdds-grey-700);
20
- --sdds-textarea-textcounter-divider: var(--sdds-grey-500);
21
- --sdds-textarea-border-bottom: var(--sdds-grey-400);
22
- --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
23
- --sdds-textarea-border-bottom-success: var(--sdds-grey-800);
24
- --sdds-textarea-border-bottom-error: var(--sdds-red-500);
25
- --sdds-textarea-icon-read-only-color: var(--sdds-white);
26
- --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
27
- --sdds-textarea-resize-icon: var(--sdds-grey-500);
28
- }
29
-
30
- .sdds-theme-dark {
31
- --sdds-textarea-color: var(--sdds-grey-868);
32
- --sdds-textarea-bg: var(--sdds-red);
33
- --sdds-textarea-placeholder: var(--sdds-grey-500);
34
- --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
35
- --sdds-textarea-on-white-bg: var(--sdds-grey-50);
36
- --sdds-textarea-disabled-color: var(--sdds-grey-400);
37
- --sdds-textarea-disabled-bg: var(--sdds-red);
38
- --sdds-textarea-disabled-placeholder: var(--sdds-grey-400);
39
- --sdds-textarea-disabled-label: var(--sdds-grey-400);
40
- --sdds-textarea-label-color: var(--sdds-grey-958);
41
- --sdds-textarea-label-inside-color: var(--sdds-grey-700);
42
- --sdds-textarea-placeholder-focus-color: var(--sdds-grey-500);
43
- --sdds-textarea-helper: var(--sdds-grey-700);
44
- --sdds-textarea-helper-error: var(--sdds-red-500);
45
- --sdds-textarea-bar: var(--sdds-blue-400);
46
- --sdds-textarea-bar-error: var(--sdds-red-500);
47
- --sdds-textarea-textcounter: var(--sdds-grey-700);
48
- --sdds-textarea-textcounter-divider: var(--sdds-grey-500);
49
- --sdds-textarea-border-bottom: var(--sdds-grey-400);
50
- --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
51
- --sdds-textarea-border-bottom-success: var(--sdds-grey-800);
52
- --sdds-textarea-border-bottom-error: var(--sdds-red-500);
53
- --sdds-textarea-icon-read-only-color: var(--sdds-white);
54
- --sdds-textarea-icon-read-only-label-color: var(--sdds-grey-800);
55
- --sdds-textarea-resize-icon: var(--sdds-grey-500);
56
- }
57
-
58
- .sdds-on-white-bg {
59
- --sdds-textarea-bg: var(--sdds-textarea-on-white-bg);
60
- }
61
-
62
- .sdds-textarea-container {
63
- border-radius: 4px 4px 0 0;
64
- position: relative;
65
- box-sizing: border-box;
66
- height: auto;
67
- width: 100%;
68
- min-width: 208px;
69
- display: inline-flex;
70
- background-color: transparent;
71
- flex-flow: row wrap;
72
- border-bottom: 0;
73
- }
74
-
75
- .sdds-textarea-container .sdds-textarea-wrapper {
76
- position: relative;
77
- width: unset;
78
- min-width: 100%;
79
- }
80
-
81
- .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
82
- content: "";
83
- height: 2px;
84
- width: 0;
85
- position: absolute;
86
- background: var(--sdds-textarea-bar);
87
- transition: 0.35s ease all;
88
- }
89
- .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
90
- left: 50%;
91
- }
92
- .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after {
93
- right: 50%;
94
- }
95
- .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::after, .sdds-textarea-container:not(.sdds-textarea-disabled) .sdds-textarea-wrapper::before {
96
- top: calc(100% - 2px);
97
- }
98
-
99
- .sdds-textarea-input {
100
- border-radius: 4px 4px 0 0;
101
- width: 100%;
102
- box-sizing: border-box;
103
- margin: 0;
104
- border: none;
105
- outline: none;
106
- height: 100%;
107
- color: var(--sdds-textarea-color);
108
- background-color: var(--sdds-textarea-bg);
109
- font: var(--sdds-detail-02);
110
- letter-spacing: var(--sdds-detail-02-ls);
111
- padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
112
- display: block;
113
- resize: vertical;
114
- border-bottom: 1px solid var(--sdds-textarea-border-bottom);
115
- transition: border-bottom-color 200ms ease;
116
- }
117
- .sdds-textarea-input::placeholder {
118
- opacity: 1;
119
- color: var(--sdds-textarea-placeholder);
120
- }
121
- .sdds-textarea-input:focus::placeholder {
122
- color: var(--sdds-textarea-placeholder-focus-color);
123
- }
124
- .sdds-textarea-input:disabled {
125
- background-color: var(--sdds-textarea-disabled-bg);
126
- color: var(--sdds-textarea-disabled-color);
127
- cursor: not-allowed;
128
- }
129
- .sdds-textarea-input:disabled::placeholder {
130
- color: var(--sdds-textarea-disabled-placeholder);
131
- }
132
- .sdds-textarea-input:disabled ~ .sdds-textfield-label-inside {
133
- color: var(--sdds-textarea-disabled-label);
134
- }
135
- .sdds-textarea-input::-webkit-resizer {
136
- display: none;
137
- }
138
- .sdds-textarea-input:hover {
139
- border-bottom-color: var(--sdds-textarea-border-bottom-hover);
140
- }
141
-
142
- .sdds-textarea-resizer-icon {
143
- color: var(--sdds-textarea-resize-icon);
144
- position: absolute;
145
- display: block;
146
- bottom: 2px;
147
- right: 1px;
148
- padding-bottom: 2px;
149
- padding-right: 2px;
150
- pointer-events: none;
151
- background-color: var(--sdds-textarea-bg);
152
- }
153
- .sdds-textarea-resizer-icon svg {
154
- display: block;
155
- }
156
-
157
- .sdds-textarea-label {
158
- font: var(--sdds-detail-05);
159
- letter-spacing: var(--sdds-detail-05-ls);
160
- display: block;
161
- z-index: 2;
162
- margin-bottom: var(--sdds-spacing-element-8);
163
- color: var(--sdds-textarea-label-color);
164
- }
165
-
166
- .sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-label {
167
- font: var(--sdds-detail-02);
168
- letter-spacing: var(--sdds-detail-02-ls);
169
- transition: 0.1s ease all;
170
- color: var(--sdds-textarea-label-inside-color);
171
- position: absolute;
172
- top: var(--sdds-spacing-element-20);
173
- left: var(--sdds-spacing-element-16);
174
- }
175
- .sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input::placeholder {
176
- color: transparent;
177
- }
178
- .sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input ::placeholder {
179
- color: transparent;
180
- }
181
- .sdds-textarea-container.sdds-textarea-label-inside .sdds-textarea-input:focus::placeholder {
182
- transition: color 0.35s ease;
183
- color: var(--sdds-textarea-placeholder-focus-color);
184
- }
185
- .sdds-textarea-container.sdds-textarea-focus.sdds-textarea-label-inside .sdds-textarea-label {
186
- font: var(--sdds-detail-07);
187
- letter-spacing: var(--sdds-detail-07-ls);
188
- top: var(--sdds-spacing-element-8);
189
- }
190
- .sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::before, .sdds-textarea-container.sdds-textarea-focus .sdds-textarea-wrapper::after {
191
- width: 50%;
192
- }
193
- .sdds-textarea-container.sdds-textarea-data.sdds-textarea-label-inside .sdds-textarea-label {
194
- font: var(--sdds-detail-07);
195
- letter-spacing: var(--sdds-detail-07-ls);
196
- top: var(--sdds-spacing-element-8);
197
- }
198
-
199
- .sdds-textarea-textcounter {
200
- font: var(--sdds-detail-05);
201
- letter-spacing: var(--sdds-detail-05-ls);
202
- color: var(--sdds-textarea-textcounter);
203
- float: right;
204
- flex-basis: 100%;
205
- text-align: right;
206
- padding-top: var(--sdds-spacing-element-4);
207
- }
208
- .sdds-textarea-textcounter .sdds-textfield-textcounter-divider {
209
- font: var(--sdds-detail-05);
210
- letter-spacing: var(--sdds-detail-05-ls);
211
- color: var(--sdds-textarea-textcounter-divider);
212
- }
213
-
214
- .sdds-textarea-helper {
215
- font: var(--sdds-detail-05);
216
- letter-spacing: var(--sdds-detail-05-ls);
217
- display: block;
218
- padding-top: var(--sdds-spacing-element-4);
219
- color: var(--sdds-textarea-helper);
220
- flex-grow: 2;
221
- flex-basis: auto;
222
- }
223
- .sdds-textarea-helper ~ .sdds-textarea-textcounter {
224
- flex-basis: auto;
225
- }
226
-
227
- .sdds-textarea-success .sdds-textarea-input {
228
- border-bottom-color: var(--sdds-textarea-border-bottom-success);
229
- }
230
-
231
- .sdds-textarea-error .sdds-textarea-input {
232
- border-bottom-color: var(--sdds-textarea-border-bottom-error);
233
- }
234
- .sdds-textarea-error .sdds-textarea-wrapper::after, .sdds-textarea-error .sdds-textarea-wrapper::before {
235
- background: var(--sdds-textarea-bar-error);
236
- }
237
- .sdds-textarea-error .sdds-textarea-helper {
238
- color: var(--sdds-textarea-helper-error);
239
- }
240
-
241
- .sdds-textarea-disabled .sdds-textarea-input {
242
- border-bottom-color: transparent;
243
- }
244
- .sdds-textarea-disabled .sdds-textarea-label {
245
- color: var(--sdds-textarea-disabled-label);
246
- }
247
-
248
- .sdds-textarea-icon__readonly {
249
- display: none;
250
- position: absolute;
251
- right: 18px;
252
- top: 18px;
253
- }
254
- .sdds-textarea-icon__readonly-label {
255
- display: none;
256
- position: absolute;
257
- right: 18px;
258
- top: 48px;
259
- font: var(--sdds-detail-05);
260
- letter-spacing: var(--sdds-detail-05-ls);
261
- padding: 8px;
262
- color: var(--sdds-textarea-icon-read-only-label-color);
263
- background-color: var(--sdds-textarea-icon-read-only-label-bg);
264
- white-space: nowrap;
265
- border-radius: 4px 0 4px 4px;
266
- }
267
-
268
- .sdds-textarea-readonly {
269
- pointer-events: none;
270
- }
271
- .sdds-textarea-readonly .sdds-textarea-icon__readonly {
272
- display: block;
273
- }
274
- .sdds-textarea-readonly .sdds-textarea-icon__readonly:hover ~ .sdds-textarea-icon__readonly-label {
275
- display: block;
276
- }
277
- .sdds-textarea-readonly .sdds-textfield-input {
278
- padding-right: 54px;
279
- background-color: transparent;
280
- }
281
- .sdds-textarea-readonly .sdds-textfield-container {
282
- background-color: transparent;
283
- }
@@ -1,336 +0,0 @@
1
- import { h } from '@stencil/core';
2
- export class Textarea {
3
- constructor() {
4
- this.label = '';
5
- this.name = '';
6
- this.helper = '';
7
- this.cols = undefined;
8
- this.rows = undefined;
9
- this.labelPosition = 'no-label';
10
- this.placeholder = '';
11
- this.value = '';
12
- this.disabled = false;
13
- this.readOnly = false;
14
- this.state = 'default';
15
- this.maxLength = undefined;
16
- this.modeVariant = 'primary';
17
- this.autoFocus = false;
18
- this.focusInput = undefined;
19
- }
20
- // Data input event in value prop
21
- handleInput(e) {
22
- this.value = e.target.value;
23
- }
24
- /* Set the input as focus when clicking the whole textfield with suffix/prefix */
25
- handleFocusClick() {
26
- this.textEl.focus();
27
- this.focusInput = true;
28
- }
29
- handleChange(e) {
30
- this.customChange.emit(e);
31
- }
32
- render() {
33
- var _a;
34
- return (h("div", { class: `
35
- sdds-textarea-container
36
- ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}
37
- ${this.focusInput ? 'sdds-textarea-focus' : ''}
38
- ${this.disabled ? 'sdds-textarea-disabled' : ''}
39
- ${this.readOnly ? 'sdds-textarea-readonly' : ''}
40
- ${this.modeVariant === 'primary' ? 'sdds-on-white-bg' : ''}
41
- ${this.value ? 'sdds-textarea-data' : ''}
42
- ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}
43
- `, onClick: () => this.handleFocusClick() }, this.labelPosition !== 'no-label' && (h("span", { class: 'sdds-textarea-label' }, this.label)), h("div", { class: "sdds-textarea-wrapper" }, h("textarea", { onFocus: () => {
44
- this.focusInput = true;
45
- }, onBlur: () => {
46
- this.focusInput = false;
47
- }, class: 'sdds-textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autoFocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), h("span", { class: "sdds-textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("svg", { class: "sdds-textarea-icon__readonly", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6242 10.7946L17.1365 7.28228C17.6247 6.79412 17.6247 6.00266 17.1365 5.5145L14.485 2.86295C13.9968 2.37479 13.2054 2.37479 12.7172 2.86295L9.20483 6.3753L10.0887 7.25919L11.3914 5.95654L14.0429 8.6081L12.7403 9.91075L13.6242 10.7946ZM13.6011 3.74684L16.2526 6.39839L14.9268 7.72421L12.2753 5.07265L13.6011 3.74684Z", fill: "#0D0F13" }), h("path", { d: "M7.43707 9.91075L5.00974 12.3381L4.01561 15.9837L7.6613 14.9896L10.0886 12.5623L10.9725 13.4462L8.54519 15.8735C8.39136 16.0274 8.20004 16.1384 7.99014 16.1956L3.28932 17.4774C3.07294 17.5364 2.84154 17.475 2.68295 17.3164C2.52436 17.1578 2.46291 16.9264 2.52191 16.71L3.80377 12.0092C3.861 11.7993 3.97202 11.608 4.12585 11.4542L6.55318 9.02686L7.43707 9.91075Z", fill: "#0D0F13" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.43306 1.43306C1.67714 1.18898 2.07287 1.18898 2.31695 1.43306L18.5671 17.6832C18.8112 17.9273 18.8112 18.323 18.5671 18.5671C18.323 18.8112 17.9273 18.8112 17.6832 18.5671L1.43306 2.31695C1.18898 2.07287 1.18898 1.67714 1.43306 1.43306Z", fill: "#0D0F13" })), h("span", { class: "sdds-textarea-icon__readonly-label" }, "This field is non-editable")), this.helper.length > 0 && h("span", { class: 'sdds-textarea-helper' }, this.helper), this.maxLength > 0 && (h("div", { class: 'sdds-textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
48
- }
49
- static get is() { return "sdds-textarea"; }
50
- static get originalStyleUrls() {
51
- return {
52
- "$": ["textarea.scss"]
53
- };
54
- }
55
- static get styleUrls() {
56
- return {
57
- "$": ["textarea.css"]
58
- };
59
- }
60
- static get properties() {
61
- return {
62
- "label": {
63
- "type": "string",
64
- "mutable": false,
65
- "complexType": {
66
- "original": "string",
67
- "resolved": "string",
68
- "references": {}
69
- },
70
- "required": false,
71
- "optional": false,
72
- "docs": {
73
- "tags": [],
74
- "text": "Label text"
75
- },
76
- "attribute": "label",
77
- "reflect": false,
78
- "defaultValue": "''"
79
- },
80
- "name": {
81
- "type": "string",
82
- "mutable": false,
83
- "complexType": {
84
- "original": "string",
85
- "resolved": "string",
86
- "references": {}
87
- },
88
- "required": false,
89
- "optional": false,
90
- "docs": {
91
- "tags": [],
92
- "text": "Name attribute"
93
- },
94
- "attribute": "name",
95
- "reflect": false,
96
- "defaultValue": "''"
97
- },
98
- "helper": {
99
- "type": "string",
100
- "mutable": false,
101
- "complexType": {
102
- "original": "string",
103
- "resolved": "string",
104
- "references": {}
105
- },
106
- "required": false,
107
- "optional": false,
108
- "docs": {
109
- "tags": [],
110
- "text": "Helper text"
111
- },
112
- "attribute": "helper",
113
- "reflect": false,
114
- "defaultValue": "''"
115
- },
116
- "cols": {
117
- "type": "number",
118
- "mutable": false,
119
- "complexType": {
120
- "original": "number",
121
- "resolved": "number",
122
- "references": {}
123
- },
124
- "required": false,
125
- "optional": false,
126
- "docs": {
127
- "tags": [],
128
- "text": "Textarea cols attribute"
129
- },
130
- "attribute": "cols",
131
- "reflect": false
132
- },
133
- "rows": {
134
- "type": "number",
135
- "mutable": false,
136
- "complexType": {
137
- "original": "number",
138
- "resolved": "number",
139
- "references": {}
140
- },
141
- "required": false,
142
- "optional": false,
143
- "docs": {
144
- "tags": [],
145
- "text": "Textarea rows attribute"
146
- },
147
- "attribute": "rows",
148
- "reflect": false
149
- },
150
- "labelPosition": {
151
- "type": "string",
152
- "mutable": false,
153
- "complexType": {
154
- "original": "'inside' | 'outside' | 'no-label'",
155
- "resolved": "\"inside\" | \"no-label\" | \"outside\"",
156
- "references": {}
157
- },
158
- "required": false,
159
- "optional": false,
160
- "docs": {
161
- "tags": [],
162
- "text": "Position of the label for the textfield."
163
- },
164
- "attribute": "label-position",
165
- "reflect": false,
166
- "defaultValue": "'no-label'"
167
- },
168
- "placeholder": {
169
- "type": "string",
170
- "mutable": false,
171
- "complexType": {
172
- "original": "string",
173
- "resolved": "string",
174
- "references": {}
175
- },
176
- "required": false,
177
- "optional": false,
178
- "docs": {
179
- "tags": [],
180
- "text": "Placeholder text"
181
- },
182
- "attribute": "placeholder",
183
- "reflect": false,
184
- "defaultValue": "''"
185
- },
186
- "value": {
187
- "type": "string",
188
- "mutable": false,
189
- "complexType": {
190
- "original": "string",
191
- "resolved": "string",
192
- "references": {}
193
- },
194
- "required": false,
195
- "optional": false,
196
- "docs": {
197
- "tags": [],
198
- "text": "Value of the input text"
199
- },
200
- "attribute": "value",
201
- "reflect": false,
202
- "defaultValue": "''"
203
- },
204
- "disabled": {
205
- "type": "boolean",
206
- "mutable": false,
207
- "complexType": {
208
- "original": "boolean",
209
- "resolved": "boolean",
210
- "references": {}
211
- },
212
- "required": false,
213
- "optional": false,
214
- "docs": {
215
- "tags": [],
216
- "text": "Set input in disabled state"
217
- },
218
- "attribute": "disabled",
219
- "reflect": false,
220
- "defaultValue": "false"
221
- },
222
- "readOnly": {
223
- "type": "boolean",
224
- "mutable": false,
225
- "complexType": {
226
- "original": "boolean",
227
- "resolved": "boolean",
228
- "references": {}
229
- },
230
- "required": false,
231
- "optional": false,
232
- "docs": {
233
- "tags": [],
234
- "text": "Set input in readonly state"
235
- },
236
- "attribute": "read-only",
237
- "reflect": false,
238
- "defaultValue": "false"
239
- },
240
- "state": {
241
- "type": "string",
242
- "mutable": false,
243
- "complexType": {
244
- "original": "'error' | 'success' | 'default'",
245
- "resolved": "\"default\" | \"error\" | \"success\"",
246
- "references": {}
247
- },
248
- "required": false,
249
- "optional": false,
250
- "docs": {
251
- "tags": [],
252
- "text": "Error state of input"
253
- },
254
- "attribute": "state",
255
- "reflect": false,
256
- "defaultValue": "'default'"
257
- },
258
- "maxLength": {
259
- "type": "number",
260
- "mutable": false,
261
- "complexType": {
262
- "original": "number",
263
- "resolved": "number",
264
- "references": {}
265
- },
266
- "required": false,
267
- "optional": false,
268
- "docs": {
269
- "tags": [],
270
- "text": "Max length of input"
271
- },
272
- "attribute": "max-length",
273
- "reflect": false
274
- },
275
- "modeVariant": {
276
- "type": "string",
277
- "mutable": false,
278
- "complexType": {
279
- "original": "'primary' | 'secondary'",
280
- "resolved": "\"primary\" | \"secondary\"",
281
- "references": {}
282
- },
283
- "required": false,
284
- "optional": false,
285
- "docs": {
286
- "tags": [],
287
- "text": "Variant of the tabs, primary= on white, secondary= on grey50"
288
- },
289
- "attribute": "mode-variant",
290
- "reflect": false,
291
- "defaultValue": "'primary'"
292
- },
293
- "autoFocus": {
294
- "type": "boolean",
295
- "mutable": false,
296
- "complexType": {
297
- "original": "boolean",
298
- "resolved": "boolean",
299
- "references": {}
300
- },
301
- "required": false,
302
- "optional": false,
303
- "docs": {
304
- "tags": [],
305
- "text": "Control of autofocus"
306
- },
307
- "attribute": "auto-focus",
308
- "reflect": false,
309
- "defaultValue": "false"
310
- }
311
- };
312
- }
313
- static get states() {
314
- return {
315
- "focusInput": {}
316
- };
317
- }
318
- static get events() {
319
- return [{
320
- "method": "customChange",
321
- "name": "customChange",
322
- "bubbles": true,
323
- "cancelable": true,
324
- "composed": true,
325
- "docs": {
326
- "tags": [],
327
- "text": "Change event for the textarea"
328
- },
329
- "complexType": {
330
- "original": "any",
331
- "resolved": "any",
332
- "references": {}
333
- }
334
- }];
335
- }
336
- }