@dnb/eufemia 9.27.0 → 9.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (388) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/cjs/components/Badge.d.ts +3 -0
  3. package/cjs/components/{slider/web-component.js → Badge.js} +6 -9
  4. package/cjs/components/autocomplete/Autocomplete.js +14 -2
  5. package/cjs/components/autocomplete/style/_autocomplete.scss +17 -1
  6. package/cjs/components/autocomplete/style/dnb-autocomplete.css +36 -3
  7. package/cjs/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  8. package/cjs/components/avatar/style/_avatar.scss +1 -0
  9. package/cjs/components/avatar/style/dnb-avatar.css +1 -0
  10. package/cjs/components/avatar/style/dnb-avatar.min.css +1 -1
  11. package/cjs/components/badge/Badge.d.ts +58 -0
  12. package/cjs/components/badge/Badge.js +124 -0
  13. package/cjs/components/badge/index.d.ts +8 -0
  14. package/cjs/components/badge/index.js +52 -0
  15. package/cjs/components/badge/style/_badge.scss +74 -0
  16. package/cjs/components/badge/style/dnb-badge.css +151 -0
  17. package/cjs/components/badge/style/dnb-badge.min.css +1 -0
  18. package/cjs/components/badge/style/dnb-badge.scss +12 -0
  19. package/cjs/components/badge/style/index.d.ts +6 -0
  20. package/cjs/components/badge/style/index.js +3 -0
  21. package/cjs/components/badge/style/themes/dnb-badge-theme-ui.css +21 -0
  22. package/cjs/components/badge/style/themes/dnb-badge-theme-ui.min.css +1 -0
  23. package/cjs/components/badge/style/themes/dnb-badge-theme-ui.scss +17 -0
  24. package/cjs/components/badge/style/themes/ui.d.ts +1 -0
  25. package/cjs/components/badge/style/themes/ui.js +3 -0
  26. package/cjs/components/badge/style.d.ts +1 -0
  27. package/cjs/components/badge/style.js +3 -0
  28. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  29. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  30. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  31. package/cjs/components/dialog/style/dnb-dialog.css +12 -19
  32. package/cjs/components/dialog/style/dnb-dialog.min.css +1 -1
  33. package/cjs/components/dialog/style/themes/dnb-dialog-theme-ui.css +0 -2
  34. package/cjs/components/dialog/style/themes/dnb-dialog-theme-ui.min.css +1 -1
  35. package/cjs/components/dialog/style/themes/dnb-dialog-theme-ui.scss +0 -7
  36. package/cjs/components/drawer/DrawerContent.js +7 -1
  37. package/cjs/components/drawer/style/_drawer.scss +6 -13
  38. package/cjs/components/drawer/style/dnb-drawer.css +21 -31
  39. package/cjs/components/drawer/style/dnb-drawer.min.css +1 -1
  40. package/cjs/components/drawer/style/themes/dnb-drawer-theme-ui.css +0 -2
  41. package/cjs/components/drawer/style/themes/dnb-drawer-theme-ui.min.css +1 -1
  42. package/cjs/components/drawer/style/themes/dnb-drawer-theme-ui.scss +0 -7
  43. package/cjs/components/form-row/FormRow.js +9 -8
  44. package/cjs/components/form-row/FormRowHelpers.d.ts +1 -0
  45. package/cjs/components/form-row/FormRowHelpers.js +16 -2
  46. package/cjs/components/index.d.ts +2 -1
  47. package/cjs/components/index.js +8 -0
  48. package/cjs/components/lib.d.ts +3 -1
  49. package/cjs/components/lib.js +9 -0
  50. package/cjs/components/modal/ModalContent.js +0 -2
  51. package/cjs/components/modal/style/_modal.scss +0 -4
  52. package/cjs/components/modal/style/dnb-modal.css +12 -19
  53. package/cjs/components/modal/style/dnb-modal.min.css +1 -1
  54. package/cjs/components/modal/style/themes/dnb-modal-theme-ui.css +6 -2
  55. package/cjs/components/modal/style/themes/dnb-modal-theme-ui.min.css +1 -1
  56. package/cjs/components/modal/style/themes/dnb-modal-theme-ui.scss +6 -5
  57. package/cjs/components/skeleton/SkeletonHelper.d.ts +2 -1
  58. package/cjs/components/slider/Slider.d.ts +8 -229
  59. package/cjs/components/slider/Slider.js +21 -798
  60. package/cjs/components/slider/SliderHelpers.d.ts +23 -0
  61. package/cjs/components/slider/SliderHelpers.js +245 -0
  62. package/cjs/components/slider/SliderInstance.d.ts +6 -0
  63. package/cjs/components/slider/SliderInstance.js +190 -0
  64. package/cjs/components/slider/SliderProvider.d.ts +4 -0
  65. package/cjs/components/slider/SliderProvider.js +301 -0
  66. package/cjs/components/slider/SliderThumb.d.ts +2 -0
  67. package/cjs/components/slider/SliderThumb.js +142 -0
  68. package/cjs/components/slider/SliderTrack.d.ts +6 -0
  69. package/cjs/components/slider/SliderTrack.js +132 -0
  70. package/cjs/components/slider/hooks/useSliderEvents.d.ts +11 -0
  71. package/cjs/components/slider/hooks/useSliderEvents.js +146 -0
  72. package/cjs/components/slider/hooks/useSliderProps.d.ts +1 -0
  73. package/cjs/components/slider/hooks/useSliderProps.js +16 -0
  74. package/cjs/components/slider/style/_slider.scss +19 -54
  75. package/cjs/components/slider/style/dnb-slider.css +30 -66
  76. package/cjs/components/slider/style/dnb-slider.min.css +1 -1
  77. package/cjs/components/slider/style/themes/dnb-slider-theme-ui.css +0 -16
  78. package/cjs/components/slider/style/themes/dnb-slider-theme-ui.min.css +1 -1
  79. package/cjs/components/slider/style/themes/dnb-slider-theme-ui.scss +0 -17
  80. package/cjs/components/slider/types.d.ts +100 -0
  81. package/cjs/components/slider/types.js +1 -0
  82. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  83. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  84. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  85. package/cjs/components/timeline/TimelineItem.js +2 -1
  86. package/cjs/elements/Anchor.d.ts +44 -105
  87. package/cjs/elements/Anchor.js +48 -138
  88. package/cjs/elements/Element.d.ts +23 -40
  89. package/cjs/elements/Element.js +48 -122
  90. package/cjs/elements/Link.d.ts +18 -1
  91. package/cjs/elements/lib.d.ts +36 -2
  92. package/cjs/index.d.ts +2 -1
  93. package/cjs/index.js +8 -0
  94. package/cjs/shared/AlignmentHelper.js +4 -2
  95. package/cjs/shared/Context.d.ts +7 -1
  96. package/cjs/shared/Eufemia.js +1 -1
  97. package/cjs/shared/helpers/Suffix.d.ts +6 -4
  98. package/cjs/shared/helpers/Suffix.js +5 -2
  99. package/cjs/shared/helpers/filterValidProps.d.ts +11 -0
  100. package/cjs/shared/helpers/filterValidProps.js +19 -0
  101. package/cjs/shared/helpers/withCamelCaseProps.d.ts +1 -1
  102. package/cjs/shared/helpers/withCamelCaseProps.js +10 -0
  103. package/cjs/shared/helpers/withSnakeCaseProps.d.ts +40 -0
  104. package/cjs/shared/helpers/withSnakeCaseProps.js +168 -0
  105. package/cjs/shared/locales/en-GB.d.ts +3 -3
  106. package/cjs/shared/locales/en-GB.js +3 -3
  107. package/cjs/shared/locales/en-US.d.ts +3 -3
  108. package/cjs/shared/locales/index.d.ts +6 -6
  109. package/cjs/shared/locales/nb-NO.d.ts +3 -3
  110. package/cjs/shared/locales/nb-NO.js +3 -3
  111. package/cjs/style/dnb-ui-components.css +161 -88
  112. package/cjs/style/dnb-ui-components.min.css +4 -4
  113. package/cjs/style/dnb-ui-components.scss +1 -0
  114. package/cjs/style/dnb-ui-elements.css +44 -28
  115. package/cjs/style/dnb-ui-elements.min.css +1 -1
  116. package/cjs/style/dnb-ui-tags.css +63 -40
  117. package/cjs/style/dnb-ui-tags.min.css +1 -1
  118. package/cjs/style/elements/_anchor-mixins.scss +6 -3
  119. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.css +237 -46
  120. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +7 -7
  121. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  122. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +72 -50
  123. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +4 -4
  124. package/cjs/style/themes/theme-ui/dnb-theme-ui.scss +1 -0
  125. package/components/Badge.d.ts +3 -0
  126. package/components/Badge.js +3 -0
  127. package/components/autocomplete/Autocomplete.js +15 -3
  128. package/components/autocomplete/style/_autocomplete.scss +17 -1
  129. package/components/autocomplete/style/dnb-autocomplete.css +36 -3
  130. package/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  131. package/components/avatar/style/_avatar.scss +1 -0
  132. package/components/avatar/style/dnb-avatar.css +1 -0
  133. package/components/avatar/style/dnb-avatar.min.css +1 -1
  134. package/components/badge/Badge.d.ts +58 -0
  135. package/components/badge/Badge.js +92 -0
  136. package/components/badge/index.d.ts +8 -0
  137. package/components/badge/index.js +3 -0
  138. package/components/badge/style/_badge.scss +74 -0
  139. package/components/badge/style/dnb-badge.css +151 -0
  140. package/components/badge/style/dnb-badge.min.css +1 -0
  141. package/components/badge/style/dnb-badge.scss +12 -0
  142. package/components/badge/style/index.d.ts +6 -0
  143. package/components/badge/style/index.js +1 -0
  144. package/components/badge/style/themes/dnb-badge-theme-ui.css +21 -0
  145. package/components/badge/style/themes/dnb-badge-theme-ui.min.css +1 -0
  146. package/components/badge/style/themes/dnb-badge-theme-ui.scss +17 -0
  147. package/components/badge/style/themes/ui.d.ts +1 -0
  148. package/components/badge/style/themes/ui.js +1 -0
  149. package/components/badge/style.d.ts +1 -0
  150. package/components/badge/style.js +1 -0
  151. package/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  152. package/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  153. package/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  154. package/components/dialog/style/dnb-dialog.css +12 -19
  155. package/components/dialog/style/dnb-dialog.min.css +1 -1
  156. package/components/dialog/style/themes/dnb-dialog-theme-ui.css +0 -2
  157. package/components/dialog/style/themes/dnb-dialog-theme-ui.min.css +1 -1
  158. package/components/dialog/style/themes/dnb-dialog-theme-ui.scss +0 -7
  159. package/components/drawer/DrawerContent.js +4 -1
  160. package/components/drawer/style/_drawer.scss +6 -13
  161. package/components/drawer/style/dnb-drawer.css +21 -31
  162. package/components/drawer/style/dnb-drawer.min.css +1 -1
  163. package/components/drawer/style/themes/dnb-drawer-theme-ui.css +0 -2
  164. package/components/drawer/style/themes/dnb-drawer-theme-ui.min.css +1 -1
  165. package/components/drawer/style/themes/dnb-drawer-theme-ui.scss +0 -7
  166. package/components/form-row/FormRow.js +9 -8
  167. package/components/form-row/FormRowHelpers.d.ts +1 -0
  168. package/components/form-row/FormRowHelpers.js +10 -0
  169. package/components/index.d.ts +2 -1
  170. package/components/index.js +2 -1
  171. package/components/lib.d.ts +3 -1
  172. package/components/lib.js +3 -1
  173. package/components/modal/ModalContent.js +0 -2
  174. package/components/modal/style/_modal.scss +0 -4
  175. package/components/modal/style/dnb-modal.css +12 -19
  176. package/components/modal/style/dnb-modal.min.css +1 -1
  177. package/components/modal/style/themes/dnb-modal-theme-ui.css +6 -2
  178. package/components/modal/style/themes/dnb-modal-theme-ui.min.css +1 -1
  179. package/components/modal/style/themes/dnb-modal-theme-ui.scss +6 -5
  180. package/components/skeleton/SkeletonHelper.d.ts +2 -1
  181. package/components/slider/Slider.d.ts +8 -229
  182. package/components/slider/Slider.js +8 -748
  183. package/components/slider/SliderHelpers.d.ts +23 -0
  184. package/components/slider/SliderHelpers.js +158 -0
  185. package/components/slider/SliderInstance.d.ts +6 -0
  186. package/components/slider/SliderInstance.js +162 -0
  187. package/components/slider/SliderProvider.d.ts +4 -0
  188. package/components/slider/SliderProvider.js +236 -0
  189. package/components/slider/SliderThumb.d.ts +2 -0
  190. package/components/slider/SliderThumb.js +114 -0
  191. package/components/slider/SliderTrack.d.ts +6 -0
  192. package/components/slider/SliderTrack.js +105 -0
  193. package/components/slider/hooks/useSliderEvents.d.ts +11 -0
  194. package/components/slider/hooks/useSliderEvents.js +132 -0
  195. package/components/slider/hooks/useSliderProps.d.ts +1 -0
  196. package/components/slider/hooks/useSliderProps.js +5 -0
  197. package/components/slider/style/_slider.scss +19 -54
  198. package/components/slider/style/dnb-slider.css +30 -66
  199. package/components/slider/style/dnb-slider.min.css +1 -1
  200. package/components/slider/style/themes/dnb-slider-theme-ui.css +0 -16
  201. package/components/slider/style/themes/dnb-slider-theme-ui.min.css +1 -1
  202. package/components/slider/style/themes/dnb-slider-theme-ui.scss +0 -17
  203. package/components/slider/types.d.ts +100 -0
  204. package/components/slider/types.js +1 -0
  205. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  206. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  207. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  208. package/components/timeline/TimelineItem.js +2 -1
  209. package/elements/Anchor.d.ts +44 -105
  210. package/elements/Anchor.js +51 -113
  211. package/elements/Element.d.ts +23 -40
  212. package/elements/Element.js +44 -92
  213. package/elements/Link.d.ts +18 -1
  214. package/elements/lib.d.ts +36 -2
  215. package/es/components/Badge.d.ts +3 -0
  216. package/es/components/Badge.js +3 -0
  217. package/es/components/autocomplete/Autocomplete.js +14 -3
  218. package/es/components/autocomplete/style/_autocomplete.scss +17 -1
  219. package/es/components/autocomplete/style/dnb-autocomplete.css +36 -3
  220. package/es/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  221. package/es/components/avatar/style/_avatar.scss +1 -0
  222. package/es/components/avatar/style/dnb-avatar.css +1 -0
  223. package/es/components/avatar/style/dnb-avatar.min.css +1 -1
  224. package/es/components/badge/Badge.d.ts +58 -0
  225. package/es/components/badge/Badge.js +88 -0
  226. package/es/components/badge/index.d.ts +8 -0
  227. package/es/components/badge/index.js +3 -0
  228. package/es/components/badge/style/_badge.scss +74 -0
  229. package/es/components/badge/style/dnb-badge.css +151 -0
  230. package/es/components/badge/style/dnb-badge.min.css +1 -0
  231. package/es/components/badge/style/dnb-badge.scss +12 -0
  232. package/es/components/badge/style/index.d.ts +6 -0
  233. package/es/components/badge/style/index.js +1 -0
  234. package/es/components/badge/style/themes/dnb-badge-theme-ui.css +21 -0
  235. package/es/components/badge/style/themes/dnb-badge-theme-ui.min.css +1 -0
  236. package/es/components/badge/style/themes/dnb-badge-theme-ui.scss +17 -0
  237. package/es/components/badge/style/themes/ui.d.ts +1 -0
  238. package/es/components/badge/style/themes/ui.js +1 -0
  239. package/es/components/badge/style.d.ts +1 -0
  240. package/es/components/badge/style.js +1 -0
  241. package/es/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  242. package/es/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  243. package/es/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  244. package/es/components/dialog/style/dnb-dialog.css +12 -19
  245. package/es/components/dialog/style/dnb-dialog.min.css +1 -1
  246. package/es/components/dialog/style/themes/dnb-dialog-theme-ui.css +0 -2
  247. package/es/components/dialog/style/themes/dnb-dialog-theme-ui.min.css +1 -1
  248. package/es/components/dialog/style/themes/dnb-dialog-theme-ui.scss +0 -7
  249. package/es/components/drawer/DrawerContent.js +4 -1
  250. package/es/components/drawer/style/_drawer.scss +6 -13
  251. package/es/components/drawer/style/dnb-drawer.css +21 -31
  252. package/es/components/drawer/style/dnb-drawer.min.css +1 -1
  253. package/es/components/drawer/style/themes/dnb-drawer-theme-ui.css +0 -2
  254. package/es/components/drawer/style/themes/dnb-drawer-theme-ui.min.css +1 -1
  255. package/es/components/drawer/style/themes/dnb-drawer-theme-ui.scss +0 -7
  256. package/es/components/form-row/FormRow.js +13 -11
  257. package/es/components/form-row/FormRowHelpers.d.ts +1 -0
  258. package/es/components/form-row/FormRowHelpers.js +10 -0
  259. package/es/components/index.d.ts +2 -1
  260. package/es/components/index.js +2 -1
  261. package/es/components/lib.d.ts +3 -1
  262. package/es/components/lib.js +3 -1
  263. package/es/components/modal/ModalContent.js +0 -1
  264. package/es/components/modal/style/_modal.scss +0 -4
  265. package/es/components/modal/style/dnb-modal.css +12 -19
  266. package/es/components/modal/style/dnb-modal.min.css +1 -1
  267. package/es/components/modal/style/themes/dnb-modal-theme-ui.css +6 -2
  268. package/es/components/modal/style/themes/dnb-modal-theme-ui.min.css +1 -1
  269. package/es/components/modal/style/themes/dnb-modal-theme-ui.scss +6 -5
  270. package/es/components/skeleton/SkeletonHelper.d.ts +2 -1
  271. package/es/components/slider/Slider.d.ts +8 -229
  272. package/es/components/slider/Slider.js +7 -688
  273. package/es/components/slider/SliderHelpers.d.ts +23 -0
  274. package/es/components/slider/SliderHelpers.js +130 -0
  275. package/es/components/slider/SliderInstance.d.ts +6 -0
  276. package/es/components/slider/SliderInstance.js +167 -0
  277. package/es/components/slider/SliderProvider.d.ts +4 -0
  278. package/es/components/slider/SliderProvider.js +214 -0
  279. package/es/components/slider/SliderThumb.d.ts +2 -0
  280. package/es/components/slider/SliderThumb.js +106 -0
  281. package/es/components/slider/SliderTrack.d.ts +6 -0
  282. package/es/components/slider/SliderTrack.js +100 -0
  283. package/es/components/slider/hooks/useSliderEvents.d.ts +11 -0
  284. package/es/components/slider/hooks/useSliderEvents.js +129 -0
  285. package/es/components/slider/hooks/useSliderProps.d.ts +1 -0
  286. package/es/components/slider/hooks/useSliderProps.js +5 -0
  287. package/es/components/slider/style/_slider.scss +19 -54
  288. package/es/components/slider/style/dnb-slider.css +30 -66
  289. package/es/components/slider/style/dnb-slider.min.css +1 -1
  290. package/es/components/slider/style/themes/dnb-slider-theme-ui.css +0 -16
  291. package/es/components/slider/style/themes/dnb-slider-theme-ui.min.css +1 -1
  292. package/es/components/slider/style/themes/dnb-slider-theme-ui.scss +0 -17
  293. package/es/components/slider/types.d.ts +100 -0
  294. package/es/components/slider/types.js +1 -0
  295. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  296. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  297. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  298. package/es/components/timeline/TimelineItem.js +2 -1
  299. package/es/elements/Anchor.d.ts +44 -105
  300. package/es/elements/Anchor.js +49 -80
  301. package/es/elements/Element.d.ts +23 -40
  302. package/es/elements/Element.js +44 -61
  303. package/es/elements/Link.d.ts +18 -1
  304. package/es/elements/lib.d.ts +36 -2
  305. package/es/index.d.ts +2 -1
  306. package/es/index.js +2 -1
  307. package/es/shared/AlignmentHelper.js +2 -2
  308. package/es/shared/Context.d.ts +7 -1
  309. package/es/shared/Eufemia.js +1 -1
  310. package/es/shared/helpers/Suffix.d.ts +6 -4
  311. package/es/shared/helpers/Suffix.js +5 -3
  312. package/es/shared/helpers/filterValidProps.d.ts +11 -0
  313. package/es/shared/helpers/filterValidProps.js +14 -0
  314. package/es/shared/helpers/withCamelCaseProps.d.ts +1 -1
  315. package/es/shared/helpers/withCamelCaseProps.js +9 -0
  316. package/es/shared/helpers/withSnakeCaseProps.d.ts +40 -0
  317. package/es/shared/helpers/withSnakeCaseProps.js +72 -0
  318. package/es/shared/locales/en-GB.d.ts +3 -3
  319. package/es/shared/locales/en-GB.js +3 -3
  320. package/es/shared/locales/en-US.d.ts +3 -3
  321. package/es/shared/locales/index.d.ts +6 -6
  322. package/es/shared/locales/nb-NO.d.ts +3 -3
  323. package/es/shared/locales/nb-NO.js +3 -3
  324. package/es/style/dnb-ui-components.css +161 -88
  325. package/es/style/dnb-ui-components.min.css +4 -4
  326. package/es/style/dnb-ui-components.scss +1 -0
  327. package/es/style/dnb-ui-elements.css +44 -28
  328. package/es/style/dnb-ui-elements.min.css +1 -1
  329. package/es/style/dnb-ui-tags.css +63 -40
  330. package/es/style/dnb-ui-tags.min.css +1 -1
  331. package/es/style/elements/_anchor-mixins.scss +6 -3
  332. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css +237 -46
  333. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +7 -7
  334. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  335. package/es/style/themes/theme-ui/dnb-theme-ui.css +72 -50
  336. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +4 -4
  337. package/es/style/themes/theme-ui/dnb-theme-ui.scss +1 -0
  338. package/esm/dnb-ui-basis.min.mjs +1 -1
  339. package/esm/dnb-ui-components.min.mjs +3 -3
  340. package/esm/dnb-ui-elements.min.mjs +9 -10
  341. package/esm/dnb-ui-extensions.min.mjs +4 -4
  342. package/esm/dnb-ui-lib.min.mjs +3 -3
  343. package/esm/dnb-ui-web-components.min.mjs +3 -3
  344. package/index.d.ts +2 -1
  345. package/index.js +2 -1
  346. package/package.json +1 -1
  347. package/shared/AlignmentHelper.js +4 -2
  348. package/shared/Context.d.ts +7 -1
  349. package/shared/Eufemia.js +1 -1
  350. package/shared/helpers/Suffix.d.ts +6 -4
  351. package/shared/helpers/Suffix.js +4 -2
  352. package/shared/helpers/filterValidProps.d.ts +11 -0
  353. package/shared/helpers/filterValidProps.js +14 -0
  354. package/shared/helpers/withCamelCaseProps.d.ts +1 -1
  355. package/shared/helpers/withCamelCaseProps.js +10 -0
  356. package/shared/helpers/withSnakeCaseProps.d.ts +40 -0
  357. package/shared/helpers/withSnakeCaseProps.js +115 -0
  358. package/shared/locales/en-GB.d.ts +3 -3
  359. package/shared/locales/en-GB.js +3 -3
  360. package/shared/locales/en-US.d.ts +3 -3
  361. package/shared/locales/index.d.ts +6 -6
  362. package/shared/locales/nb-NO.d.ts +3 -3
  363. package/shared/locales/nb-NO.js +3 -3
  364. package/style/dnb-ui-components.css +161 -88
  365. package/style/dnb-ui-components.min.css +4 -4
  366. package/style/dnb-ui-components.scss +1 -0
  367. package/style/dnb-ui-elements.css +44 -28
  368. package/style/dnb-ui-elements.min.css +1 -1
  369. package/style/dnb-ui-tags.css +63 -40
  370. package/style/dnb-ui-tags.min.css +1 -1
  371. package/style/elements/_anchor-mixins.scss +6 -3
  372. package/style/themes/theme-eiendom/dnb-theme-eiendom.css +237 -46
  373. package/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +7 -7
  374. package/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  375. package/style/themes/theme-ui/dnb-theme-ui.css +72 -50
  376. package/style/themes/theme-ui/dnb-theme-ui.min.css +4 -4
  377. package/style/themes/theme-ui/dnb-theme-ui.scss +1 -0
  378. package/umd/dnb-ui-basis.min.js +1 -1
  379. package/umd/dnb-ui-components.min.js +5 -5
  380. package/umd/dnb-ui-elements.min.js +20 -21
  381. package/umd/dnb-ui-extensions.min.js +3 -3
  382. package/umd/dnb-ui-lib.min.js +4 -4
  383. package/umd/dnb-ui-web-components.min.js +4 -4
  384. package/cjs/components/slider/web-component.d.ts +0 -3
  385. package/components/slider/web-component.d.ts +0 -3
  386. package/components/slider/web-component.js +0 -5
  387. package/es/components/slider/web-component.d.ts +0 -3
  388. package/es/components/slider/web-component.js +0 -5
@@ -0,0 +1,301 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.symbol.js");
4
+
5
+ require("core-js/modules/es.symbol.description.js");
6
+
7
+ require("core-js/modules/es.symbol.iterator.js");
8
+
9
+ require("core-js/modules/es.array.iterator.js");
10
+
11
+ require("core-js/modules/es.string.iterator.js");
12
+
13
+ require("core-js/modules/web.dom-collections.iterator.js");
14
+
15
+ require("core-js/modules/es.array.slice.js");
16
+
17
+ require("core-js/modules/es.function.name.js");
18
+
19
+ require("core-js/modules/es.array.from.js");
20
+
21
+ require("core-js/modules/es.regexp.exec.js");
22
+
23
+ require("core-js/modules/es.object.keys.js");
24
+
25
+ require("core-js/modules/es.array.index-of.js");
26
+
27
+ Object.defineProperty(exports, "__esModule", {
28
+ value: true
29
+ });
30
+ exports.SliderContext = void 0;
31
+ exports.SliderProvider = SliderProvider;
32
+
33
+ require("core-js/modules/es.array.reverse.js");
34
+
35
+ require("core-js/modules/es.object.to-string.js");
36
+
37
+ var _react = _interopRequireDefault(require("react"));
38
+
39
+ var _FormRowHelpers = require("../../components/form-row/FormRowHelpers");
40
+
41
+ var _hooks = require("../../shared/hooks");
42
+
43
+ var _componentHelper = require("../../shared/component-helper");
44
+
45
+ var _Context = _interopRequireDefault(require("../../shared/Context"));
46
+
47
+ var _SliderHelpers = require("./SliderHelpers");
48
+
49
+ var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
50
+
51
+ var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
52
+
53
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54
+
55
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
56
+
57
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
58
+
59
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
60
+
61
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
62
+
63
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
64
+
65
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
66
+
67
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
68
+
69
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
70
+
71
+ var defaultProps = {
72
+ statusState: 'error',
73
+ addTitle: '+',
74
+ subtractTitle: '−',
75
+ min: 0,
76
+ max: 100,
77
+ value: -1,
78
+ multiThumbBehavior: 'swap'
79
+ };
80
+
81
+ var SliderContext = _react.default.createContext(null);
82
+
83
+ exports.SliderContext = SliderContext;
84
+
85
+ function SliderProvider(localProps) {
86
+ var context = _react.default.useContext(_Context.default);
87
+
88
+ var allProps = (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _hooks.usePropsWithContext)(localProps, defaultProps, {
89
+ skeleton: context === null || context === void 0 ? void 0 : context.skeleton
90
+ }, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, (0, _FormRowHelpers.includeValidProps)(context === null || context === void 0 ? void 0 : context.FormRow, {
91
+ vertical: null
92
+ }), context === null || context === void 0 ? void 0 : context.Slider));
93
+
94
+ var _React$useState = _react.default.useState(_componentHelper.makeUniqueId),
95
+ _React$useState2 = _slicedToArray(_React$useState, 1),
96
+ _id = _React$useState2[0];
97
+
98
+ if (!allProps.id) {
99
+ allProps.id = _id;
100
+ }
101
+
102
+ var step = allProps.step,
103
+ label = allProps.label,
104
+ labelDirection = allProps.labelDirection,
105
+ labelSrOnly = allProps.labelSrOnly,
106
+ status = allProps.status,
107
+ statusState = allProps.statusState,
108
+ statusProps = allProps.statusProps,
109
+ statusNoAnimation = allProps.statusNoAnimation,
110
+ globalStatusId = allProps.globalStatusId,
111
+ stretch = allProps.stretch,
112
+ suffix = allProps.suffix,
113
+ title = allProps.thumbTitle,
114
+ subtractTitle = allProps.subtractTitle,
115
+ addTitle = allProps.addTitle,
116
+ hideButtons = allProps.hideButtons,
117
+ multiThumbBehavior = allProps.multiThumbBehavior,
118
+ numberFormat = allProps.numberFormat,
119
+ skeleton = allProps.skeleton,
120
+ max = allProps.max,
121
+ min = allProps.min,
122
+ disabled = allProps.disabled,
123
+ className = allProps.className,
124
+ id = allProps.id,
125
+ onInit = allProps.onInit,
126
+ onChange = allProps.onChange,
127
+ onDragStart = allProps.onDragStart,
128
+ onDragEnd = allProps.onDragEnd,
129
+ _vertical = allProps.vertical,
130
+ _reverse = allProps.reverse,
131
+ _value = allProps.value,
132
+ _children = allProps.children,
133
+ attributes = _objectWithoutProperties(allProps, _excluded);
134
+
135
+ var _React$useState3 = _react.default.useState(_value),
136
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
137
+ value = _React$useState4[0],
138
+ setValue = _React$useState4[1];
139
+
140
+ var realtimeValue = _react.default.useRef(_value);
141
+
142
+ var _React$useState5 = _react.default.useState('initial'),
143
+ _React$useState6 = _slicedToArray(_React$useState5, 2),
144
+ thumbState = _React$useState6[0],
145
+ setThumbState = _React$useState6[1];
146
+
147
+ var thumbIndex = _react.default.useRef(-1);
148
+
149
+ var _React$useState7 = _react.default.useState((0, _componentHelper.isTrue)(_vertical)),
150
+ _React$useState8 = _slicedToArray(_React$useState7, 1),
151
+ isVertical = _React$useState8[0];
152
+
153
+ var _React$useState9 = _react.default.useState(isVertical ? !(0, _componentHelper.isTrue)(_reverse) : (0, _componentHelper.isTrue)(_reverse)),
154
+ _React$useState10 = _slicedToArray(_React$useState9, 1),
155
+ isReverse = _React$useState10[0];
156
+
157
+ var isMulti = Array.isArray(value);
158
+
159
+ var setThumbIndex = function setThumbIndex(index) {
160
+ if (!isNaN(index)) {
161
+ thumbIndex.current = index;
162
+ }
163
+ };
164
+
165
+ if (allProps.use_scrollwheel) {
166
+ (0, _componentHelper.warn)('use_scrollwheel is not supported anymore!');
167
+ }
168
+
169
+ var getAndUpdateCurrentIndex = function getAndUpdateCurrentIndex(currentValue) {
170
+ var currentIndex = null;
171
+
172
+ if (thumbIndex.current > -1) {
173
+ currentIndex = thumbIndex.current;
174
+ } else {
175
+ currentIndex = (0, _SliderHelpers.closestIndex)(currentValue, value);
176
+ setThumbIndex(currentIndex);
177
+ }
178
+
179
+ return currentIndex;
180
+ };
181
+
182
+ var updateValue = function updateValue(value) {
183
+ setValue(value);
184
+ realtimeValue.current = value;
185
+ };
186
+
187
+ var emitChange = function emitChange(event, rawValue) {
188
+ if (disabled || (0, _componentHelper.isTrue)(skeleton)) {
189
+ return;
190
+ }
191
+
192
+ var numberValue = (0, _SliderHelpers.roundValue)(rawValue, step);
193
+ var multiValues = numberValue;
194
+
195
+ if (numberValue > -1) {
196
+ if (isMulti) {
197
+ var currentIndex = getAndUpdateCurrentIndex(numberValue);
198
+ var lower = realtimeValue.current[currentIndex - 1];
199
+ var upper = realtimeValue.current[currentIndex + 1];
200
+
201
+ if (multiThumbBehavior === 'omit') {
202
+ if (numberValue < lower) {
203
+ numberValue = lower;
204
+ }
205
+
206
+ if (numberValue > upper) {
207
+ numberValue = upper;
208
+ }
209
+ }
210
+
211
+ multiValues = (0, _SliderHelpers.getUpdatedValues)(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
212
+
213
+ if (multiThumbBehavior === 'push') {
214
+ if (typeof lower !== 'undefined' && numberValue < lower) {
215
+ multiValues[currentIndex - 1] = numberValue;
216
+ }
217
+
218
+ if (typeof upper !== 'undefined' && numberValue >= upper) {
219
+ multiValues[currentIndex + 1] = numberValue;
220
+ }
221
+ }
222
+
223
+ if (numberValue === realtimeValue.current[currentIndex]) {
224
+ return;
225
+ }
226
+ } else if (numberValue === realtimeValue.current) {
227
+ return;
228
+ }
229
+
230
+ if (typeof onChange === 'function') {
231
+ var obj = {
232
+ value: multiValues,
233
+ rawValue: rawValue,
234
+ raw_value: rawValue,
235
+ event: event,
236
+ number: null
237
+ };
238
+
239
+ if (numberFormat) {
240
+ obj.number = (0, _SliderHelpers.formatNumber)(numberValue, numberFormat);
241
+ }
242
+
243
+ (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
244
+ }
245
+
246
+ updateValue(multiValues);
247
+ }
248
+ };
249
+
250
+ _react.default.useEffect(function () {
251
+ if (isMulti) {
252
+ var hasChanged = _value.some(function (val, i) {
253
+ return val !== value[i];
254
+ });
255
+
256
+ if (hasChanged) {
257
+ updateValue(_value);
258
+ }
259
+ } else {
260
+ updateValue(_value);
261
+ }
262
+ }, [_value, isMulti]);
263
+
264
+ var trackRef = _react.default.useRef();
265
+
266
+ var jumpedTimeout = _react.default.useRef();
267
+
268
+ var setJumpedState = function setJumpedState() {
269
+ setThumbState('jumped');
270
+ clearTimeout(jumpedTimeout.current);
271
+ jumpedTimeout.current = setTimeout(function () {
272
+ return setThumbState('normal');
273
+ }, 100);
274
+ };
275
+
276
+ var showStatus = (0, _componentHelper.getStatusState)(status);
277
+ var showButtons = !isMulti && !(0, _componentHelper.isTrue)(hideButtons);
278
+ var values = isMulti ? value : [value];
279
+ return _react.default.createElement(SliderContext.Provider, {
280
+ value: {
281
+ isMulti: isMulti,
282
+ isReverse: isReverse,
283
+ isVertical: isVertical,
284
+ value: value,
285
+ values: values,
286
+ setValue: setValue,
287
+ attributes: attributes,
288
+ showStatus: showStatus,
289
+ showButtons: showButtons,
290
+ thumbState: thumbState,
291
+ setThumbState: setThumbState,
292
+ thumbIndex: thumbIndex,
293
+ setThumbIndex: setThumbIndex,
294
+ emitChange: emitChange,
295
+ allProps: allProps,
296
+ trackRef: trackRef,
297
+ setJumpedState: setJumpedState,
298
+ jumpedTimeout: jumpedTimeout
299
+ }
300
+ }, localProps.children);
301
+ }
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare function SliderThumb(): JSX.Element;
@@ -0,0 +1,142 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.object.keys.js");
4
+
5
+ require("core-js/modules/es.symbol.js");
6
+
7
+ require("core-js/modules/es.array.filter.js");
8
+
9
+ require("core-js/modules/es.object.get-own-property-descriptor.js");
10
+
11
+ require("core-js/modules/web.dom-collections.for-each.js");
12
+
13
+ require("core-js/modules/es.object.get-own-property-descriptors.js");
14
+
15
+ require("core-js/modules/es.object.assign.js");
16
+
17
+ Object.defineProperty(exports, "__esModule", {
18
+ value: true
19
+ });
20
+ exports.SliderThumb = SliderThumb;
21
+
22
+ require("core-js/modules/es.array.iterator.js");
23
+
24
+ require("core-js/modules/es.object.to-string.js");
25
+
26
+ require("core-js/modules/web.dom-collections.iterator.js");
27
+
28
+ require("core-js/modules/es.array.map.js");
29
+
30
+ var _react = _interopRequireDefault(require("react"));
31
+
32
+ var _componentHelper = require("../../shared/component-helper");
33
+
34
+ var _Button = _interopRequireDefault(require("../button/Button"));
35
+
36
+ var _useSliderEvents2 = require("./hooks/useSliderEvents");
37
+
38
+ var _useSliderProps2 = require("./hooks/useSliderProps");
39
+
40
+ var _SliderHelpers = require("./SliderHelpers");
41
+
42
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
43
+
44
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
45
+
46
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
47
+
48
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
49
+
50
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
51
+
52
+ function SliderThumb() {
53
+ var _useSliderProps = (0, _useSliderProps2.useSliderProps)(),
54
+ values = _useSliderProps.values,
55
+ thumbIndex = _useSliderProps.thumbIndex,
56
+ isVertical = _useSliderProps.isVertical,
57
+ isReverse = _useSliderProps.isReverse,
58
+ showStatus = _useSliderProps.showStatus,
59
+ attributes = _useSliderProps.attributes,
60
+ allProps = _useSliderProps.allProps;
61
+
62
+ var id = allProps.id,
63
+ label = allProps.label,
64
+ min = allProps.min,
65
+ max = allProps.max,
66
+ step = allProps.step,
67
+ skeleton = allProps.skeleton,
68
+ disabled = allProps.disabled,
69
+ suffix = allProps.suffix,
70
+ numberFormat = allProps.numberFormat;
71
+
72
+ var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
73
+ onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
74
+ onThumbMouseUpHandler = _useSliderEvents.onThumbMouseUpHandler,
75
+ onThumbBlurHandler = _useSliderEvents.onThumbBlurHandler,
76
+ onThumbFocusHandler = _useSliderEvents.onThumbFocusHandler,
77
+ onHelperChangeHandler = _useSliderEvents.onHelperChangeHandler,
78
+ onHelperFocusHandler = _useSliderEvents.onHelperFocusHandler;
79
+
80
+ var thumbParams = _objectSpread({
81
+ onBlur: onThumbBlurHandler,
82
+ onFocus: onThumbFocusHandler
83
+ }, attributes);
84
+
85
+ var helperParams = {};
86
+
87
+ if (label) {
88
+ helperParams['aria-labelledby'] = (0, _componentHelper.combineLabelledBy)(helperParams, label ? id + '-label' : null);
89
+ }
90
+
91
+ if (showStatus || suffix) {
92
+ helperParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
93
+ }
94
+
95
+ (0, _componentHelper.validateDOMAttributes)(null, helperParams);
96
+ (0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
97
+ return _react.default.createElement(_react.default.Fragment, null, values.map(function (value, i) {
98
+ var index = thumbIndex.current;
99
+ var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
100
+
101
+ if (isReverse) {
102
+ percent = 100 - percent;
103
+ }
104
+
105
+ var style = _defineProperty({
106
+ zIndex: index === i ? 4 : 3
107
+ }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
108
+
109
+ var humanNumber = (0, _SliderHelpers.getHumanNumber)(value, numberFormat);
110
+ return _react.default.createElement(_react.default.Fragment, {
111
+ key: i
112
+ }, _react.default.createElement("span", {
113
+ className: "dnb-slider__thumb",
114
+ style: style
115
+ }, _react.default.createElement("input", _extends({
116
+ type: "range",
117
+ className: "dnb-slider__button-helper",
118
+ min: min,
119
+ max: max,
120
+ step: step,
121
+ value: value,
122
+ disabled: disabled,
123
+ onChange: onHelperChangeHandler,
124
+ onFocus: onHelperFocusHandler,
125
+ "aria-valuemin": min,
126
+ "aria-valuemax": max,
127
+ "aria-valuenow": value,
128
+ "aria-valuetext": humanNumber ? humanNumber : undefined,
129
+ "aria-orientation": isVertical ? 'vertical' : 'horizontal',
130
+ "data-index": i
131
+ }, helperParams)), _react.default.createElement(_Button.default, _extends({
132
+ element: "span",
133
+ type: "",
134
+ variant: "secondary",
135
+ disabled: disabled,
136
+ skeleton: skeleton,
137
+ "data-index": i,
138
+ onMouseDown: onThumbMouseDownHandler,
139
+ onMouseUp: onThumbMouseUpHandler
140
+ }, thumbParams))));
141
+ }));
142
+ }
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ export declare function SliderMainTrack({ children, }: {
3
+ children: React.ReactNode | React.ReactNode[];
4
+ }): JSX.Element;
5
+ export declare function SliderTrackBefore(): JSX.Element;
6
+ export declare function SliderTrackAfter(): JSX.Element;
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SliderMainTrack = SliderMainTrack;
7
+ exports.SliderTrackAfter = SliderTrackAfter;
8
+ exports.SliderTrackBefore = SliderTrackBefore;
9
+
10
+ require("core-js/modules/es.array.iterator.js");
11
+
12
+ require("core-js/modules/es.object.to-string.js");
13
+
14
+ require("core-js/modules/web.dom-collections.iterator.js");
15
+
16
+ require("core-js/modules/es.array.sort.js");
17
+
18
+ require("core-js/modules/es.array.reverse.js");
19
+
20
+ require("core-js/modules/es.object.assign.js");
21
+
22
+ var _react = _interopRequireDefault(require("react"));
23
+
24
+ var _componentHelper = require("../../shared/component-helper");
25
+
26
+ var _useSliderEvents2 = require("./hooks/useSliderEvents");
27
+
28
+ var _useSliderProps3 = require("./hooks/useSliderProps");
29
+
30
+ var _SliderHelpers = require("./SliderHelpers");
31
+
32
+ var _span;
33
+
34
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
35
+
36
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
37
+
38
+ function SliderMainTrack(_ref) {
39
+ var children = _ref.children;
40
+
41
+ var _useSliderProps = (0, _useSliderProps3.useSliderProps)(),
42
+ isMulti = _useSliderProps.isMulti,
43
+ value = _useSliderProps.value,
44
+ allProps = _useSliderProps.allProps,
45
+ trackRef = _useSliderProps.trackRef,
46
+ jumpedTimeout = _useSliderProps.jumpedTimeout,
47
+ thumbState = _useSliderProps.thumbState;
48
+
49
+ var id = allProps.id,
50
+ numberFormat = allProps.numberFormat,
51
+ onInit = allProps.onInit;
52
+
53
+ var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
54
+ onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
55
+ onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
56
+ removeEvents = _useSliderEvents.removeEvents;
57
+
58
+ _react.default.useEffect(function () {
59
+ if (typeof onInit === 'function' && !isMulti) {
60
+ var obj = {
61
+ value: value,
62
+ number: null
63
+ };
64
+
65
+ if (numberFormat) {
66
+ obj.number = (0, _SliderHelpers.formatNumber)(value, numberFormat);
67
+ }
68
+
69
+ (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onInit', obj);
70
+ }
71
+
72
+ return function () {
73
+ removeEvents();
74
+ clearTimeout(jumpedTimeout.current);
75
+ };
76
+ }, []);
77
+
78
+ var trackParams = {
79
+ className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
80
+ onTouchStart: onTrackClickHandler,
81
+ onTouchStartCapture: onThumbMouseDownHandler,
82
+ onMouseDown: onTrackClickHandler,
83
+ onMouseDownCapture: onThumbMouseDownHandler
84
+ };
85
+ (0, _componentHelper.validateDOMAttributes)(null, trackParams);
86
+ return _react.default.createElement("span", _extends({
87
+ id: id,
88
+ ref: trackRef
89
+ }, trackParams), children);
90
+ }
91
+
92
+ var trackObj = [['right', 'left'], ['bottom', 'top']];
93
+
94
+ function SliderTrackBefore() {
95
+ var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
96
+ origValues = _useSliderProps2.values,
97
+ isVertical = _useSliderProps2.isVertical,
98
+ isReverse = _useSliderProps2.isReverse,
99
+ thumbIndex = _useSliderProps2.thumbIndex,
100
+ _useSliderProps2$allP = _useSliderProps2.allProps,
101
+ min = _useSliderProps2$allP.min,
102
+ max = _useSliderProps2$allP.max;
103
+
104
+ var values = origValues.sort(function (a, b) {
105
+ return a - b;
106
+ });
107
+ var isBetween = values.length >= 2;
108
+
109
+ if (isBetween && values[0] > values[values.length - 1]) {
110
+ values.reverse();
111
+ }
112
+
113
+ var index = thumbIndex.current;
114
+ var upperValue = values[isBetween ? 0 : index > -1 ? index : 0];
115
+ var upperPercent = isBetween ? (0, _SliderHelpers.clamp)((upperValue - min) * 100 / (max - min)) : 0;
116
+ var lowerValue = values[isBetween ? values.length - 1 : index > -1 ? index : 0];
117
+ var lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
118
+ var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
119
+ var style = {};
120
+ style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
121
+ style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
122
+ return _react.default.createElement("span", {
123
+ className: "dnb-slider__line dnb-slider__line__before",
124
+ style: style
125
+ });
126
+ }
127
+
128
+ function SliderTrackAfter() {
129
+ return _span || (_span = _react.default.createElement("span", {
130
+ className: "dnb-slider__line dnb-slider__line__after"
131
+ }));
132
+ }
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ export declare function useSliderEvents(): {
3
+ onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
4
+ onThumbMouseUpHandler: () => void;
5
+ onTrackClickHandler: (event: MouseEvent | TouchEvent) => void;
6
+ onThumbFocusHandler: () => void;
7
+ onThumbBlurHandler: () => void;
8
+ onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
9
+ onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
10
+ removeEvents: () => void;
11
+ };