@dnb/eufemia 9.16.3 → 9.18.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 (785) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/assets/assets/icons/above_the_line.svg +1 -1
  3. package/assets/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  4. package/assets/assets/icons/eufemia-icons-pdf.tgz +0 -0
  5. package/assets/assets/icons/facebook.svg +3 -0
  6. package/assets/assets/icons/facebook_medium.svg +3 -0
  7. package/assets/assets/icons/fridge.svg +1 -1
  8. package/assets/assets/icons/information_circled.svg +2 -1
  9. package/assets/assets/icons/information_circled_medium.svg +2 -1
  10. package/assets/assets/icons/instagram.svg +5 -0
  11. package/assets/assets/icons/instagram_medium.svg +12 -0
  12. package/assets/assets/icons/linkedin.svg +3 -0
  13. package/assets/assets/icons/linkedin_medium.svg +3 -0
  14. package/assets/assets/icons/motorcycle_medium.svg +2 -2
  15. package/assets/assets/icons/paragraph.svg +1 -1
  16. package/assets/assets/icons/scooter_medium.svg +2 -2
  17. package/assets/assets/icons/tag.svg +4 -0
  18. package/assets/assets/icons/tag_medium.svg +4 -0
  19. package/assets/icons/above_the_line.svg +1 -1
  20. package/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  21. package/assets/icons/eufemia-icons-pdf.tgz +0 -0
  22. package/assets/icons/facebook.svg +3 -0
  23. package/assets/icons/facebook_medium.svg +3 -0
  24. package/assets/icons/fridge.svg +1 -1
  25. package/assets/icons/information_circled.svg +2 -1
  26. package/assets/icons/information_circled_medium.svg +2 -1
  27. package/assets/icons/instagram.svg +5 -0
  28. package/assets/icons/instagram_medium.svg +12 -0
  29. package/assets/icons/linkedin.svg +3 -0
  30. package/assets/icons/linkedin_medium.svg +3 -0
  31. package/assets/icons/motorcycle_medium.svg +2 -2
  32. package/assets/icons/paragraph.svg +1 -1
  33. package/assets/icons/scooter_medium.svg +2 -2
  34. package/assets/icons/tag.svg +4 -0
  35. package/assets/icons/tag_medium.svg +4 -0
  36. package/cjs/components/Tag.d.ts +14 -0
  37. package/cjs/components/Tag.js +52 -0
  38. package/cjs/components/accordion/Accordion.d.ts +7 -7
  39. package/cjs/components/autocomplete/Autocomplete.d.ts +13 -13
  40. package/cjs/components/autocomplete/style/dnb-autocomplete.css +0 -2
  41. package/cjs/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  42. package/cjs/components/breadcrumb/Breadcrumb.js +5 -3
  43. package/cjs/components/breadcrumb/style/_breadcrumb.scss +7 -4
  44. package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  45. package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  46. package/cjs/components/button/Button.d.ts +7 -7
  47. package/cjs/components/button/Button.js +7 -5
  48. package/cjs/components/button/style/_button.scss +0 -4
  49. package/cjs/components/button/style/dnb-button.css +0 -2
  50. package/cjs/components/button/style/dnb-button.min.css +1 -1
  51. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  52. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  53. package/cjs/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  54. package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  55. package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  56. package/cjs/components/checkbox/Checkbox.d.ts +3 -3
  57. package/cjs/components/date-picker/DatePicker.d.ts +14 -14
  58. package/cjs/components/date-picker/DatePickerAddon.d.ts +1 -1
  59. package/cjs/components/date-picker/DatePickerCalendar.d.ts +1 -1
  60. package/cjs/components/date-picker/DatePickerInput.d.ts +1 -1
  61. package/cjs/components/date-picker/style/dnb-date-picker.css +0 -6
  62. package/cjs/components/date-picker/style/dnb-date-picker.min.css +1 -1
  63. package/cjs/components/dropdown/Dropdown.d.ts +9 -9
  64. package/cjs/components/dropdown/style/dnb-dropdown.css +0 -2
  65. package/cjs/components/dropdown/style/dnb-dropdown.min.css +1 -1
  66. package/cjs/components/form-row/FormRow.d.ts +4 -4
  67. package/cjs/components/form-set/FormSet.d.ts +6 -6
  68. package/cjs/components/global-error/GlobalError.d.ts +1 -1
  69. package/cjs/components/global-error/style/dnb-global-error.css +0 -2
  70. package/cjs/components/global-error/style/dnb-global-error.min.css +1 -1
  71. package/cjs/components/global-status/GlobalStatus.d.ts +5 -5
  72. package/cjs/components/global-status/GlobalStatus.js +21 -73
  73. package/cjs/components/global-status/style/_global-status.scss +14 -12
  74. package/cjs/components/global-status/style/dnb-global-status.css +13 -17
  75. package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
  76. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  77. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  78. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  79. package/cjs/components/heading/Heading.d.ts +2 -2
  80. package/cjs/components/heading/HeadingProvider.d.ts +2 -2
  81. package/cjs/components/help-button/HelpButton.d.ts +200 -0
  82. package/cjs/components/icon/Icon.d.ts +1 -1
  83. package/cjs/components/icon-primary/IconPrimary.d.ts +1 -1
  84. package/cjs/components/index.d.ts +2 -0
  85. package/cjs/components/index.js +8 -0
  86. package/cjs/components/input/Input.d.ts +9 -9
  87. package/cjs/components/input/style/dnb-input.css +0 -2
  88. package/cjs/components/input/style/dnb-input.min.css +1 -1
  89. package/cjs/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  90. package/cjs/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  91. package/cjs/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  92. package/cjs/components/input-masked/InputMasked.d.ts +11 -11
  93. package/cjs/components/input-masked/InputMasked.js +6 -3
  94. package/cjs/components/input-masked/InputMaskedElement.js +1 -4
  95. package/cjs/components/input-masked/InputMaskedHooks.js +68 -54
  96. package/cjs/components/input-masked/InputMaskedUtils.js +17 -22
  97. package/cjs/components/input-masked/style/dnb-input-masked.css +0 -2
  98. package/cjs/components/input-masked/style/dnb-input-masked.min.css +1 -1
  99. package/cjs/components/lib.js +9 -0
  100. package/cjs/components/modal/Modal.js +158 -300
  101. package/cjs/components/modal/ModalContent.js +183 -272
  102. package/cjs/components/modal/ModalRoot.js +194 -0
  103. package/cjs/components/modal/components/CloseButton.js +125 -0
  104. package/cjs/components/modal/components/ModalHeader.js +124 -0
  105. package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js} +50 -162
  106. package/cjs/components/modal/{ModalInner.js → components/ModalInner.js} +11 -19
  107. package/cjs/components/modal/helpers.js +80 -0
  108. package/cjs/components/modal/style/_modal-mixins.scss +4 -4
  109. package/cjs/components/modal/style/_modal.scss +13 -30
  110. package/cjs/components/modal/style/dnb-modal.css +27 -47
  111. package/cjs/components/modal/style/dnb-modal.min.css +1 -1
  112. package/cjs/components/modal/types.js +1 -0
  113. package/cjs/components/number-format/NumberFormat.d.ts +8 -8
  114. package/cjs/components/pagination/Pagination.d.ts +30 -30
  115. package/cjs/components/pagination/PaginationProvider.d.ts +2 -2
  116. package/cjs/components/pagination/style/dnb-pagination.css +0 -2
  117. package/cjs/components/pagination/style/dnb-pagination.min.css +1 -1
  118. package/cjs/components/radio/Radio.d.ts +4 -4
  119. package/cjs/components/radio/RadioGroup.d.ts +3 -3
  120. package/cjs/components/section/Section.d.ts +3 -2
  121. package/cjs/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  122. package/cjs/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  123. package/cjs/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  124. package/cjs/components/skeleton/Skeleton.d.ts +2 -2
  125. package/cjs/components/slider/Slider.d.ts +4 -4
  126. package/cjs/components/slider/style/dnb-slider.css +0 -2
  127. package/cjs/components/slider/style/dnb-slider.min.css +1 -1
  128. package/cjs/components/step-indicator/StepIndicator.d.ts +6 -6
  129. package/cjs/components/step-indicator/StepIndicator.js +4 -98
  130. package/cjs/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  131. package/cjs/components/step-indicator/StepIndicatorContext.js +221 -19
  132. package/cjs/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  133. package/cjs/components/step-indicator/StepIndicatorItem.js +4 -6
  134. package/cjs/components/step-indicator/StepIndicatorModal.js +40 -49
  135. package/cjs/components/step-indicator/StepIndicatorProps.js +1 -1
  136. package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  137. package/cjs/components/step-indicator/StepIndicatorSidebar.js +57 -54
  138. package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  139. package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  140. package/cjs/components/step-indicator/style/_step-indicator.scss +17 -4
  141. package/cjs/components/step-indicator/style/dnb-step-indicator.css +14 -6
  142. package/cjs/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  143. package/cjs/components/switch/Switch.d.ts +5 -5
  144. package/cjs/components/tabs/Tabs.d.ts +4 -4
  145. package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
  146. package/cjs/components/tag/Tag.js +97 -0
  147. package/cjs/components/tag/index.d.ts +8 -0
  148. package/cjs/components/tag/index.js +52 -0
  149. package/cjs/components/tag/style/_tag.scss +26 -0
  150. package/cjs/components/tag/style/dnb-tag.css +109 -0
  151. package/cjs/components/tag/style/dnb-tag.min.css +1 -0
  152. package/cjs/components/tag/style/dnb-tag.scss +12 -0
  153. package/cjs/components/tag/style/index.d.ts +6 -0
  154. package/cjs/components/tag/style/index.js +3 -0
  155. package/cjs/components/tag/style.js +3 -0
  156. package/cjs/components/textarea/Textarea.d.ts +4 -4
  157. package/cjs/components/textarea/style/_textarea.scss +4 -0
  158. package/cjs/components/textarea/style/dnb-textarea.css +3 -0
  159. package/cjs/components/textarea/style/dnb-textarea.min.css +1 -1
  160. package/cjs/components/toggle-button/ToggleButton.d.ts +6 -6
  161. package/cjs/components/toggle-button/ToggleButton.js +6 -2
  162. package/cjs/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  163. package/cjs/components/toggle-button/style/dnb-toggle-button.css +0 -2
  164. package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  165. package/cjs/components/tooltip/Tooltip.d.ts +5 -5
  166. package/cjs/components/tooltip/TooltipContainer.d.ts +3 -3
  167. package/cjs/components/tooltip/TooltipPortal.d.ts +1 -1
  168. package/cjs/components/tooltip/TooltipWithEvents.d.ts +1 -1
  169. package/cjs/fragments/scroll-view/ScrollView.js +7 -16
  170. package/cjs/icons/above_the_line.js +1 -1
  171. package/cjs/icons/facebook.js +35 -0
  172. package/cjs/icons/facebook_medium.js +35 -0
  173. package/cjs/icons/fridge.js +1 -1
  174. package/cjs/icons/icons-meta.json +24 -0
  175. package/cjs/icons/icons-pdf.lock +1 -1
  176. package/cjs/icons/icons-svg.lock +1 -1
  177. package/cjs/icons/index.d.ts +16 -0
  178. package/cjs/icons/index.js +64 -0
  179. package/cjs/icons/information_circled.js +11 -4
  180. package/cjs/icons/information_circled_medium.js +10 -4
  181. package/cjs/icons/instagram.js +47 -0
  182. package/cjs/icons/instagram_medium.js +54 -0
  183. package/cjs/icons/linkedin.js +32 -0
  184. package/cjs/icons/linkedin_medium.js +32 -0
  185. package/cjs/icons/motorcycle_medium.js +2 -2
  186. package/cjs/icons/paragraph.js +1 -1
  187. package/cjs/icons/scooter_medium.js +2 -2
  188. package/cjs/icons/secondary_icons.js +32 -0
  189. package/cjs/icons/secondary_icons_medium.js +32 -0
  190. package/cjs/icons/tag.js +41 -0
  191. package/cjs/icons/tag_medium.js +41 -0
  192. package/cjs/index.d.ts +2 -0
  193. package/cjs/index.js +8 -0
  194. package/cjs/shared/Context.js +2 -1
  195. package/cjs/shared/EventEmitter.js +6 -8
  196. package/cjs/shared/component-helper.js +108 -76
  197. package/cjs/shared/helpers.js +36 -11
  198. package/cjs/style/core/helper-classes/skip-link.scss +1 -1
  199. package/cjs/style/dnb-ui-components.css +107 -76
  200. package/cjs/style/dnb-ui-components.min.css +5 -5
  201. package/cjs/style/dnb-ui-components.scss +1 -0
  202. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  203. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  204. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  205. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  206. package/components/Tag.d.ts +14 -0
  207. package/components/Tag.js +3 -0
  208. package/components/accordion/Accordion.d.ts +7 -7
  209. package/components/autocomplete/Autocomplete.d.ts +13 -13
  210. package/components/autocomplete/style/dnb-autocomplete.css +0 -2
  211. package/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  212. package/components/breadcrumb/Breadcrumb.js +5 -3
  213. package/components/breadcrumb/Breadcrumb.tsx +9 -0
  214. package/components/breadcrumb/style/_breadcrumb.scss +7 -4
  215. package/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  216. package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  217. package/components/button/Button.d.ts +7 -7
  218. package/components/button/Button.js +7 -5
  219. package/components/button/style/_button.scss +0 -4
  220. package/components/button/style/dnb-button.css +0 -2
  221. package/components/button/style/dnb-button.min.css +1 -1
  222. package/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  223. package/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  224. package/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  225. package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  226. package/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  227. package/components/checkbox/Checkbox.d.ts +3 -3
  228. package/components/date-picker/DatePicker.d.ts +14 -14
  229. package/components/date-picker/DatePickerAddon.d.ts +1 -1
  230. package/components/date-picker/DatePickerCalendar.d.ts +1 -1
  231. package/components/date-picker/DatePickerInput.d.ts +1 -1
  232. package/components/date-picker/style/dnb-date-picker.css +0 -6
  233. package/components/date-picker/style/dnb-date-picker.min.css +1 -1
  234. package/components/dropdown/Dropdown.d.ts +9 -9
  235. package/components/dropdown/style/dnb-dropdown.css +0 -2
  236. package/components/dropdown/style/dnb-dropdown.min.css +1 -1
  237. package/components/form-row/FormRow.d.ts +4 -4
  238. package/components/form-set/FormSet.d.ts +6 -6
  239. package/components/global-error/GlobalError.d.ts +1 -1
  240. package/components/global-error/style/dnb-global-error.css +0 -2
  241. package/components/global-error/style/dnb-global-error.min.css +1 -1
  242. package/components/global-status/GlobalStatus.d.ts +5 -5
  243. package/components/global-status/GlobalStatus.js +18 -71
  244. package/components/global-status/style/_global-status.scss +14 -12
  245. package/components/global-status/style/dnb-global-status.css +13 -17
  246. package/components/global-status/style/dnb-global-status.min.css +1 -1
  247. package/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  248. package/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  249. package/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  250. package/components/heading/Heading.d.ts +2 -2
  251. package/components/heading/HeadingProvider.d.ts +2 -2
  252. package/components/help-button/HelpButton.d.ts +200 -0
  253. package/components/icon/Icon.d.ts +1 -1
  254. package/components/index.d.ts +2 -0
  255. package/components/index.js +2 -1
  256. package/components/input/Input.d.ts +9 -9
  257. package/components/input/style/dnb-input.css +0 -2
  258. package/components/input/style/dnb-input.min.css +1 -1
  259. package/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  260. package/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  261. package/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  262. package/components/input-masked/InputMasked.d.ts +11 -11
  263. package/components/input-masked/InputMasked.js +6 -4
  264. package/components/input-masked/InputMaskedElement.js +1 -4
  265. package/components/input-masked/InputMaskedHooks.js +66 -48
  266. package/components/input-masked/InputMaskedUtils.js +18 -23
  267. package/components/input-masked/style/dnb-input-masked.css +0 -2
  268. package/components/input-masked/style/dnb-input-masked.min.css +1 -1
  269. package/components/lib.js +3 -1
  270. package/components/modal/Modal.js +147 -279
  271. package/components/modal/Modal.tsx +524 -0
  272. package/components/modal/ModalContent.js +175 -253
  273. package/components/modal/ModalContent.tsx +515 -0
  274. package/components/modal/ModalContext.tsx +10 -0
  275. package/components/modal/ModalRoot.js +145 -0
  276. package/components/modal/ModalRoot.tsx +131 -0
  277. package/components/modal/components/CloseButton.js +72 -0
  278. package/components/modal/components/CloseButton.tsx +56 -0
  279. package/components/modal/components/ModalHeader.js +70 -0
  280. package/components/modal/components/ModalHeader.tsx +79 -0
  281. package/components/modal/components/ModalHeaderBar.js +122 -0
  282. package/components/modal/components/ModalHeaderBar.tsx +118 -0
  283. package/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  284. package/components/modal/components/ModalInner.tsx +45 -0
  285. package/components/modal/helpers.js +64 -0
  286. package/components/modal/helpers.ts +63 -0
  287. package/components/modal/style/_modal-mixins.scss +4 -4
  288. package/components/modal/style/_modal.scss +13 -30
  289. package/components/modal/style/dnb-modal.css +27 -47
  290. package/components/modal/style/dnb-modal.min.css +1 -1
  291. package/components/modal/types.js +1 -0
  292. package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts} +125 -179
  293. package/components/number-format/NumberFormat.d.ts +8 -8
  294. package/components/pagination/Pagination.d.ts +30 -30
  295. package/components/pagination/PaginationProvider.d.ts +2 -2
  296. package/components/pagination/style/dnb-pagination.css +0 -2
  297. package/components/pagination/style/dnb-pagination.min.css +1 -1
  298. package/components/radio/Radio.d.ts +4 -4
  299. package/components/radio/RadioGroup.d.ts +3 -3
  300. package/components/section/Section.d.ts +3 -1
  301. package/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  302. package/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  303. package/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  304. package/components/skeleton/Skeleton.d.ts +2 -2
  305. package/components/slider/Slider.d.ts +4 -4
  306. package/components/slider/style/dnb-slider.css +0 -2
  307. package/components/slider/style/dnb-slider.min.css +1 -1
  308. package/components/step-indicator/StepIndicator.d.ts +6 -6
  309. package/components/step-indicator/StepIndicator.js +4 -91
  310. package/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  311. package/components/step-indicator/StepIndicatorContext.js +196 -18
  312. package/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  313. package/components/step-indicator/StepIndicatorItem.js +3 -5
  314. package/components/step-indicator/StepIndicatorModal.js +33 -32
  315. package/components/step-indicator/StepIndicatorProps.js +1 -1
  316. package/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  317. package/components/step-indicator/StepIndicatorSidebar.js +54 -52
  318. package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  319. package/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  320. package/components/step-indicator/style/_step-indicator.scss +17 -4
  321. package/components/step-indicator/style/dnb-step-indicator.css +14 -6
  322. package/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  323. package/components/switch/Switch.d.ts +5 -5
  324. package/components/tabs/Tabs.d.ts +4 -4
  325. package/components/tabs/TabsContentWrapper.d.ts +1 -1
  326. package/components/tag/Tag.js +63 -0
  327. package/components/tag/Tag.tsx +95 -0
  328. package/components/tag/index.d.ts +8 -0
  329. package/components/tag/index.js +3 -0
  330. package/components/tag/style/_tag.scss +26 -0
  331. package/components/tag/style/dnb-tag.css +109 -0
  332. package/components/tag/style/dnb-tag.min.css +1 -0
  333. package/components/tag/style/dnb-tag.scss +12 -0
  334. package/components/tag/style/index.d.ts +6 -0
  335. package/components/tag/style/index.js +1 -0
  336. package/components/tag/style.js +1 -0
  337. package/components/textarea/Textarea.d.ts +4 -4
  338. package/components/textarea/style/_textarea.scss +4 -0
  339. package/components/textarea/style/dnb-textarea.css +3 -0
  340. package/components/textarea/style/dnb-textarea.min.css +1 -1
  341. package/components/toggle-button/ToggleButton.d.ts +6 -6
  342. package/components/toggle-button/ToggleButton.js +6 -2
  343. package/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  344. package/components/toggle-button/style/dnb-toggle-button.css +0 -2
  345. package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  346. package/components/tooltip/Tooltip.d.ts +5 -5
  347. package/components/tooltip/TooltipContainer.d.ts +3 -3
  348. package/components/tooltip/TooltipPortal.d.ts +1 -1
  349. package/components/tooltip/TooltipWithEvents.d.ts +1 -1
  350. package/es/components/Tag.d.ts +14 -0
  351. package/es/components/Tag.js +3 -0
  352. package/es/components/accordion/Accordion.d.ts +7 -7
  353. package/es/components/autocomplete/Autocomplete.d.ts +13 -13
  354. package/es/components/autocomplete/style/dnb-autocomplete.css +0 -2
  355. package/es/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  356. package/es/components/breadcrumb/Breadcrumb.js +5 -3
  357. package/es/components/breadcrumb/Breadcrumb.tsx +9 -0
  358. package/es/components/breadcrumb/style/_breadcrumb.scss +7 -4
  359. package/es/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  360. package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  361. package/es/components/button/Button.d.ts +7 -7
  362. package/es/components/button/Button.js +8 -5
  363. package/es/components/button/style/_button.scss +0 -4
  364. package/es/components/button/style/dnb-button.css +0 -2
  365. package/es/components/button/style/dnb-button.min.css +1 -1
  366. package/es/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  367. package/es/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  368. package/es/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  369. package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  370. package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  371. package/es/components/checkbox/Checkbox.d.ts +3 -3
  372. package/es/components/date-picker/DatePicker.d.ts +14 -14
  373. package/es/components/date-picker/DatePickerAddon.d.ts +1 -1
  374. package/es/components/date-picker/DatePickerCalendar.d.ts +1 -1
  375. package/es/components/date-picker/DatePickerInput.d.ts +1 -1
  376. package/es/components/date-picker/style/dnb-date-picker.css +0 -6
  377. package/es/components/date-picker/style/dnb-date-picker.min.css +1 -1
  378. package/es/components/dropdown/Dropdown.d.ts +9 -9
  379. package/es/components/dropdown/style/dnb-dropdown.css +0 -2
  380. package/es/components/dropdown/style/dnb-dropdown.min.css +1 -1
  381. package/es/components/form-row/FormRow.d.ts +4 -4
  382. package/es/components/form-set/FormSet.d.ts +6 -6
  383. package/es/components/global-error/GlobalError.d.ts +1 -1
  384. package/es/components/global-error/style/dnb-global-error.css +0 -2
  385. package/es/components/global-error/style/dnb-global-error.min.css +1 -1
  386. package/es/components/global-status/GlobalStatus.d.ts +5 -5
  387. package/es/components/global-status/GlobalStatus.js +18 -67
  388. package/es/components/global-status/style/_global-status.scss +14 -12
  389. package/es/components/global-status/style/dnb-global-status.css +13 -17
  390. package/es/components/global-status/style/dnb-global-status.min.css +1 -1
  391. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  392. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  393. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  394. package/es/components/heading/Heading.d.ts +2 -2
  395. package/es/components/heading/HeadingProvider.d.ts +2 -2
  396. package/es/components/help-button/HelpButton.d.ts +200 -0
  397. package/es/components/icon/Icon.d.ts +1 -1
  398. package/es/components/icon-primary/IconPrimary.d.ts +1 -1
  399. package/es/components/index.d.ts +2 -0
  400. package/es/components/index.js +2 -1
  401. package/es/components/input/Input.d.ts +9 -9
  402. package/es/components/input/style/dnb-input.css +0 -2
  403. package/es/components/input/style/dnb-input.min.css +1 -1
  404. package/es/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  405. package/es/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  406. package/es/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  407. package/es/components/input-masked/InputMasked.d.ts +11 -11
  408. package/es/components/input-masked/InputMasked.js +6 -4
  409. package/es/components/input-masked/InputMaskedElement.js +1 -4
  410. package/es/components/input-masked/InputMaskedHooks.js +50 -34
  411. package/es/components/input-masked/InputMaskedUtils.js +16 -21
  412. package/es/components/input-masked/style/dnb-input-masked.css +0 -2
  413. package/es/components/input-masked/style/dnb-input-masked.min.css +1 -1
  414. package/es/components/lib.js +3 -1
  415. package/es/components/modal/Modal.js +128 -252
  416. package/es/components/modal/Modal.tsx +524 -0
  417. package/es/components/modal/ModalContent.js +131 -211
  418. package/es/components/modal/ModalContent.tsx +515 -0
  419. package/es/components/modal/ModalContext.tsx +10 -0
  420. package/es/components/modal/ModalRoot.js +108 -0
  421. package/es/components/modal/ModalRoot.tsx +131 -0
  422. package/es/components/modal/components/CloseButton.js +41 -0
  423. package/es/components/modal/components/CloseButton.tsx +56 -0
  424. package/es/components/modal/components/ModalHeader.js +40 -0
  425. package/es/components/modal/components/ModalHeader.tsx +79 -0
  426. package/es/components/modal/components/ModalHeaderBar.js +88 -0
  427. package/es/components/modal/components/ModalHeaderBar.tsx +118 -0
  428. package/es/components/modal/{ModalInner.js → components/ModalInner.js} +8 -18
  429. package/es/components/modal/components/ModalInner.tsx +45 -0
  430. package/es/components/modal/helpers.js +60 -0
  431. package/es/components/modal/helpers.ts +63 -0
  432. package/es/components/modal/style/_modal-mixins.scss +4 -4
  433. package/es/components/modal/style/_modal.scss +13 -30
  434. package/es/components/modal/style/dnb-modal.css +27 -47
  435. package/es/components/modal/style/dnb-modal.min.css +1 -1
  436. package/es/components/modal/types.js +1 -0
  437. package/es/components/modal/{Modal.d.ts → types.ts} +125 -179
  438. package/es/components/number-format/NumberFormat.d.ts +8 -8
  439. package/es/components/pagination/Pagination.d.ts +30 -30
  440. package/es/components/pagination/PaginationProvider.d.ts +2 -2
  441. package/es/components/pagination/style/dnb-pagination.css +0 -2
  442. package/es/components/pagination/style/dnb-pagination.min.css +1 -1
  443. package/es/components/radio/Radio.d.ts +4 -4
  444. package/es/components/radio/RadioGroup.d.ts +3 -3
  445. package/es/components/section/Section.d.ts +3 -2
  446. package/es/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  447. package/es/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  448. package/es/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  449. package/es/components/skeleton/Skeleton.d.ts +2 -2
  450. package/es/components/slider/Slider.d.ts +4 -4
  451. package/es/components/slider/style/dnb-slider.css +0 -2
  452. package/es/components/slider/style/dnb-slider.min.css +1 -1
  453. package/es/components/step-indicator/StepIndicator.d.ts +6 -6
  454. package/es/components/step-indicator/StepIndicator.js +3 -79
  455. package/es/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  456. package/es/components/step-indicator/StepIndicatorContext.js +165 -17
  457. package/es/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  458. package/es/components/step-indicator/StepIndicatorItem.js +2 -5
  459. package/es/components/step-indicator/StepIndicatorModal.js +31 -34
  460. package/es/components/step-indicator/StepIndicatorProps.js +1 -1
  461. package/es/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  462. package/es/components/step-indicator/StepIndicatorSidebar.js +44 -46
  463. package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  464. package/es/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  465. package/es/components/step-indicator/style/_step-indicator.scss +17 -4
  466. package/es/components/step-indicator/style/dnb-step-indicator.css +14 -6
  467. package/es/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  468. package/es/components/switch/Switch.d.ts +5 -5
  469. package/es/components/tabs/Tabs.d.ts +4 -4
  470. package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
  471. package/es/components/tag/Tag.js +58 -0
  472. package/es/components/tag/Tag.tsx +95 -0
  473. package/es/components/tag/index.d.ts +8 -0
  474. package/es/components/tag/index.js +3 -0
  475. package/es/components/tag/style/_tag.scss +26 -0
  476. package/es/components/tag/style/dnb-tag.css +109 -0
  477. package/es/components/tag/style/dnb-tag.min.css +1 -0
  478. package/es/components/tag/style/dnb-tag.scss +12 -0
  479. package/es/components/tag/style/index.d.ts +6 -0
  480. package/es/components/tag/style/index.js +1 -0
  481. package/es/components/tag/style.js +1 -0
  482. package/es/components/textarea/Textarea.d.ts +4 -4
  483. package/es/components/textarea/style/_textarea.scss +4 -0
  484. package/es/components/textarea/style/dnb-textarea.css +3 -0
  485. package/es/components/textarea/style/dnb-textarea.min.css +1 -1
  486. package/es/components/toggle-button/ToggleButton.d.ts +6 -6
  487. package/es/components/toggle-button/ToggleButton.js +6 -2
  488. package/es/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  489. package/es/components/toggle-button/style/dnb-toggle-button.css +0 -2
  490. package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  491. package/es/components/tooltip/Tooltip.d.ts +5 -5
  492. package/es/components/tooltip/TooltipContainer.d.ts +3 -3
  493. package/es/components/tooltip/TooltipPortal.d.ts +1 -1
  494. package/es/components/tooltip/TooltipWithEvents.d.ts +1 -1
  495. package/es/fragments/scroll-view/ScrollView.js +7 -15
  496. package/es/fragments/scroll-view/ScrollView.tsx +92 -0
  497. package/es/icons/above_the_line.js +1 -1
  498. package/es/icons/facebook.js +23 -0
  499. package/es/icons/facebook_medium.js +23 -0
  500. package/es/icons/fridge.js +1 -1
  501. package/es/icons/icons-meta.json +24 -0
  502. package/es/icons/icons-pdf.lock +1 -1
  503. package/es/icons/icons-svg.lock +1 -1
  504. package/es/icons/index.d.ts +16 -0
  505. package/es/icons/index.js +9 -1
  506. package/es/icons/information_circled.js +11 -4
  507. package/es/icons/information_circled_medium.js +10 -4
  508. package/es/icons/instagram.js +35 -0
  509. package/es/icons/instagram_medium.js +42 -0
  510. package/es/icons/linkedin.js +20 -0
  511. package/es/icons/linkedin_medium.js +20 -0
  512. package/es/icons/motorcycle_medium.js +2 -2
  513. package/es/icons/paragraph.js +1 -1
  514. package/es/icons/scooter_medium.js +2 -2
  515. package/es/icons/secondary_icons.js +5 -1
  516. package/es/icons/secondary_icons_medium.js +5 -1
  517. package/es/icons/tag.js +29 -0
  518. package/es/icons/tag_medium.js +29 -0
  519. package/es/index.d.ts +2 -0
  520. package/es/index.js +2 -1
  521. package/es/shared/Context.js +2 -1
  522. package/es/shared/EventEmitter.js +5 -8
  523. package/es/shared/component-helper.js +58 -50
  524. package/es/shared/helpers.js +11 -2
  525. package/es/style/core/helper-classes/skip-link.scss +1 -1
  526. package/es/style/dnb-ui-components.css +107 -76
  527. package/es/style/dnb-ui-components.min.css +5 -5
  528. package/es/style/dnb-ui-components.scss +1 -0
  529. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  530. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  531. package/es/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  532. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  533. package/esm/components/Tag.d.ts +14 -0
  534. package/esm/components/Tag.js +3 -0
  535. package/esm/components/accordion/Accordion.d.ts +7 -7
  536. package/esm/components/autocomplete/Autocomplete.d.ts +13 -13
  537. package/esm/components/autocomplete/style/dnb-autocomplete.css +0 -2
  538. package/esm/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  539. package/esm/components/breadcrumb/Breadcrumb.js +5 -3
  540. package/esm/components/breadcrumb/Breadcrumb.tsx +9 -0
  541. package/esm/components/breadcrumb/style/_breadcrumb.scss +7 -4
  542. package/esm/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  543. package/esm/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  544. package/esm/components/button/Button.d.ts +7 -7
  545. package/esm/components/button/Button.js +7 -5
  546. package/esm/components/button/style/_button.scss +0 -4
  547. package/esm/components/button/style/dnb-button.css +0 -2
  548. package/esm/components/button/style/dnb-button.min.css +1 -1
  549. package/esm/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  550. package/esm/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  551. package/esm/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  552. package/esm/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  553. package/esm/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  554. package/esm/components/checkbox/Checkbox.d.ts +3 -3
  555. package/esm/components/date-picker/DatePicker.d.ts +14 -14
  556. package/esm/components/date-picker/DatePickerAddon.d.ts +1 -1
  557. package/esm/components/date-picker/DatePickerCalendar.d.ts +1 -1
  558. package/esm/components/date-picker/DatePickerInput.d.ts +1 -1
  559. package/esm/components/date-picker/style/dnb-date-picker.css +0 -6
  560. package/esm/components/date-picker/style/dnb-date-picker.min.css +1 -1
  561. package/esm/components/dropdown/Dropdown.d.ts +9 -9
  562. package/esm/components/dropdown/style/dnb-dropdown.css +0 -2
  563. package/esm/components/dropdown/style/dnb-dropdown.min.css +1 -1
  564. package/esm/components/form-row/FormRow.d.ts +4 -4
  565. package/esm/components/form-set/FormSet.d.ts +6 -6
  566. package/esm/components/global-error/GlobalError.d.ts +1 -1
  567. package/esm/components/global-error/style/dnb-global-error.css +0 -2
  568. package/esm/components/global-error/style/dnb-global-error.min.css +1 -1
  569. package/esm/components/global-status/GlobalStatus.d.ts +5 -5
  570. package/esm/components/global-status/GlobalStatus.js +18 -71
  571. package/esm/components/global-status/style/_global-status.scss +14 -12
  572. package/esm/components/global-status/style/dnb-global-status.css +13 -17
  573. package/esm/components/global-status/style/dnb-global-status.min.css +1 -1
  574. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  575. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  576. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  577. package/esm/components/heading/Heading.d.ts +2 -2
  578. package/esm/components/heading/HeadingProvider.d.ts +2 -2
  579. package/esm/components/help-button/HelpButton.d.ts +200 -0
  580. package/esm/components/icon/Icon.d.ts +1 -1
  581. package/esm/components/index.d.ts +2 -0
  582. package/esm/components/index.js +2 -1
  583. package/esm/components/input/Input.d.ts +9 -9
  584. package/esm/components/input/style/dnb-input.css +0 -2
  585. package/esm/components/input/style/dnb-input.min.css +1 -1
  586. package/esm/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  587. package/esm/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  588. package/esm/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  589. package/esm/components/input-masked/InputMasked.d.ts +11 -11
  590. package/esm/components/input-masked/InputMasked.js +6 -4
  591. package/esm/components/input-masked/InputMaskedElement.js +1 -4
  592. package/esm/components/input-masked/InputMaskedHooks.js +66 -48
  593. package/esm/components/input-masked/InputMaskedUtils.js +18 -23
  594. package/esm/components/input-masked/style/dnb-input-masked.css +0 -2
  595. package/esm/components/input-masked/style/dnb-input-masked.min.css +1 -1
  596. package/esm/components/lib.js +3 -1
  597. package/esm/components/modal/Modal.js +147 -279
  598. package/esm/components/modal/Modal.tsx +524 -0
  599. package/esm/components/modal/ModalContent.js +175 -253
  600. package/esm/components/modal/ModalContent.tsx +515 -0
  601. package/esm/components/modal/ModalContext.tsx +10 -0
  602. package/esm/components/modal/ModalRoot.js +145 -0
  603. package/esm/components/modal/ModalRoot.tsx +131 -0
  604. package/esm/components/modal/components/CloseButton.js +72 -0
  605. package/esm/components/modal/components/CloseButton.tsx +56 -0
  606. package/esm/components/modal/components/ModalHeader.js +70 -0
  607. package/esm/components/modal/components/ModalHeader.tsx +79 -0
  608. package/esm/components/modal/components/ModalHeaderBar.js +122 -0
  609. package/esm/components/modal/components/ModalHeaderBar.tsx +118 -0
  610. package/esm/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  611. package/esm/components/modal/components/ModalInner.tsx +45 -0
  612. package/esm/components/modal/helpers.js +64 -0
  613. package/esm/components/modal/helpers.ts +63 -0
  614. package/esm/components/modal/style/_modal-mixins.scss +4 -4
  615. package/esm/components/modal/style/_modal.scss +13 -30
  616. package/esm/components/modal/style/dnb-modal.css +27 -47
  617. package/esm/components/modal/style/dnb-modal.min.css +1 -1
  618. package/esm/components/modal/types.js +1 -0
  619. package/esm/components/modal/{Modal.d.ts → types.ts} +125 -179
  620. package/esm/components/number-format/NumberFormat.d.ts +8 -8
  621. package/esm/components/pagination/Pagination.d.ts +30 -30
  622. package/esm/components/pagination/PaginationProvider.d.ts +2 -2
  623. package/esm/components/pagination/style/dnb-pagination.css +0 -2
  624. package/esm/components/pagination/style/dnb-pagination.min.css +1 -1
  625. package/esm/components/radio/Radio.d.ts +4 -4
  626. package/esm/components/radio/RadioGroup.d.ts +3 -3
  627. package/esm/components/section/Section.d.ts +3 -1
  628. package/esm/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  629. package/esm/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  630. package/esm/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  631. package/esm/components/skeleton/Skeleton.d.ts +2 -2
  632. package/esm/components/slider/Slider.d.ts +4 -4
  633. package/esm/components/slider/style/dnb-slider.css +0 -2
  634. package/esm/components/slider/style/dnb-slider.min.css +1 -1
  635. package/esm/components/step-indicator/StepIndicator.d.ts +6 -6
  636. package/esm/components/step-indicator/StepIndicator.js +4 -91
  637. package/esm/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  638. package/esm/components/step-indicator/StepIndicatorContext.js +196 -18
  639. package/esm/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  640. package/esm/components/step-indicator/StepIndicatorItem.js +3 -5
  641. package/esm/components/step-indicator/StepIndicatorModal.js +33 -32
  642. package/esm/components/step-indicator/StepIndicatorProps.js +1 -1
  643. package/esm/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  644. package/esm/components/step-indicator/StepIndicatorSidebar.js +54 -52
  645. package/esm/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  646. package/esm/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  647. package/esm/components/step-indicator/style/_step-indicator.scss +17 -4
  648. package/esm/components/step-indicator/style/dnb-step-indicator.css +14 -6
  649. package/esm/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  650. package/esm/components/switch/Switch.d.ts +5 -5
  651. package/esm/components/tabs/Tabs.d.ts +4 -4
  652. package/esm/components/tabs/TabsContentWrapper.d.ts +1 -1
  653. package/esm/components/tag/Tag.js +63 -0
  654. package/esm/components/tag/Tag.tsx +95 -0
  655. package/esm/components/tag/index.d.ts +8 -0
  656. package/esm/components/tag/index.js +3 -0
  657. package/esm/components/tag/style/_tag.scss +26 -0
  658. package/esm/components/tag/style/dnb-tag.css +109 -0
  659. package/esm/components/tag/style/dnb-tag.min.css +1 -0
  660. package/esm/components/tag/style/dnb-tag.scss +12 -0
  661. package/esm/components/tag/style/index.d.ts +6 -0
  662. package/esm/components/tag/style/index.js +1 -0
  663. package/esm/components/tag/style.js +1 -0
  664. package/esm/components/textarea/Textarea.d.ts +4 -4
  665. package/esm/components/textarea/style/_textarea.scss +4 -0
  666. package/esm/components/textarea/style/dnb-textarea.css +3 -0
  667. package/esm/components/textarea/style/dnb-textarea.min.css +1 -1
  668. package/esm/components/toggle-button/ToggleButton.d.ts +6 -6
  669. package/esm/components/toggle-button/ToggleButton.js +6 -2
  670. package/esm/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  671. package/esm/components/toggle-button/style/dnb-toggle-button.css +0 -2
  672. package/esm/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  673. package/esm/components/tooltip/Tooltip.d.ts +5 -5
  674. package/esm/components/tooltip/TooltipContainer.d.ts +3 -3
  675. package/esm/components/tooltip/TooltipPortal.d.ts +1 -1
  676. package/esm/components/tooltip/TooltipWithEvents.d.ts +1 -1
  677. package/esm/dnb-ui-basis.min.mjs +2 -2
  678. package/esm/dnb-ui-components.min.mjs +3 -3
  679. package/esm/dnb-ui-elements.min.mjs +4 -4
  680. package/esm/dnb-ui-extensions.min.mjs +4 -4
  681. package/esm/dnb-ui-lib.min.mjs +4 -4
  682. package/esm/dnb-ui-web-components.min.mjs +4 -4
  683. package/esm/fragments/scroll-view/ScrollView.js +10 -16
  684. package/esm/fragments/scroll-view/ScrollView.tsx +92 -0
  685. package/esm/icons/above_the_line.js +1 -1
  686. package/esm/icons/facebook.js +23 -0
  687. package/esm/icons/facebook_medium.js +23 -0
  688. package/esm/icons/fridge.js +1 -1
  689. package/esm/icons/icons-meta.json +24 -0
  690. package/esm/icons/icons-pdf.lock +1 -1
  691. package/esm/icons/icons-svg.lock +1 -1
  692. package/esm/icons/index.d.ts +16 -0
  693. package/esm/icons/index.js +9 -1
  694. package/esm/icons/information_circled.js +11 -4
  695. package/esm/icons/information_circled_medium.js +10 -4
  696. package/esm/icons/instagram.js +35 -0
  697. package/esm/icons/instagram_medium.js +42 -0
  698. package/esm/icons/linkedin.js +20 -0
  699. package/esm/icons/linkedin_medium.js +20 -0
  700. package/esm/icons/motorcycle_medium.js +2 -2
  701. package/esm/icons/paragraph.js +1 -1
  702. package/esm/icons/scooter_medium.js +2 -2
  703. package/esm/icons/secondary_icons.js +5 -1
  704. package/esm/icons/secondary_icons_medium.js +5 -1
  705. package/esm/icons/tag.js +29 -0
  706. package/esm/icons/tag_medium.js +29 -0
  707. package/esm/index.d.ts +2 -0
  708. package/esm/index.js +2 -1
  709. package/esm/shared/Context.js +2 -1
  710. package/esm/shared/EventEmitter.js +6 -8
  711. package/esm/shared/component-helper.js +94 -59
  712. package/esm/shared/helpers.js +19 -2
  713. package/esm/style/core/helper-classes/skip-link.scss +1 -1
  714. package/esm/style/dnb-ui-components.css +107 -76
  715. package/esm/style/dnb-ui-components.min.css +5 -5
  716. package/esm/style/dnb-ui-components.scss +1 -0
  717. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  718. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  719. package/esm/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  720. package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  721. package/fragments/scroll-view/ScrollView.js +10 -16
  722. package/fragments/scroll-view/ScrollView.tsx +92 -0
  723. package/icons/above_the_line.js +1 -1
  724. package/icons/facebook.js +23 -0
  725. package/icons/facebook_medium.js +23 -0
  726. package/icons/fridge.js +1 -1
  727. package/icons/icons-meta.json +24 -0
  728. package/icons/icons-pdf.lock +1 -1
  729. package/icons/icons-svg.lock +1 -1
  730. package/icons/index.d.ts +16 -0
  731. package/icons/index.js +9 -1
  732. package/icons/information_circled.js +11 -4
  733. package/icons/information_circled_medium.js +10 -4
  734. package/icons/instagram.js +35 -0
  735. package/icons/instagram_medium.js +42 -0
  736. package/icons/linkedin.js +20 -0
  737. package/icons/linkedin_medium.js +20 -0
  738. package/icons/motorcycle_medium.js +2 -2
  739. package/icons/paragraph.js +1 -1
  740. package/icons/scooter_medium.js +2 -2
  741. package/icons/secondary_icons.js +5 -1
  742. package/icons/secondary_icons_medium.js +5 -1
  743. package/icons/tag.js +29 -0
  744. package/icons/tag_medium.js +29 -0
  745. package/index.d.ts +2 -0
  746. package/index.js +2 -1
  747. package/package.json +1 -1
  748. package/shared/Context.js +2 -1
  749. package/shared/EventEmitter.js +6 -8
  750. package/shared/component-helper.js +94 -59
  751. package/shared/helpers.js +19 -2
  752. package/style/core/helper-classes/skip-link.scss +1 -1
  753. package/style/dnb-ui-components.css +107 -76
  754. package/style/dnb-ui-components.min.css +5 -5
  755. package/style/dnb-ui-components.scss +1 -0
  756. package/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  757. package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  758. package/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  759. package/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  760. package/umd/dnb-ui-basis.min.js +3 -3
  761. package/umd/dnb-ui-components.min.js +4 -4
  762. package/umd/dnb-ui-elements.min.js +5 -5
  763. package/umd/dnb-ui-extensions.min.js +5 -5
  764. package/umd/dnb-ui-lib.min.js +5 -5
  765. package/umd/dnb-ui-web-components.min.js +5 -5
  766. package/cjs/components/modal/ModalContent.d.ts +0 -168
  767. package/cjs/components/modal/ModalHeader.d.ts +0 -73
  768. package/cjs/components/modal/ModalInner.d.ts +0 -20
  769. package/cjs/fragments/scroll-view/ScrollView.d.ts +0 -1
  770. package/components/modal/Modal.d.ts +0 -325
  771. package/components/modal/ModalContent.d.ts +0 -168
  772. package/components/modal/ModalHeader.d.ts +0 -73
  773. package/components/modal/ModalHeader.js +0 -224
  774. package/components/modal/ModalInner.d.ts +0 -20
  775. package/es/components/modal/ModalContent.d.ts +0 -168
  776. package/es/components/modal/ModalHeader.d.ts +0 -73
  777. package/es/components/modal/ModalHeader.js +0 -166
  778. package/es/components/modal/ModalInner.d.ts +0 -20
  779. package/es/fragments/scroll-view/ScrollView.d.ts +0 -1
  780. package/esm/components/modal/ModalContent.d.ts +0 -168
  781. package/esm/components/modal/ModalHeader.d.ts +0 -73
  782. package/esm/components/modal/ModalHeader.js +0 -224
  783. package/esm/components/modal/ModalInner.d.ts +0 -20
  784. package/esm/fragments/scroll-view/ScrollView.d.ts +0 -1
  785. package/fragments/scroll-view/ScrollView.d.ts +0 -1
@@ -13,16 +13,15 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
13
13
  import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
14
14
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
15
15
  var _excluded = ["triggeredBy"],
16
- _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
16
+ _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "children"];
17
17
 
18
18
  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; }
19
19
 
20
20
  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; }
21
21
 
22
+ import "core-js/modules/es.array.filter.js";
22
23
  import "core-js/modules/es.object.to-string.js";
23
24
  import "core-js/modules/web.dom-collections.for-each.js";
24
- import "core-js/modules/es.regexp.exec.js";
25
- import "core-js/modules/es.array.filter.js";
26
25
  import "core-js/modules/es.parse-float.js";
27
26
 
28
27
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -30,15 +29,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
30
29
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
31
30
 
32
31
  import React from 'react';
33
- import PropTypes from 'prop-types';
34
32
  import classnames from 'classnames';
35
33
  import keycode from 'keycode';
36
34
  import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from './bodyScrollLock';
37
35
  import { warn, isTrue, makeUniqueId, InteractionInvalidation, findElementInChildren, combineLabelledBy, combineDescribedBy, validateDOMAttributes, dispatchCustomElementEvent } from '../../shared/component-helper';
38
36
  import ScrollView from '../../fragments/scroll-view/ScrollView';
39
37
  import ModalContext from './ModalContext';
40
- import ModalHeader, { ModalHeaderBar } from './ModalHeader';
41
- import { IS_IOS, IS_SAFARI, IS_MAC } from '../../shared/helpers';
38
+ import ModalHeader from './components/ModalHeader';
39
+ import ModalHeaderBar from './components/ModalHeaderBar';
40
+ import { IS_IOS, IS_SAFARI, IS_MAC, isAndroid } from '../../shared/helpers';
41
+ import { getListOfModalRoots, getModalRoot, addToIndex, removeFromIndex } from './helpers';
42
42
 
43
43
  var ModalContent = function (_React$PureComponent) {
44
44
  _inherits(ModalContent, _React$PureComponent);
@@ -54,10 +54,53 @@ var ModalContent = function (_React$PureComponent) {
54
54
 
55
55
  _defineProperty(_assertThisInitialized(_this), "state", {
56
56
  triggeredBy: null,
57
- triggeredByEvent: null
57
+ triggeredByEvent: null,
58
+ color: null
59
+ });
60
+
61
+ _defineProperty(_assertThisInitialized(_this), "_contentRef", void 0);
62
+
63
+ _defineProperty(_assertThisInitialized(_this), "_id", void 0);
64
+
65
+ _defineProperty(_assertThisInitialized(_this), "_lockTimeout", void 0);
66
+
67
+ _defineProperty(_assertThisInitialized(_this), "_focusTimeout", void 0);
68
+
69
+ _defineProperty(_assertThisInitialized(_this), "_androidFocusTimeout", void 0);
70
+
71
+ _defineProperty(_assertThisInitialized(_this), "_ii", void 0);
72
+
73
+ _defineProperty(_assertThisInitialized(_this), "_iiLocal", void 0);
74
+
75
+ _defineProperty(_assertThisInitialized(_this), "lockBody", function () {
76
+ var modalRoots = getListOfModalRoots();
77
+ var firstLevel = modalRoots[0];
78
+
79
+ if (firstLevel === _assertThisInitialized(_this)) {
80
+ _this._ii = new InteractionInvalidation();
81
+
82
+ _this._ii.setBypassSelector(['.dnb-modal__content *', "#dnb-modal-".concat(_this.props.root_id || 'root', " *")].filter(Boolean));
83
+
84
+ _this._ii.activate();
85
+ } else {
86
+ modalRoots.forEach(function (modal) {
87
+ if (modal !== _assertThisInitialized(_this) && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
88
+ modal._iiLocal = new InteractionInvalidation();
89
+
90
+ modal._iiLocal.activate(modal._contentRef.current);
91
+ }
92
+ });
93
+ }
94
+
95
+ if (typeof document !== 'undefined') {
96
+ document.addEventListener('keydown', _this.onKeyDownHandler);
97
+ }
58
98
  });
59
99
 
60
100
  _defineProperty(_assertThisInitialized(_this), "_androidFocusHelper", function () {
101
+ var _this$props$animation = _this.props.animation_duration,
102
+ animation_duration = _this$props$animation === void 0 ? null : _this$props$animation;
103
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
61
104
  clearTimeout(_this._androidFocusTimeout);
62
105
  _this._androidFocusTimeout = setTimeout(function () {
63
106
  try {
@@ -67,38 +110,38 @@ var ModalContent = function (_React$PureComponent) {
67
110
  document.activeElement.scrollIntoView();
68
111
  }
69
112
  } catch (e) {}
70
- }, 100);
113
+ }, timeoutDuration / 2);
71
114
  });
72
115
 
73
- _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
74
- if (e) {
75
- e.stopPropagation();
116
+ _defineProperty(_assertThisInitialized(_this), "preventClick", function (event) {
117
+ if (event) {
118
+ event.stopPropagation();
76
119
  }
77
120
  });
78
121
 
79
- _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (e) {
80
- _this.closeModal(e, {
122
+ _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (event) {
123
+ _this.closeModalContent(event, {
81
124
  triggeredBy: 'button'
82
125
  });
83
126
  });
84
127
 
85
- _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (e) {
86
- _this.closeModal(e, {
128
+ _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (event) {
129
+ _this.closeModalContent(event, {
87
130
  triggeredBy: 'overlay',
88
131
  ifIsLatest: false
89
132
  });
90
133
  });
91
134
 
92
- _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (e) {
93
- switch (keycode(e)) {
135
+ _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
136
+ switch (keycode(event)) {
94
137
  case 'esc':
95
138
  {
96
- var mostCurrent = getListOfModalRoots(-1);
139
+ var mostCurrent = getModalRoot(-1);
97
140
 
98
141
  if (mostCurrent === _assertThisInitialized(_this)) {
99
- e.preventDefault();
142
+ event.preventDefault();
100
143
 
101
- _this.closeModal(e, {
144
+ _this.closeModalContent(event, {
102
145
  triggeredBy: 'keyboard'
103
146
  });
104
147
  }
@@ -109,6 +152,8 @@ var ModalContent = function (_React$PureComponent) {
109
152
  });
110
153
 
111
154
  _defineProperty(_assertThisInitialized(_this), "setBackgroundColor", function (color) {
155
+ document.documentElement.style.setProperty('--modal-background-color', color);
156
+
112
157
  _this.setState({
113
158
  color: color
114
159
  });
@@ -116,57 +161,52 @@ var ModalContent = function (_React$PureComponent) {
116
161
 
117
162
  _this._contentRef = React.createRef();
118
163
  _this._id = props.id;
119
- _this._ii = new InteractionInvalidation();
120
-
121
- _this._ii.setBypassSelector(['.dnb-modal__content', "#dnb-modal-".concat(props.root_id || 'root')]);
122
-
123
164
  return _this;
124
165
  }
125
166
 
126
167
  _createClass(ModalContent, [{
127
168
  key: "componentDidMount",
128
169
  value: function componentDidMount() {
129
- var _this2 = this;
130
-
131
- this.addToIndex();
132
- var modalRoots = getListOfModalRoots();
133
- var firstLevel = modalRoots[0];
170
+ var _this$props = this.props,
171
+ _this$props$id = _this$props.id,
172
+ id = _this$props$id === void 0 ? null : _this$props$id,
173
+ _this$props$no_animat = _this$props.no_animation,
174
+ no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat,
175
+ _this$props$animation2 = _this$props.animation_duration,
176
+ animation_duration = _this$props$animation2 === void 0 ? null : _this$props$animation2;
177
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
178
+ addToIndex(this);
134
179
  this.removeScrollPossibility();
135
-
136
- if (firstLevel === this) {
137
- this._ii.activate();
138
- } else {
139
- modalRoots.forEach(function (modal) {
140
- if (modal !== _this2 && typeof modal._iiLocal === 'undefined' && typeof modal._contentRef !== 'undefined') {
141
- modal._iiLocal = new InteractionInvalidation();
142
-
143
- modal._iiLocal.activate(modal._contentRef.current);
144
- }
145
- });
146
- }
147
-
148
- this.setAndroidFocusHelper();
149
180
  this.setFocus();
150
- var id = this.props.id;
181
+ this.setAndroidFocusHelper();
151
182
  dispatchCustomElementEvent(this, 'on_open', {
152
183
  id: id
153
184
  });
154
185
 
155
- if (typeof document !== 'undefined') {
156
- document.addEventListener('keydown', this.onKeyDownHandler);
186
+ if (isTrue(no_animation) || process.env.NODE_ENV === 'test') {
187
+ this.lockBody();
188
+ } else {
189
+ this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2);
157
190
  }
158
191
  }
159
192
  }, {
160
193
  key: "componentWillUnmount",
161
194
  value: function componentWillUnmount() {
162
195
  clearTimeout(this._focusTimeout);
196
+ clearTimeout(this._lockTimeout);
197
+ this.removeLocks();
198
+ }
199
+ }, {
200
+ key: "removeLocks",
201
+ value: function removeLocks() {
163
202
  var modalRoots = getListOfModalRoots();
164
203
  var firstLevel = modalRoots[0];
165
- this.removeFromIndex();
204
+ removeFromIndex(this);
166
205
 
167
206
  if (firstLevel === this) {
168
- this._ii.revert();
207
+ var _this$_ii;
169
208
 
209
+ (_this$_ii = this._ii) === null || _this$_ii === void 0 ? void 0 : _this$_ii.revert();
170
210
  this.revertScrollPossibility();
171
211
  } else {
172
212
  try {
@@ -200,7 +240,7 @@ var ModalContent = function (_React$PureComponent) {
200
240
  }, {
201
241
  key: "setAndroidFocusHelper",
202
242
  value: function setAndroidFocusHelper() {
203
- if (typeof window !== 'undefined' && typeof navigator !== 'undefined' && /Android/.test(navigator.appVersion)) {
243
+ if (typeof window !== 'undefined' && isAndroid()) {
204
244
  window.addEventListener('resize', this._androidFocusHelper);
205
245
  }
206
246
  }
@@ -210,52 +250,18 @@ var ModalContent = function (_React$PureComponent) {
210
250
  window.removeEventListener('resize', this._androidFocusHelper);
211
251
  clearTimeout(this._androidFocusTimeout);
212
252
  }
213
- }, {
214
- key: "addToIndex",
215
- value: function addToIndex() {
216
- if (typeof window !== 'undefined') {
217
- try {
218
- if (!Array.isArray(window.__modalStack)) {
219
- window.__modalStack = [];
220
- }
221
-
222
- window.__modalStack.push(this);
223
- } catch (e) {
224
- warn(e);
225
- }
226
- }
227
- }
228
- }, {
229
- key: "removeFromIndex",
230
- value: function removeFromIndex() {
231
- var _this3 = this;
232
-
233
- if (typeof window !== 'undefined') {
234
- try {
235
- if (!Array.isArray(window.__modalStack)) {
236
- window.__modalStack = [];
237
- }
238
-
239
- window.__modalStack = window.__modalStack.filter(function (cur) {
240
- return cur !== _this3;
241
- });
242
-
243
- if (!window.__modalStack.length) {
244
- delete window.__modalStack;
245
- }
246
- } catch (e) {
247
- warn(e);
248
- }
249
- }
250
- }
251
253
  }, {
252
254
  key: "setFocus",
253
255
  value: function setFocus() {
254
- var _this$props = this.props,
255
- focus_selector = _this$props.focus_selector,
256
- no_animation = _this$props.no_animation,
257
- animation_duration = _this$props.animation_duration;
256
+ var _this$props2 = this.props,
257
+ _this$props2$focus_se = _this$props2.focus_selector,
258
+ focus_selector = _this$props2$focus_se === void 0 ? null : _this$props2$focus_se,
259
+ _this$props2$no_anima = _this$props2.no_animation,
260
+ no_animation = _this$props2$no_anima === void 0 ? null : _this$props2$no_anima,
261
+ _this$props2$animatio = _this$props2.animation_duration,
262
+ animation_duration = _this$props2$animatio === void 0 ? null : _this$props2$animatio;
258
263
  var elem = this._contentRef.current;
264
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
259
265
 
260
266
  if (elem) {
261
267
  clearTimeout(this._focusTimeout);
@@ -276,7 +282,7 @@ var ModalContent = function (_React$PureComponent) {
276
282
  } catch (e) {
277
283
  warn(e);
278
284
  }
279
- }, isTrue(no_animation) ? 0 : parseFloat(animation_duration) || 0);
285
+ }, isTrue(no_animation) ? 0 : timeoutDuration || 0);
280
286
  }
281
287
  }
282
288
  }, {
@@ -293,10 +299,10 @@ var ModalContent = function (_React$PureComponent) {
293
299
  clearAllBodyScrollLocks();
294
300
  }
295
301
  }, {
296
- key: "closeModal",
297
- value: function closeModal(event, _ref) {
302
+ key: "closeModalContent",
303
+ value: function closeModalContent(event, _ref) {
298
304
  var _event$persist,
299
- _this4 = this;
305
+ _this2 = this;
300
306
 
301
307
  var triggeredBy = _ref.triggeredBy,
302
308
  params = _objectWithoutProperties(_ref, _excluded);
@@ -306,7 +312,7 @@ var ModalContent = function (_React$PureComponent) {
306
312
  triggeredBy: triggeredBy,
307
313
  triggeredByEvent: event
308
314
  }, function () {
309
- _this4.props.closeModal(event, _objectSpread({
315
+ _this2.props.closeModal(event, _objectSpread({
310
316
  triggeredBy: triggeredBy
311
317
  }, params));
312
318
  });
@@ -314,61 +320,65 @@ var ModalContent = function (_React$PureComponent) {
314
320
  }, {
315
321
  key: "render",
316
322
  value: function render() {
317
- var _this$props2 = this.props,
318
- mode = _this$props2.mode,
319
- hide = _this$props2.hide,
320
- title = _this$props2.title,
321
- labelled_by = _this$props2.labelled_by,
322
- header_content = _this$props2.header_content,
323
- modal_content = _this$props2.modal_content,
324
- bar_content = _this$props2.bar_content,
325
- _id = _this$props2.id,
326
- close_title = _this$props2.close_title,
327
- dialog_title = _this$props2.dialog_title,
328
- hide_close_button = _this$props2.hide_close_button,
329
- close_button_attributes = _this$props2.close_button_attributes,
330
- spacing = _this$props2.spacing,
331
- prevent_close = _this$props2.prevent_close,
332
- open_delay = _this$props2.open_delay,
333
- prevent_core_style = _this$props2.prevent_core_style,
334
- animation_duration = _this$props2.animation_duration,
335
- no_animation = _this$props2.no_animation,
336
- no_animation_on_mobile = _this$props2.no_animation_on_mobile,
337
- min_width = _this$props2.min_width,
338
- max_width = _this$props2.max_width,
339
- fullscreen = _this$props2.fullscreen,
340
- align_content = _this$props2.align_content,
341
- container_placement = _this$props2.container_placement,
342
- closeModal = _this$props2.closeModal,
343
- className = _this$props2.className,
344
- _className = _this$props2.class,
345
- content_class = _this$props2.content_class,
346
- overlay_class = _this$props2.overlay_class,
347
- content_id = _this$props2.content_id,
348
- toggleOpenClose = _this$props2.toggleOpenClose,
349
- children = _this$props2.children,
350
- rest = _objectWithoutProperties(_this$props2, _excluded2);
351
-
352
- var contentId = content_id || makeUniqueId();
353
- var style = this.state.color ? {
354
- '--modal-background-color': "var(--color-".concat(this.state.color, ")")
355
- } : null;
323
+ var _this$props3 = this.props,
324
+ _this$props3$mode = _this$props3.mode,
325
+ mode = _this$props3$mode === void 0 ? 'modal' : _this$props3$mode,
326
+ hide = _this$props3.hide,
327
+ title = _this$props3.title,
328
+ labelled_by = _this$props3.labelled_by,
329
+ header_content = _this$props3.header_content,
330
+ modal_content = _this$props3.modal_content,
331
+ bar_content = _this$props3.bar_content,
332
+ _id = _this$props3.id,
333
+ _this$props3$close_ti = _this$props3.close_title,
334
+ close_title = _this$props3$close_ti === void 0 ? 'Lukk' : _this$props3$close_ti,
335
+ _this$props3$dialog_t = _this$props3.dialog_title,
336
+ dialog_title = _this$props3$dialog_t === void 0 ? 'Vindu' : _this$props3$dialog_t,
337
+ _this$props3$hide_clo = _this$props3.hide_close_button,
338
+ hide_close_button = _this$props3$hide_clo === void 0 ? false : _this$props3$hide_clo,
339
+ close_button_attributes = _this$props3.close_button_attributes,
340
+ _this$props3$spacing = _this$props3.spacing,
341
+ spacing = _this$props3$spacing === void 0 ? true : _this$props3$spacing,
342
+ _this$props3$prevent_ = _this$props3.prevent_core_style,
343
+ prevent_core_style = _this$props3$prevent_ === void 0 ? false : _this$props3$prevent_,
344
+ animation_duration = _this$props3.animation_duration,
345
+ _this$props3$no_anima = _this$props3.no_animation,
346
+ no_animation = _this$props3$no_anima === void 0 ? false : _this$props3$no_anima,
347
+ _this$props3$no_anima2 = _this$props3.no_animation_on_mobile,
348
+ no_animation_on_mobile = _this$props3$no_anima2 === void 0 ? false : _this$props3$no_anima2,
349
+ min_width = _this$props3.min_width,
350
+ max_width = _this$props3.max_width,
351
+ _this$props3$fullscre = _this$props3.fullscreen,
352
+ fullscreen = _this$props3$fullscre === void 0 ? 'auto' : _this$props3$fullscre,
353
+ align_content = _this$props3.align_content,
354
+ container_placement = _this$props3.container_placement,
355
+ closeModal = _this$props3.closeModal,
356
+ className = _this$props3.className,
357
+ _className = _this$props3.class,
358
+ content_class = _this$props3.content_class,
359
+ overlay_class = _this$props3.overlay_class,
360
+ content_id = _this$props3.content_id,
361
+ children = _this$props3.children,
362
+ rest = _objectWithoutProperties(_this$props3, _excluded2);
363
+
364
+ var color = this.state.color;
365
+ var contentId = content_id || makeUniqueId('modal-');
356
366
  var minWidth = min_width;
357
367
  var maxWidth = max_width;
358
368
 
359
- if (minWidth && !maxWidth && parseFloat(minWidth) > 0) {
369
+ if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
360
370
  maxWidth = 0;
361
- } else if (maxWidth && !minWidth && parseFloat(maxWidth) > 0) {
371
+ } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
362
372
  minWidth = 0;
363
373
  }
364
374
 
365
375
  var useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS);
366
376
  var contentParams = {
367
377
  role: useDialogRole ? 'dialog' : 'region',
368
- 'aria-modal': useDialogRole ? 'true' : undefined,
378
+ 'aria-modal': useDialogRole ? true : undefined,
369
379
  'aria-labelledby': combineLabelledBy(this.props, title ? contentId + '-title' : null, labelled_by),
370
380
  'aria-describedby': combineDescribedBy(this.props, contentId + '-content'),
371
- 'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,
381
+ 'aria-label': !title && !labelled_by ? dialog_title : undefined,
372
382
  className: classnames('dnb-modal__content', (container_placement || mode === 'drawer') && "dnb-modal__content--".concat(container_placement || 'right'), isTrue(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && "dnb-modal__content--".concat(mode), hide && 'dnb-modal__content--hide', isTrue(spacing) && 'dnb-modal__content--spacing', align_content && "dnb-modal__content__align--".concat(align_content), isTrue(no_animation) && 'dnb-modal__content--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
373
383
  onClick: this.onContentClickHandler
374
384
  };
@@ -384,134 +394,46 @@ var ModalContent = function (_React$PureComponent) {
384
394
  onKeyDown: this.onKeyDownHandler
385
395
  }, rest);
386
396
 
387
- var overlayParams = {
388
- className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile')
389
- };
390
397
  validateDOMAttributes(this.props, innerParams);
391
- var bar = findElementInChildren(modal_content, function (cur) {
398
+ var barExists = findElementInChildren(modal_content, function (cur) {
392
399
  return cur.type === ModalHeaderBar;
393
- }) ? null : React.createElement(ModalHeaderBar, null, bar_content);
394
- var header = findElementInChildren(modal_content, function (cur) {
400
+ });
401
+ var headerExists = findElementInChildren(modal_content, function (cur) {
395
402
  return cur.type === ModalHeader;
396
- }) ? null : React.createElement(ModalHeader, {
397
- title: title
398
- }, header_content);
399
- var content = React.createElement("div", {
400
- id: contentId + '-content',
401
- className: "dnb-modal__content__wrapper"
402
- }, modal_content);
403
+ });
403
404
  return React.createElement(ModalContext.Provider, {
404
- value: _objectSpread(_objectSpread({
405
- id: contentId,
406
- setBackgroundColor: this.setBackgroundColor
407
- }, this.props), {}, {
405
+ value: {
406
+ id: this.props.id,
407
+ title: title,
408
+ hide_close_button: hide_close_button,
409
+ close_button_attributes: close_button_attributes,
410
+ close_title: close_title,
411
+ mode: mode,
412
+ setBackgroundColor: this.setBackgroundColor,
408
413
  onCloseClickHandler: this.onCloseClickHandler
409
- })
414
+ }
410
415
  }, React.createElement("div", _extends({
411
416
  id: contentId
412
417
  }, contentParams), React.createElement(ScrollView, innerParams, React.createElement("div", {
413
- tabIndex: "-1",
418
+ tabIndex: -1,
414
419
  className: "dnb-modal__content__spacing dnb-no-focus",
415
- style: style,
420
+ style: color ? {
421
+ '--modal-background-color': "var(--color-".concat(color, ")")
422
+ } : null,
416
423
  ref: this._contentRef
417
- }, bar, header, content))), React.createElement("span", _extends({}, overlayParams, {
424
+ }, !barExists && React.createElement(ModalHeaderBar, null, bar_content), !headerExists && React.createElement(ModalHeader, {
425
+ title: title
426
+ }, header_content), React.createElement("div", {
427
+ id: contentId + '-content',
428
+ className: "dnb-modal__content__wrapper"
429
+ }, modal_content)))), React.createElement("span", {
430
+ className: classnames('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), isTrue(no_animation) && 'dnb-modal__overlay--no-animation', isTrue(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
418
431
  "aria-hidden": "true"
419
- })));
432
+ }));
420
433
  }
421
434
  }]);
422
435
 
423
436
  return ModalContent;
424
437
  }(React.PureComponent);
425
438
 
426
- _defineProperty(ModalContent, "defaultProps", {
427
- mode: null,
428
- bar_content: null,
429
- header_content: null,
430
- hide: null,
431
- id: null,
432
- root_id: null,
433
- labelled_by: null,
434
- focus_selector: null,
435
- content_id: null,
436
- title: null,
437
- close_title: null,
438
- dialog_title: null,
439
- hide_close_button: null,
440
- close_button_attributes: null,
441
- spacing: null,
442
- prevent_close: null,
443
- prevent_core_style: null,
444
- animation_duration: null,
445
- no_animation: null,
446
- no_animation_on_mobile: null,
447
- min_width: null,
448
- max_width: null,
449
- fullscreen: null,
450
- align_content: null,
451
- container_placement: null,
452
- class: null,
453
- overlay_class: null,
454
- content_class: null,
455
- closeModal: null,
456
- className: null,
457
- children: null
458
- });
459
-
460
- export { ModalContent as default };
461
- process.env.NODE_ENV !== "production" ? ModalContent.propTypes = {
462
- modal_content: PropTypes.node.isRequired,
463
- mode: PropTypes.oneOf(['modal', 'drawer']),
464
- bar_content: PropTypes.node,
465
- header_content: PropTypes.node,
466
- hide: PropTypes.bool,
467
- id: PropTypes.string,
468
- root_id: PropTypes.string,
469
- labelled_by: PropTypes.string,
470
- focus_selector: PropTypes.string,
471
- content_id: PropTypes.string,
472
- title: PropTypes.node,
473
- close_title: PropTypes.string,
474
- dialog_title: PropTypes.string,
475
- hide_close_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
476
- close_button_attributes: PropTypes.object,
477
- spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
478
- prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
479
- prevent_core_style: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
480
- animation_duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
481
- no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
482
- no_animation_on_mobile: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
483
- min_width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
484
- max_width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
485
- fullscreen: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
486
- align_content: PropTypes.string,
487
- container_placement: PropTypes.string,
488
- class: PropTypes.string,
489
- content_class: PropTypes.string,
490
- overlay_class: PropTypes.string,
491
- closeModal: PropTypes.func.isRequired,
492
- className: PropTypes.string,
493
- children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
494
- } : void 0;
495
- export function getListOfModalRoots() {
496
- var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
497
-
498
- if (typeof window !== 'undefined') {
499
- try {
500
- var stack = window.__modalStack || [];
501
-
502
- if (index !== null) {
503
- if (index === -1 && stack.length) {
504
- return stack[stack.length - 1];
505
- } else if (index > -1) {
506
- return stack[index];
507
- }
508
- }
509
-
510
- return stack;
511
- } catch (e) {
512
- warn(e);
513
- }
514
- }
515
-
516
- return [];
517
- }
439
+ export { ModalContent as default };