@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-dev.22

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 (671) hide show
  1. package/README.md +38 -38
  2. package/dist/Accordion/AccordionItem.cjs.map +1 -1
  3. package/dist/Accordion/AccordionItem.d.ts +11 -11
  4. package/dist/Accordion/AccordionItem.js.map +1 -1
  5. package/dist/Accordion/AccordionMenu.cjs.map +1 -1
  6. package/dist/Accordion/AccordionMenu.d.ts +19 -19
  7. package/dist/Accordion/AccordionMenu.js.map +1 -1
  8. package/dist/Accordion/ContentAccordion.cjs +5 -5
  9. package/dist/Accordion/ContentAccordion.cjs.map +1 -1
  10. package/dist/Accordion/ContentAccordion.d.ts +27 -27
  11. package/dist/Accordion/ContentAccordion.js +6 -6
  12. package/dist/Accordion/ContentAccordion.js.map +1 -1
  13. package/dist/Accordion/index.cjs.map +1 -1
  14. package/dist/Accordion/index.d.ts +4 -4
  15. package/dist/Accordion/index.js.map +1 -1
  16. package/dist/Accordion/styles.cjs +1 -1
  17. package/dist/Accordion/styles.cjs.map +1 -1
  18. package/dist/Accordion/styles.d.ts +10 -10
  19. package/dist/Accordion/styles.js +1 -1
  20. package/dist/Accordion/styles.js.map +1 -1
  21. package/dist/AuthPage/AuthPage.cjs +4 -4
  22. package/dist/AuthPage/AuthPage.cjs.map +1 -1
  23. package/dist/AuthPage/AuthPage.d.ts +32 -32
  24. package/dist/AuthPage/AuthPage.js +4 -4
  25. package/dist/AuthPage/AuthPage.js.map +1 -1
  26. package/dist/AuthPage/Information.cjs.map +1 -1
  27. package/dist/AuthPage/Information.d.ts +7 -7
  28. package/dist/AuthPage/Information.js.map +1 -1
  29. package/dist/AuthPage/ScreenSetsContainer.cjs.map +1 -1
  30. package/dist/AuthPage/ScreenSetsContainer.d.ts +4 -4
  31. package/dist/AuthPage/ScreenSetsContainer.js.map +1 -1
  32. package/dist/AuthPage/_AuthPageSection.cjs.map +1 -1
  33. package/dist/AuthPage/_AuthPageSection.d.ts +2 -2
  34. package/dist/AuthPage/_AuthPageSection.js.map +1 -1
  35. package/dist/AuthPage/index.cjs.map +1 -1
  36. package/dist/AuthPage/index.d.ts +5 -5
  37. package/dist/AuthPage/index.js.map +1 -1
  38. package/dist/AuthPage/screenSetsErrorMessages.cjs.map +1 -1
  39. package/dist/AuthPage/screenSetsErrorMessages.d.ts +5 -5
  40. package/dist/AuthPage/screenSetsErrorMessages.js.map +1 -1
  41. package/dist/Banners/Banner.cjs.map +1 -1
  42. package/dist/Banners/Banner.d.ts +17 -17
  43. package/dist/Banners/Banner.js.map +1 -1
  44. package/dist/Banners/OverviewBanner.cjs.map +1 -1
  45. package/dist/Banners/OverviewBanner.d.ts +6 -6
  46. package/dist/Banners/OverviewBanner.js.map +1 -1
  47. package/dist/Banners/index.cjs.map +1 -1
  48. package/dist/Banners/index.d.ts +3 -3
  49. package/dist/Banners/index.js.map +1 -1
  50. package/dist/Banners/styles.cjs.map +1 -1
  51. package/dist/Banners/styles.d.ts +1 -1
  52. package/dist/Banners/styles.js.map +1 -1
  53. package/dist/Breadcrumb/Breadcrumb.cjs.map +1 -1
  54. package/dist/Breadcrumb/Breadcrumb.d.ts +12 -12
  55. package/dist/Breadcrumb/Breadcrumb.js.map +1 -1
  56. package/dist/Breadcrumb/BreadcrumbItem.d.ts +4 -4
  57. package/dist/Breadcrumb/index.cjs.map +1 -1
  58. package/dist/Breadcrumb/index.d.ts +1 -1
  59. package/dist/Breadcrumb/index.js.map +1 -1
  60. package/dist/Button/BackButton.cjs.map +1 -1
  61. package/dist/Button/BackButton.d.ts +8 -8
  62. package/dist/Button/BackButton.js.map +1 -1
  63. package/dist/Button/Button.cjs +3 -3
  64. package/dist/Button/Button.cjs.map +1 -1
  65. package/dist/Button/Button.d.ts +19 -19
  66. package/dist/Button/Button.js +3 -3
  67. package/dist/Button/Button.js.map +1 -1
  68. package/dist/Button/DualFunctionButton.cjs.map +1 -1
  69. package/dist/Button/DualFunctionButton.d.ts +13 -13
  70. package/dist/Button/DualFunctionButton.js.map +1 -1
  71. package/dist/Button/Iconbutton.cjs.map +1 -1
  72. package/dist/Button/Iconbutton.d.ts +44 -44
  73. package/dist/Button/Iconbutton.js.map +1 -1
  74. package/dist/Button/index.cjs.map +1 -1
  75. package/dist/Button/index.d.ts +4 -4
  76. package/dist/Button/index.js.map +1 -1
  77. package/dist/Card/HorizontalCard/HorizontalCard.cjs +97 -0
  78. package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +1 -0
  79. package/dist/Card/HorizontalCard/HorizontalCard.d.ts +4 -0
  80. package/dist/Card/HorizontalCard/HorizontalCard.js +74 -0
  81. package/dist/Card/HorizontalCard/HorizontalCard.js.map +1 -0
  82. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs +118 -0
  83. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -0
  84. package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +5 -0
  85. package/dist/Card/HorizontalCard/HorizontalCardActions.js +98 -0
  86. package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -0
  87. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +60 -0
  88. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +1 -0
  89. package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +5 -0
  90. package/dist/Card/HorizontalCard/HorizontalCardBody.js +40 -0
  91. package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +1 -0
  92. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +49 -0
  93. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -0
  94. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +5 -0
  95. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +33 -0
  96. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -0
  97. package/dist/Card/HorizontalCard/index.cjs +33 -0
  98. package/dist/Card/HorizontalCard/index.cjs.map +1 -0
  99. package/dist/Card/HorizontalCard/index.d.ts +2 -0
  100. package/dist/Card/HorizontalCard/index.js +3 -0
  101. package/dist/Card/HorizontalCard/index.js.map +1 -0
  102. package/dist/Card/HorizontalCard/types.cjs +6 -0
  103. package/dist/Card/HorizontalCard/types.cjs.map +1 -0
  104. package/dist/Card/HorizontalCard/types.d.ts +40 -0
  105. package/dist/Card/HorizontalCard/types.js +2 -0
  106. package/dist/Card/HorizontalCard/types.js.map +1 -0
  107. package/dist/Card/{Card.cjs → VerticalCard/Card.cjs} +33 -9
  108. package/dist/Card/VerticalCard/Card.cjs.map +1 -0
  109. package/dist/Card/{Card.d.ts → VerticalCard/Card.d.ts} +16 -15
  110. package/dist/Card/{Card.js → VerticalCard/Card.js} +30 -8
  111. package/dist/Card/VerticalCard/Card.js.map +1 -0
  112. package/dist/Card/{CardBottomSection.cjs → VerticalCard/CardBottomSection.cjs} +42 -25
  113. package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -0
  114. package/dist/Card/{CardBottomSection.d.ts → VerticalCard/CardBottomSection.d.ts} +31 -31
  115. package/dist/Card/{CardBottomSection.js → VerticalCard/CardBottomSection.js} +27 -11
  116. package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -0
  117. package/dist/Card/{CardMiddleSection.cjs → VerticalCard/CardMiddleSection.cjs} +14 -13
  118. package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -0
  119. package/dist/Card/{CardMiddleSection.d.ts → VerticalCard/CardMiddleSection.d.ts} +27 -27
  120. package/dist/Card/{CardMiddleSection.js → VerticalCard/CardMiddleSection.js} +3 -2
  121. package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -0
  122. package/dist/Card/{CardTopSection.cjs → VerticalCard/CardTopSection.cjs} +14 -12
  123. package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -0
  124. package/dist/Card/{CardTopSection.d.ts → VerticalCard/CardTopSection.d.ts} +27 -27
  125. package/dist/Card/{CardTopSection.js → VerticalCard/CardTopSection.js} +12 -10
  126. package/dist/Card/VerticalCard/CardTopSection.js.map +1 -0
  127. package/dist/Card/VerticalCard/index.cjs +88 -0
  128. package/dist/Card/VerticalCard/index.cjs.map +1 -0
  129. package/dist/Card/VerticalCard/index.d.ts +7 -0
  130. package/dist/Card/VerticalCard/index.js +8 -0
  131. package/dist/Card/VerticalCard/index.js.map +1 -0
  132. package/dist/Card/index.cjs +8 -64
  133. package/dist/Card/index.cjs.map +1 -1
  134. package/dist/Card/index.d.ts +2 -7
  135. package/dist/Card/index.js +2 -7
  136. package/dist/Card/index.js.map +1 -1
  137. package/dist/Chips/ActionChip.cjs +8 -8
  138. package/dist/Chips/ActionChip.cjs.map +1 -1
  139. package/dist/Chips/ActionChip.d.ts +10 -10
  140. package/dist/Chips/ActionChip.js +10 -10
  141. package/dist/Chips/ActionChip.js.map +1 -1
  142. package/dist/Chips/ChipStyles.cjs.map +1 -1
  143. package/dist/Chips/ChipStyles.d.ts +3 -3
  144. package/dist/Chips/ChipStyles.js +4 -4
  145. package/dist/Chips/ChipStyles.js.map +1 -1
  146. package/dist/Chips/ChipTypes.d.ts +38 -38
  147. package/dist/Chips/ChoiceChips.cjs +13 -13
  148. package/dist/Chips/ChoiceChips.cjs.map +1 -1
  149. package/dist/Chips/ChoiceChips.d.ts +10 -10
  150. package/dist/Chips/ChoiceChips.js +15 -15
  151. package/dist/Chips/ChoiceChips.js.map +1 -1
  152. package/dist/Chips/FilterChip.cjs +8 -8
  153. package/dist/Chips/FilterChip.cjs.map +1 -1
  154. package/dist/Chips/FilterChip.d.ts +10 -10
  155. package/dist/Chips/FilterChip.js +10 -10
  156. package/dist/Chips/FilterChip.js.map +1 -1
  157. package/dist/Chips/InputChip.cjs +11 -11
  158. package/dist/Chips/InputChip.cjs.map +1 -1
  159. package/dist/Chips/InputChip.d.ts +10 -10
  160. package/dist/Chips/InputChip.js +13 -13
  161. package/dist/Chips/InputChip.js.map +1 -1
  162. package/dist/Chips/index.cjs.map +1 -1
  163. package/dist/Chips/index.d.ts +5 -5
  164. package/dist/Chips/index.js.map +1 -1
  165. package/dist/ChipsInput/ChipDropdownInput.cjs +20 -20
  166. package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
  167. package/dist/ChipsInput/ChipDropdownInput.d.ts +21 -21
  168. package/dist/ChipsInput/ChipDropdownInput.js +26 -26
  169. package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
  170. package/dist/ChipsInput/ChipInput.cjs +16 -16
  171. package/dist/ChipsInput/ChipInput.cjs.map +1 -1
  172. package/dist/ChipsInput/ChipInput.d.ts +7 -7
  173. package/dist/ChipsInput/ChipInput.js +16 -16
  174. package/dist/ChipsInput/ChipInput.js.map +1 -1
  175. package/dist/ChipsInput/ChipInputField.cjs +4 -4
  176. package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
  177. package/dist/ChipsInput/ChipInputField.d.ts +25 -25
  178. package/dist/ChipsInput/ChipInputField.js +4 -4
  179. package/dist/ChipsInput/ChipInputField.js.map +1 -1
  180. package/dist/ChipsInput/ChipInputTypes.d.ts +22 -22
  181. package/dist/ChipsInput/index.cjs.map +1 -1
  182. package/dist/ChipsInput/index.d.ts +1 -1
  183. package/dist/ChipsInput/index.js.map +1 -1
  184. package/dist/Dropdown/BasicDropdown.cjs +67 -57
  185. package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
  186. package/dist/Dropdown/BasicDropdown.d.ts +42 -35
  187. package/dist/Dropdown/BasicDropdown.js +67 -58
  188. package/dist/Dropdown/BasicDropdown.js.map +1 -1
  189. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  190. package/dist/Dropdown/CommonStyling.d.ts +22 -22
  191. package/dist/Dropdown/CommonStyling.js.map +1 -1
  192. package/dist/Dropdown/DropdownButton.cjs +6 -6
  193. package/dist/Dropdown/DropdownButton.cjs.map +1 -1
  194. package/dist/Dropdown/DropdownButton.d.ts +10 -6
  195. package/dist/Dropdown/DropdownButton.js +12 -13
  196. package/dist/Dropdown/DropdownButton.js.map +1 -1
  197. package/dist/Dropdown/DropdownButtonTypes.d.ts +33 -33
  198. package/dist/Dropdown/DropdownContent.cjs +6 -6
  199. package/dist/Dropdown/DropdownContent.cjs.map +1 -1
  200. package/dist/Dropdown/DropdownContent.d.ts +56 -56
  201. package/dist/Dropdown/DropdownContent.js +6 -6
  202. package/dist/Dropdown/DropdownContent.js.map +1 -1
  203. package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
  204. package/dist/Dropdown/DropdownFilter.d.ts +24 -24
  205. package/dist/Dropdown/DropdownFilter.js.map +1 -1
  206. package/dist/Dropdown/index.cjs.map +1 -1
  207. package/dist/Dropdown/index.d.ts +6 -6
  208. package/dist/Dropdown/index.js.map +1 -1
  209. package/dist/Footer/Components/FooterBottomLinks.cjs.map +1 -1
  210. package/dist/Footer/Components/FooterBottomLinks.d.ts +11 -11
  211. package/dist/Footer/Components/FooterBottomLinks.js.map +1 -1
  212. package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -1
  213. package/dist/Footer/Components/FooterDropdownLinks.d.ts +7 -7
  214. package/dist/Footer/Components/FooterDropdownLinks.js.map +1 -1
  215. package/dist/Footer/Components/FooterNavSection.cjs.map +1 -1
  216. package/dist/Footer/Components/FooterNavSection.d.ts +7 -7
  217. package/dist/Footer/Components/FooterNavSection.js.map +1 -1
  218. package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
  219. package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts +7 -7
  220. package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  221. package/dist/Footer/Components/FooterTop.cjs.map +1 -1
  222. package/dist/Footer/Components/FooterTop.d.ts +7 -7
  223. package/dist/Footer/Components/FooterTop.js.map +1 -1
  224. package/dist/Footer/Footer.cjs.map +1 -1
  225. package/dist/Footer/Footer.d.ts +2 -2
  226. package/dist/Footer/Footer.js.map +1 -1
  227. package/dist/Footer/SiteFooter.cjs.map +1 -1
  228. package/dist/Footer/SiteFooter.d.ts +20 -20
  229. package/dist/Footer/SiteFooter.js +8 -8
  230. package/dist/Footer/SiteFooter.js.map +1 -1
  231. package/dist/Footer/index.cjs.map +1 -1
  232. package/dist/Footer/index.d.ts +2 -2
  233. package/dist/Footer/index.js.map +1 -1
  234. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs +4 -4
  235. package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map +1 -1
  236. package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts +23 -23
  237. package/dist/GlobalNavigationBar/GlobalNavigationBar.js +4 -4
  238. package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map +1 -1
  239. package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
  240. package/dist/GlobalNavigationBar/Logo.d.ts +14 -14
  241. package/dist/GlobalNavigationBar/Logo.js.map +1 -1
  242. package/dist/GlobalNavigationBar/NavigationHelper.cjs.map +1 -1
  243. package/dist/GlobalNavigationBar/NavigationHelper.d.ts +4 -4
  244. package/dist/GlobalNavigationBar/NavigationHelper.js.map +1 -1
  245. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -8
  246. package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
  247. package/dist/GlobalNavigationBar/desktop/DesktopActions.d.ts +15 -15
  248. package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -2
  249. package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
  250. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
  251. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts +7 -7
  252. package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
  253. package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
  254. package/dist/GlobalNavigationBar/desktop/MainMenu.d.ts +8 -8
  255. package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
  256. package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
  257. package/dist/GlobalNavigationBar/desktop/RightSideNav.d.ts +8 -8
  258. package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
  259. package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
  260. package/dist/GlobalNavigationBar/desktop/UserMenu.d.ts +7 -7
  261. package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
  262. package/dist/GlobalNavigationBar/index.cjs.map +1 -1
  263. package/dist/GlobalNavigationBar/index.d.ts +3 -3
  264. package/dist/GlobalNavigationBar/index.js.map +1 -1
  265. package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
  266. package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts +13 -13
  267. package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  268. package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
  269. package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts +8 -8
  270. package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  271. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
  272. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.d.ts +11 -11
  273. package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
  274. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
  275. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.d.ts +12 -12
  276. package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
  277. package/dist/GlobalNavigationBar/types.d.ts +120 -120
  278. package/dist/HyperLink/HyperLink.cjs.map +1 -1
  279. package/dist/HyperLink/HyperLink.d.ts +16 -16
  280. package/dist/HyperLink/HyperLink.js.map +1 -1
  281. package/dist/HyperLink/index.cjs.map +1 -1
  282. package/dist/HyperLink/index.d.ts +3 -3
  283. package/dist/HyperLink/index.js.map +1 -1
  284. package/dist/HyperLink/styling.cjs.map +1 -1
  285. package/dist/HyperLink/styling.d.ts +2 -2
  286. package/dist/HyperLink/styling.js.map +1 -1
  287. package/dist/Image/ImageWithFallbacks.cjs.map +1 -1
  288. package/dist/Image/ImageWithFallbacks.d.ts +21 -21
  289. package/dist/Image/ImageWithFallbacks.js.map +1 -1
  290. package/dist/Image/index.cjs.map +1 -1
  291. package/dist/Image/index.d.ts +2 -2
  292. package/dist/Image/index.js.map +1 -1
  293. package/dist/InputFields/Checkbox.cjs.map +1 -1
  294. package/dist/InputFields/Checkbox.d.ts +25 -25
  295. package/dist/InputFields/Checkbox.js.map +1 -1
  296. package/dist/InputFields/DatepickerField.cjs +48 -42
  297. package/dist/InputFields/DatepickerField.cjs.map +1 -1
  298. package/dist/InputFields/DatepickerField.d.ts +20 -23
  299. package/dist/InputFields/DatepickerField.js +45 -32
  300. package/dist/InputFields/DatepickerField.js.map +1 -1
  301. package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
  302. package/dist/InputFields/DatepickerFieldHeader.d.ts +18 -18
  303. package/dist/InputFields/DatepickerFieldHeader.js +2 -2
  304. package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
  305. package/dist/InputFields/Label.cjs +5 -5
  306. package/dist/InputFields/Label.cjs.map +1 -1
  307. package/dist/InputFields/Label.d.ts +13 -13
  308. package/dist/InputFields/Label.js +11 -11
  309. package/dist/InputFields/Label.js.map +1 -1
  310. package/dist/InputFields/NumberField.cjs +184 -97
  311. package/dist/InputFields/NumberField.cjs.map +1 -1
  312. package/dist/InputFields/NumberField.d.ts +19 -21
  313. package/dist/InputFields/NumberField.js +179 -97
  314. package/dist/InputFields/NumberField.js.map +1 -1
  315. package/dist/InputFields/PasswordField.cjs.map +1 -1
  316. package/dist/InputFields/PasswordField.d.ts +17 -17
  317. package/dist/InputFields/PasswordField.js.map +1 -1
  318. package/dist/InputFields/QuickSearch.cjs.map +1 -1
  319. package/dist/InputFields/QuickSearch.d.ts +18 -18
  320. package/dist/InputFields/QuickSearch.js.map +1 -1
  321. package/dist/InputFields/RadioButton.cjs +1 -1
  322. package/dist/InputFields/RadioButton.cjs.map +1 -1
  323. package/dist/InputFields/RadioButton.d.ts +18 -18
  324. package/dist/InputFields/RadioButton.js +1 -1
  325. package/dist/InputFields/RadioButton.js.map +1 -1
  326. package/dist/InputFields/ResponsiveComponentWrapper.cjs +4 -4
  327. package/dist/InputFields/ResponsiveComponentWrapper.cjs.map +1 -1
  328. package/dist/InputFields/ResponsiveComponentWrapper.d.ts +11 -11
  329. package/dist/InputFields/ResponsiveComponentWrapper.js +4 -4
  330. package/dist/InputFields/ResponsiveComponentWrapper.js.map +1 -1
  331. package/dist/InputFields/SearchBar.cjs.map +1 -1
  332. package/dist/InputFields/SearchBar.d.ts +18 -18
  333. package/dist/InputFields/SearchBar.js.map +1 -1
  334. package/dist/InputFields/TextField.cjs +5 -3
  335. package/dist/InputFields/TextField.cjs.map +1 -1
  336. package/dist/InputFields/TextField.d.ts +24 -23
  337. package/dist/InputFields/TextField.js +5 -4
  338. package/dist/InputFields/TextField.js.map +1 -1
  339. package/dist/InputFields/Textarea.cjs.map +1 -1
  340. package/dist/InputFields/Textarea.d.ts +7 -7
  341. package/dist/InputFields/Textarea.js +8 -8
  342. package/dist/InputFields/Textarea.js.map +1 -1
  343. package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
  344. package/dist/InputFields/components/SearchBarInput.d.ts +19 -19
  345. package/dist/InputFields/components/SearchBarInput.js.map +1 -1
  346. package/dist/InputFields/components/SearchField.cjs.map +1 -1
  347. package/dist/InputFields/components/SearchField.d.ts +15 -15
  348. package/dist/InputFields/components/SearchField.js.map +1 -1
  349. package/dist/InputFields/index.cjs +26 -0
  350. package/dist/InputFields/index.cjs.map +1 -1
  351. package/dist/InputFields/index.d.ts +12 -11
  352. package/dist/InputFields/index.js +1 -0
  353. package/dist/InputFields/index.js.map +1 -1
  354. package/dist/InputFields/styling.cjs.map +1 -1
  355. package/dist/InputFields/styling.d.ts +24 -24
  356. package/dist/InputFields/styling.js.map +1 -1
  357. package/dist/InputFields/types.d.ts +38 -38
  358. package/dist/Layouts/index.cjs.map +1 -1
  359. package/dist/Layouts/index.d.ts +10 -10
  360. package/dist/Layouts/index.js.map +1 -1
  361. package/dist/LinearProgress/LinearProgress.cjs.map +1 -1
  362. package/dist/LinearProgress/LinearProgress.d.ts +25 -25
  363. package/dist/LinearProgress/LinearProgress.js.map +1 -1
  364. package/dist/LinearProgress/index.cjs.map +1 -1
  365. package/dist/LinearProgress/index.d.ts +3 -3
  366. package/dist/LinearProgress/index.js.map +1 -1
  367. package/dist/List/ListRow.cjs +1 -1
  368. package/dist/List/ListRow.cjs.map +1 -1
  369. package/dist/List/ListRow.d.ts +20 -20
  370. package/dist/List/ListRow.js +1 -1
  371. package/dist/List/ListRow.js.map +1 -1
  372. package/dist/List/__tests__/ListRow.tests.d.ts +1 -1
  373. package/dist/List/index.cjs.map +1 -1
  374. package/dist/List/index.d.ts +2 -2
  375. package/dist/List/index.js.map +1 -1
  376. package/dist/LoadingIndicator/LoadingIndicator.cjs.map +1 -1
  377. package/dist/LoadingIndicator/LoadingIndicator.d.ts +8 -8
  378. package/dist/LoadingIndicator/LoadingIndicator.js.map +1 -1
  379. package/dist/LoadingIndicator/index.cjs.map +1 -1
  380. package/dist/LoadingIndicator/index.d.ts +1 -1
  381. package/dist/LoadingIndicator/index.js.map +1 -1
  382. package/dist/LoadingPage/GlobalLoadingPage.cjs.map +1 -1
  383. package/dist/LoadingPage/GlobalLoadingPage.d.ts +7 -7
  384. package/dist/LoadingPage/GlobalLoadingPage.js.map +1 -1
  385. package/dist/LoadingPage/index.cjs.map +1 -1
  386. package/dist/LoadingPage/index.d.ts +1 -1
  387. package/dist/LoadingPage/index.js.map +1 -1
  388. package/dist/MenuItem/MenuItem.cjs +5 -3
  389. package/dist/MenuItem/MenuItem.cjs.map +1 -1
  390. package/dist/MenuItem/MenuItem.d.ts +25 -25
  391. package/dist/MenuItem/MenuItem.js +5 -3
  392. package/dist/MenuItem/MenuItem.js.map +1 -1
  393. package/dist/MenuItem/index.d.ts +1 -1
  394. package/dist/MiniProductCard/MiniProductCard.cjs.map +1 -1
  395. package/dist/MiniProductCard/MiniProductCard.d.ts +7 -7
  396. package/dist/MiniProductCard/MiniProductCard.js.map +1 -1
  397. package/dist/MiniProductCard/index.cjs.map +1 -1
  398. package/dist/MiniProductCard/index.d.ts +1 -1
  399. package/dist/MiniProductCard/index.js.map +1 -1
  400. package/dist/Modals/Modal.cjs +2 -2
  401. package/dist/Modals/Modal.cjs.map +1 -1
  402. package/dist/Modals/Modal.d.ts +14 -14
  403. package/dist/Modals/Modal.js +2 -2
  404. package/dist/Modals/Modal.js.map +1 -1
  405. package/dist/Modals/ModalContainer.cjs.map +1 -1
  406. package/dist/Modals/ModalContainer.d.ts +32 -32
  407. package/dist/Modals/ModalContainer.js.map +1 -1
  408. package/dist/Modals/ModalContent.cjs.map +1 -1
  409. package/dist/Modals/ModalContent.d.ts +17 -17
  410. package/dist/Modals/ModalContent.js.map +1 -1
  411. package/dist/Modals/ModalDialog.cjs.map +1 -1
  412. package/dist/Modals/ModalDialog.d.ts +28 -28
  413. package/dist/Modals/ModalDialog.js.map +1 -1
  414. package/dist/Modals/ModalNote.cjs.map +1 -1
  415. package/dist/Modals/ModalNote.d.ts +9 -9
  416. package/dist/Modals/ModalNote.js.map +1 -1
  417. package/dist/Modals/ModalStyles.cjs +2 -2
  418. package/dist/Modals/ModalStyles.cjs.map +1 -1
  419. package/dist/Modals/ModalStyles.d.ts +53 -53
  420. package/dist/Modals/ModalStyles.js +2 -2
  421. package/dist/Modals/ModalStyles.js.map +1 -1
  422. package/dist/Modals/ModalTypes.d.ts +23 -23
  423. package/dist/Modals/index.cjs.map +1 -1
  424. package/dist/Modals/index.d.ts +7 -7
  425. package/dist/Modals/index.js.map +1 -1
  426. package/dist/NavItem/NavItem.cjs.map +1 -1
  427. package/dist/NavItem/NavItem.d.ts +2 -2
  428. package/dist/NavItem/NavItem.js.map +1 -1
  429. package/dist/NavItem/index.cjs.map +1 -1
  430. package/dist/NavItem/index.d.ts +1 -1
  431. package/dist/NavItem/index.js.map +1 -1
  432. package/dist/NotificationDot/NotificationDot.cjs.map +1 -1
  433. package/dist/NotificationDot/NotificationDot.d.ts +9 -9
  434. package/dist/NotificationDot/NotificationDot.js.map +1 -1
  435. package/dist/NotificationDot/index.d.ts +1 -1
  436. package/dist/Paginator/Paginator.cjs.map +1 -1
  437. package/dist/Paginator/Paginator.d.ts +8 -8
  438. package/dist/Paginator/Paginator.js.map +1 -1
  439. package/dist/Paginator/index.cjs.map +1 -1
  440. package/dist/Paginator/index.d.ts +2 -2
  441. package/dist/Paginator/index.js.map +1 -1
  442. package/dist/Popover/Popover.cjs +38 -24
  443. package/dist/Popover/Popover.cjs.map +1 -1
  444. package/dist/Popover/Popover.d.ts +27 -26
  445. package/dist/Popover/Popover.js +38 -24
  446. package/dist/Popover/Popover.js.map +1 -1
  447. package/dist/Popover/index.d.ts +1 -1
  448. package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
  449. package/dist/ProfileButton/ProfileButton.d.ts +14 -14
  450. package/dist/ProfileButton/ProfileButton.js.map +1 -1
  451. package/dist/ProfileButton/index.d.ts +1 -1
  452. package/dist/QuizButton/QuizButton.cjs.map +1 -1
  453. package/dist/QuizButton/QuizButton.d.ts +15 -15
  454. package/dist/QuizButton/QuizButton.js.map +1 -1
  455. package/dist/QuizButton/index.d.ts +1 -1
  456. package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
  457. package/dist/SegmentControl/SegmentControl.d.ts +19 -19
  458. package/dist/SegmentControl/SegmentControl.js.map +1 -1
  459. package/dist/SegmentControl/index.cjs.map +1 -1
  460. package/dist/SegmentControl/index.d.ts +3 -3
  461. package/dist/SegmentControl/index.js.map +1 -1
  462. package/dist/Services/functions.cjs.map +1 -1
  463. package/dist/Services/functions.d.ts +1 -1
  464. package/dist/Services/functions.js.map +1 -1
  465. package/dist/SkipToContent/SkipToContent.cjs.map +1 -1
  466. package/dist/SkipToContent/SkipToContent.d.ts +4 -4
  467. package/dist/SkipToContent/SkipToContent.js.map +1 -1
  468. package/dist/SkipToContent/index.cjs.map +1 -1
  469. package/dist/SkipToContent/index.d.ts +1 -1
  470. package/dist/SkipToContent/index.js.map +1 -1
  471. package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
  472. package/dist/Switcher/MobileSwitcherMenu.d.ts +10 -10
  473. package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
  474. package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
  475. package/dist/Switcher/SwitcherMenuItem.d.ts +3 -3
  476. package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
  477. package/dist/Switcher/__tests__/SwitcherMenuItem.d.ts +1 -1
  478. package/dist/Switcher/index.cjs.map +1 -1
  479. package/dist/Switcher/index.d.ts +3 -3
  480. package/dist/Switcher/index.js.map +1 -1
  481. package/dist/Table/Table.cjs +31 -31
  482. package/dist/Table/Table.cjs.map +1 -1
  483. package/dist/Table/Table.d.ts +10 -10
  484. package/dist/Table/Table.js +39 -39
  485. package/dist/Table/Table.js.map +1 -1
  486. package/dist/Table/TableBody.cjs.map +1 -1
  487. package/dist/Table/TableBody.d.ts +9 -9
  488. package/dist/Table/TableBody.js.map +1 -1
  489. package/dist/Table/TableFooter.cjs.map +1 -1
  490. package/dist/Table/TableFooter.d.ts +15 -15
  491. package/dist/Table/TableFooter.js.map +1 -1
  492. package/dist/Table/TableHeaders.cjs.map +1 -1
  493. package/dist/Table/TableHeaders.d.ts +9 -9
  494. package/dist/Table/TableHeaders.js.map +1 -1
  495. package/dist/Table/TableStyles.cjs +2 -2
  496. package/dist/Table/TableStyles.cjs.map +1 -1
  497. package/dist/Table/TableStyles.d.ts +23 -23
  498. package/dist/Table/TableStyles.js +6 -6
  499. package/dist/Table/TableStyles.js.map +1 -1
  500. package/dist/Table/TableTypes.d.ts +56 -56
  501. package/dist/Table/index.cjs.map +1 -1
  502. package/dist/Table/index.d.ts +2 -2
  503. package/dist/Table/index.js.map +1 -1
  504. package/dist/Tabs/HorizontalTabs.cjs +3 -3
  505. package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
  506. package/dist/Tabs/HorizontalTabs.d.ts +16 -16
  507. package/dist/Tabs/HorizontalTabs.js +9 -9
  508. package/dist/Tabs/HorizontalTabs.js.map +1 -1
  509. package/dist/Tabs/TabLink.cjs.map +1 -1
  510. package/dist/Tabs/TabLink.d.ts +16 -16
  511. package/dist/Tabs/TabLink.js.map +1 -1
  512. package/dist/Tabs/Tabs.cjs.map +1 -1
  513. package/dist/Tabs/Tabs.d.ts +8 -8
  514. package/dist/Tabs/Tabs.js.map +1 -1
  515. package/dist/Tabs/VerticalTabs.cjs.map +1 -1
  516. package/dist/Tabs/VerticalTabs.d.ts +20 -20
  517. package/dist/Tabs/VerticalTabs.js.map +1 -1
  518. package/dist/Tabs/__tests__/TabLink.tests.d.ts +1 -1
  519. package/dist/Tabs/index.cjs.map +1 -1
  520. package/dist/Tabs/index.d.ts +5 -5
  521. package/dist/Tabs/index.js.map +1 -1
  522. package/dist/Tag/Tag.cjs.map +1 -1
  523. package/dist/Tag/Tag.d.ts +9 -9
  524. package/dist/Tag/Tag.js.map +1 -1
  525. package/dist/Tag/index.cjs.map +1 -1
  526. package/dist/Tag/index.d.ts +2 -2
  527. package/dist/Tag/index.js.map +1 -1
  528. package/dist/Tile/Tile.cjs.map +1 -1
  529. package/dist/Tile/Tile.d.ts +4 -4
  530. package/dist/Tile/Tile.js.map +1 -1
  531. package/dist/Tile/TileBody.cjs.map +1 -1
  532. package/dist/Tile/TileBody.d.ts +6 -6
  533. package/dist/Tile/TileBody.js.map +1 -1
  534. package/dist/Tile/TileCommonItems.cjs.map +1 -1
  535. package/dist/Tile/TileCommonItems.d.ts +9 -9
  536. package/dist/Tile/TileCommonItems.js.map +1 -1
  537. package/dist/Tile/TileFooter.cjs.map +1 -1
  538. package/dist/Tile/TileFooter.d.ts +7 -7
  539. package/dist/Tile/TileFooter.js.map +1 -1
  540. package/dist/Tile/TileHeader.cjs.map +1 -1
  541. package/dist/Tile/TileHeader.d.ts +7 -7
  542. package/dist/Tile/TileHeader.js.map +1 -1
  543. package/dist/Tile/TileTypes.d.ts +57 -57
  544. package/dist/Tile/index.cjs.map +1 -1
  545. package/dist/Tile/index.d.ts +3 -3
  546. package/dist/Tile/index.js.map +1 -1
  547. package/dist/Toasters/Toast.cjs.map +1 -1
  548. package/dist/Toasters/Toast.d.ts +24 -24
  549. package/dist/Toasters/Toast.js.map +1 -1
  550. package/dist/Toasters/ToastContext.cjs.map +1 -1
  551. package/dist/Toasters/ToastContext.d.ts +18 -18
  552. package/dist/Toasters/ToastContext.js.map +1 -1
  553. package/dist/Toasters/index.cjs.map +1 -1
  554. package/dist/Toasters/index.d.ts +3 -3
  555. package/dist/Toasters/index.js.map +1 -1
  556. package/dist/Toggles/ToggleButton.cjs +3 -2
  557. package/dist/Toggles/ToggleButton.cjs.map +1 -1
  558. package/dist/Toggles/ToggleButton.d.ts +14 -14
  559. package/dist/Toggles/ToggleButton.js +3 -2
  560. package/dist/Toggles/ToggleButton.js.map +1 -1
  561. package/dist/Toggles/ToggleSwitch.cjs +26 -19
  562. package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
  563. package/dist/Toggles/ToggleSwitch.d.ts +10 -6
  564. package/dist/Toggles/ToggleSwitch.js +29 -20
  565. package/dist/Toggles/ToggleSwitch.js.map +1 -1
  566. package/dist/Toggles/TogglerStyles.cjs.map +1 -1
  567. package/dist/Toggles/TogglerStyles.d.ts +5 -5
  568. package/dist/Toggles/TogglerStyles.js +4 -4
  569. package/dist/Toggles/TogglerStyles.js.map +1 -1
  570. package/dist/Toggles/TogglerTypes.d.ts +13 -13
  571. package/dist/Toggles/index.cjs.map +1 -1
  572. package/dist/Toggles/index.d.ts +3 -3
  573. package/dist/Toggles/index.js.map +1 -1
  574. package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
  575. package/dist/Tooltips/TooltipStyles.d.ts +12 -12
  576. package/dist/Tooltips/TooltipStyles.js.map +1 -1
  577. package/dist/Tooltips/TooltipTypes.cjs +2 -2
  578. package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
  579. package/dist/Tooltips/TooltipTypes.d.ts +16 -16
  580. package/dist/Tooltips/TooltipTypes.js +2 -2
  581. package/dist/Tooltips/TooltipTypes.js.map +1 -1
  582. package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
  583. package/dist/Tooltips/TooltipWrapper.d.ts +3 -3
  584. package/dist/Tooltips/TooltipWrapper.js.map +1 -1
  585. package/dist/Tooltips/index.cjs.map +1 -1
  586. package/dist/Tooltips/index.d.ts +3 -3
  587. package/dist/Tooltips/index.js.map +1 -1
  588. package/dist/assets/index.cjs.map +1 -1
  589. package/dist/assets/index.d.ts +12 -12
  590. package/dist/assets/index.js.map +1 -1
  591. package/dist/common/ActionWithin.cjs.map +1 -1
  592. package/dist/common/ActionWithin.d.ts +2 -2
  593. package/dist/common/ActionWithin.js.map +1 -1
  594. package/dist/common/ClickOutside.cjs.map +1 -1
  595. package/dist/common/ClickOutside.d.ts +1 -1
  596. package/dist/common/ClickOutside.js.map +1 -1
  597. package/dist/common/EventHandlers.cjs.map +1 -1
  598. package/dist/common/EventHandlers.d.ts +1 -1
  599. package/dist/common/EventHandlers.js.map +1 -1
  600. package/dist/common/FocusOutside.cjs.map +1 -1
  601. package/dist/common/FocusOutside.d.ts +1 -1
  602. package/dist/common/FocusOutside.js.map +1 -1
  603. package/dist/common/FocusVisible.cjs.map +1 -1
  604. package/dist/common/FocusVisible.d.ts +2 -2
  605. package/dist/common/FocusVisible.js.map +1 -1
  606. package/dist/common/InputStyling.cjs.map +1 -1
  607. package/dist/common/InputStyling.d.ts +1 -1
  608. package/dist/common/InputStyling.js.map +1 -1
  609. package/dist/common/StackState.cjs.map +1 -1
  610. package/dist/common/StackState.d.ts +7 -7
  611. package/dist/common/StackState.js.map +1 -1
  612. package/dist/common/index.cjs.map +1 -1
  613. package/dist/common/index.d.ts +6 -6
  614. package/dist/common/index.js.map +1 -1
  615. package/dist/custom.d.ts +4 -4
  616. package/dist/declarations.d.ts +1 -1
  617. package/dist/hooks/useClickOutside.cjs +2 -2
  618. package/dist/hooks/useClickOutside.cjs.map +1 -1
  619. package/dist/hooks/useClickOutside.d.ts +5 -5
  620. package/dist/hooks/useClickOutside.js +2 -2
  621. package/dist/hooks/useClickOutside.js.map +1 -1
  622. package/dist/icons/contenticons/ContentIcons.cjs.map +1 -1
  623. package/dist/icons/contenticons/ContentIcons.d.ts +170 -170
  624. package/dist/icons/contenticons/ContentIcons.js.map +1 -1
  625. package/dist/icons/index.cjs +4 -4
  626. package/dist/icons/index.cjs.map +1 -1
  627. package/dist/icons/index.d.ts +25 -25
  628. package/dist/icons/index.js +4 -4
  629. package/dist/icons/index.js.map +1 -1
  630. package/dist/icons/systemicons/SystemIcons.cjs.map +1 -1
  631. package/dist/icons/systemicons/SystemIcons.d.ts +183 -183
  632. package/dist/icons/systemicons/SystemIcons.js.map +1 -1
  633. package/dist/index.cjs.map +1 -1
  634. package/dist/index.d.ts +43 -43
  635. package/dist/index.js.map +1 -1
  636. package/dist/styles/breakpoints.cjs.map +1 -1
  637. package/dist/styles/breakpoints.d.ts +8 -8
  638. package/dist/styles/breakpoints.js.map +1 -1
  639. package/dist/styles/colors.cjs.map +1 -1
  640. package/dist/styles/colors.d.ts +83 -83
  641. package/dist/styles/colors.js.map +1 -1
  642. package/dist/styles/focus-styles.cjs.map +1 -1
  643. package/dist/styles/focus-styles.d.ts +2 -2
  644. package/dist/styles/focus-styles.js.map +1 -1
  645. package/dist/styles/global.cjs.map +1 -1
  646. package/dist/styles/global.d.ts +2 -2
  647. package/dist/styles/global.js.map +1 -1
  648. package/dist/styles/index.cjs.map +1 -1
  649. package/dist/styles/index.d.ts +23 -23
  650. package/dist/styles/index.js.map +1 -1
  651. package/dist/styles/shadowstyles.cjs.map +1 -1
  652. package/dist/styles/shadowstyles.d.ts +7 -7
  653. package/dist/styles/shadowstyles.js.map +1 -1
  654. package/dist/styles/typography.cjs.map +1 -1
  655. package/dist/styles/typography.d.ts +89 -89
  656. package/dist/styles/typography.js.map +1 -1
  657. package/dist/styles/z-indexes.cjs.map +1 -1
  658. package/dist/styles/z-indexes.d.ts +15 -15
  659. package/dist/styles/z-indexes.js.map +1 -1
  660. package/dist/types.cjs.map +1 -1
  661. package/dist/types.d.ts +70 -70
  662. package/dist/types.js.map +1 -1
  663. package/package.json +107 -107
  664. package/dist/Card/Card.cjs.map +0 -1
  665. package/dist/Card/Card.js.map +0 -1
  666. package/dist/Card/CardBottomSection.cjs.map +0 -1
  667. package/dist/Card/CardBottomSection.js.map +0 -1
  668. package/dist/Card/CardMiddleSection.cjs.map +0 -1
  669. package/dist/Card/CardMiddleSection.js.map +0 -1
  670. package/dist/Card/CardTopSection.cjs.map +0 -1
  671. package/dist/Card/CardTopSection.js.map +0 -1
package/README.md CHANGED
@@ -1,38 +1,38 @@
1
- # Laerdal LIFE component library for React
2
-
3
- [![Build Status](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_apis/build/status/laerdal.laerdal-component-library?branchName=master)](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_build/latest?definitionId=57&branchName=master)
4
-
5
- ## How to use @laerdal/life-react-components
6
-
7
- - Add the package to your project:
8
- - `cd /path/to/your-app`
9
- - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
10
- - Import components in your code:
11
- - `import { Button } from '@laerdal/life-react-components'`
12
- - or icons:
13
- - `import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'`
14
-
15
- ## How to use a local version of @laerdal/life-react-components
16
-
17
- - Pull the latest version of @laerdal/life-react-components from Bitbucket.
18
- - If you have not already, add @laerdal/life-react-components to your application:
19
- - `cd /path/to/your-app`
20
- - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
21
- - Create a link from your-app to component-library
22
- - `cd /path/to/react-components`
23
- - `yarn link`
24
- - `cd /path/to/your-app`
25
- - `yarn link “@laerdal/life-react-components”`
26
- - `yarn`
27
-
28
- ### Invalid hook call warning
29
-
30
- When you start your application, you might get an “Invalid Hook Call Warning”. This is because both component-library and your-app loads their own version of react and react dom. Make sure component-library uses the same version of react and react-dom as your-app uses:
31
-
32
- - `npm add npm-link-shared -g`
33
- - `cd /path/to/your-app`
34
- - `sudo npm-link-shared /path/to/react-components/node_modules . react react-dom`
35
-
36
- ## Storybook
37
-
38
- _Storybook_ is added to the component library package to demo and document the components. Clone the repository, run `yarn`, then `cd apps/storybook` and run `yarn storybook` to start it locally.
1
+ # Laerdal LIFE component library for React
2
+
3
+ [![Build Status](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_apis/build/status/laerdal.laerdal-component-library?branchName=master)](https://dev.azure.com/enable-laerdal/MyLaerdal%20Portal/_build/latest?definitionId=57&branchName=master)
4
+
5
+ ## How to use @laerdal/life-react-components
6
+
7
+ - Add the package to your project:
8
+ - `cd /path/to/your-app`
9
+ - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
10
+ - Import components in your code:
11
+ - `import { Button } from '@laerdal/life-react-components'`
12
+ - or icons:
13
+ - `import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'`
14
+
15
+ ## How to use a local version of @laerdal/life-react-components
16
+
17
+ - Pull the latest version of @laerdal/life-react-components from Bitbucket.
18
+ - If you have not already, add @laerdal/life-react-components to your application:
19
+ - `cd /path/to/your-app`
20
+ - `yarn add @laerdal/life-react-components` or `npm add @laerdal/life-react-components`
21
+ - Create a link from your-app to component-library
22
+ - `cd /path/to/react-components`
23
+ - `yarn link`
24
+ - `cd /path/to/your-app`
25
+ - `yarn link “@laerdal/life-react-components”`
26
+ - `yarn`
27
+
28
+ ### Invalid hook call warning
29
+
30
+ When you start your application, you might get an “Invalid Hook Call Warning”. This is because both component-library and your-app loads their own version of react and react dom. Make sure component-library uses the same version of react and react-dom as your-app uses:
31
+
32
+ - `npm add npm-link-shared -g`
33
+ - `cd /path/to/your-app`
34
+ - `sudo npm-link-shared /path/to/react-components/node_modules . react react-dom`
35
+
36
+ ## Storybook
37
+
38
+ _Storybook_ is added to the component library package to demo and document the components. Clone the repository, run `yarn`, then `cd apps/storybook` and run `yarn storybook` to start it locally.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","margin","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEU,iCAVlC;AAWqB,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAACS,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAeID,QAAQ,gBACJ,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBId,QAAQ,iBACR,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAA2C,MAAA,MAAM,EAAElB,KAAK,CAACmB,MAAzD;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAanB,KAAK,CAACoB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPElB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;AACAC,EAAAA,M;;eAsCapB,a","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600","padding","margin","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;AAUA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,sBAAC,8BAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,sBAAC,2BAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEU,iCAVlC;AAWqB,MAAA,SAAS,EAAE,CAACR,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAIO,eAAMC,YAAN,CAAmBR,IAAnB,EAA+C;AAACS,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOV;AAAP,QAbF,EAeID,QAAQ,gBACJ,qBAAC,kBAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEY,SAAOC,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,qBAAC,kBAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAED,SAAOE,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBId,QAAQ,iBACR,qBAAC,yBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACkB,OAAlC;AAA2C,MAAA,MAAM,EAAElB,KAAK,CAACmB,MAAzD;AAAA,6BACE,qBAAC,YAAD;AAAA,kBAAanB,KAAK,CAACoB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPElB,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAW,EAAAA,O;AACAC,EAAAA,M;;eAsCapB,a","sourcesContent":["import React from 'react';\r\nimport {COLORS, ComponentM, ComponentS} from '..';\r\nimport {SystemIcons} from '../icons';\r\nimport {AccordionItemProps} from './AccordionMenu';\r\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\ninterface AccordionItemPropsInner extends AccordionItemProps {\r\n onSelect: (id: string) => void;\r\n isActive: boolean;\r\n isLast: boolean;\r\n padding?: string;\r\n margin?: string;\r\n}\r\n\r\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\r\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\r\n\r\n return (\r\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\r\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\r\n onClick={() => {\r\n if (!disabled) {\r\n onSelect(id);\r\n }\r\n }}\r\n onKeyDown={(e: any) => {\r\n if (e.key === 'Enter')\r\n onSelect(id);\r\n }}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\r\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\r\n <span>{title}</span>\r\n {\r\n isActive\r\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\r\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\r\n }\r\n </ItemHeaderContainer>\r\n {\r\n isActive &&\r\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\r\n <ComponentS>{props.children}</ComponentS>\r\n </ItemBodyContainer>\r\n }\r\n </AccordionItemContainer>\r\n );\r\n};\r\n\r\nexport default AccordionItem;\r\n"],"file":"AccordionItem.cjs"}
@@ -1,11 +1,11 @@
1
- import React from 'react';
2
- import { AccordionItemProps } from './AccordionMenu';
3
- interface AccordionItemPropsInner extends AccordionItemProps {
4
- onSelect: (id: string) => void;
5
- isActive: boolean;
6
- isLast: boolean;
7
- padding?: string;
8
- margin?: string;
9
- }
10
- declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
11
- export default AccordionItem;
1
+ import React from 'react';
2
+ import { AccordionItemProps } from './AccordionMenu';
3
+ interface AccordionItemPropsInner extends AccordionItemProps {
4
+ onSelect: (id: string) => void;
5
+ isActive: boolean;
6
+ isLast: boolean;
7
+ padding?: string;
8
+ margin?: string;
9
+ }
10
+ declare const AccordionItem: React.FunctionComponent<AccordionItemPropsInner>;
11
+ export default AccordionItem;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","margin","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAA4BC,UAA5B,QAA6C,IAA7C;AACA,SAAQC,WAAR,QAA0B,UAA1B;AAEA,SAAQC,sBAAR,EAAgCC,iBAAhC,EAAmDC,mBAAnD,QAA6E,UAA7E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAUA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEH,yBAVlC;AAWqB,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAACO,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAeID,QAAQ,gBACJ,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBIX,QAAQ,iBACR,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAA2C,MAAA,MAAM,EAAEf,KAAK,CAACgB,MAAzD;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAahB,KAAK,CAACiB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPEf,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;AACAC,EAAAA,M;;AAsCF,eAAejB,aAAf","sourcesContent":["import React from 'react';\nimport {COLORS, ComponentM, ComponentS} from '..';\nimport {SystemIcons} from '../icons';\nimport {AccordionItemProps} from './AccordionMenu';\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n onSelect: (id: string) => void;\n isActive: boolean;\n isLast: boolean;\n padding?: string;\n margin?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\n\n return (\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\n onClick={() => {\n if (!disabled) {\n onSelect(id);\n }\n }}\n onKeyDown={(e: any) => {\n if (e.key === 'Enter')\n onSelect(id);\n }}\n onMouseDown={defaultOnMouseDownHandler}\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\n <span>{title}</span>\n {\n isActive\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\n }\n </ItemHeaderContainer>\n {\n isActive &&\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\n <ComponentS>{props.children}</ComponentS>\n </ItemBodyContainer>\n }\n </AccordionItemContainer>\n );\n};\n\nexport default AccordionItem;\n"],"file":"AccordionItem.js"}
1
+ {"version":3,"sources":["../../src/Accordion/AccordionItem.tsx"],"names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","undefined","e","key","cloneElement","size","neutral_800","neutral_600","padding","margin","children"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAA4BC,UAA5B,QAA6C,IAA7C;AACA,SAAQC,WAAR,QAA0B,UAA1B;AAEA,SAAQC,sBAAR,EAAgCC,iBAAhC,EAAmDC,mBAAnD,QAA6E,UAA7E;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAUA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;AAC1G,MAAOC,EAAP,GAAgED,KAAhE,CAAOC,EAAP;AAAA,MAAWC,QAAX,GAAgEF,KAAhE,CAAWE,QAAX;AAAA,MAAqBC,QAArB,GAAgEH,KAAhE,CAAqBG,QAArB;AAAA,MAA+BC,KAA/B,GAAgEJ,KAAhE,CAA+BI,KAA/B;AAAA,MAAsCC,IAAtC,GAAgEL,KAAhE,CAAsCK,IAAtC;AAAA,MAA4CC,QAA5C,GAAgEN,KAAhE,CAA4CM,QAA5C;AAAA,MAAsDC,MAAtD,GAAgEP,KAAhE,CAAsDO,MAAtD;AAEA,sBACE,MAAC,sBAAD;AAAwB,IAAA,EAAE,EAAEN,EAA5B;AAAgC,IAAA,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;AAAA,4BACE,MAAC,mBAAD;AAAqB,MAAA,QAAQ,EAAE,CAACD,QAAD,GAAY,CAAZ,GAAgBE,SAA/C;AACqB,MAAA,OAAO,EAAE,mBAAM;AACb,YAAI,CAACF,QAAL,EAAe;AACbJ,UAAAA,QAAQ,CAACD,EAAD,CAAR;AACD;AACF,OALtB;AAMqB,MAAA,SAAS,EAAE,mBAACQ,CAAD,EAAY;AACrB,YAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EACER,QAAQ,CAACD,EAAD,CAAR;AACH,OATtB;AAUqB,MAAA,WAAW,EAAEH,yBAVlC;AAWqB,MAAA,SAAS,EAAE,CAACK,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,CAXhC;AAAA,iBAYGD,IAAI,iBAAId,KAAK,CAACoB,YAAN,CAAmBN,IAAnB,EAA+C;AAACO,QAAAA,IAAI,EAAE;AAAP,OAA/C,CAZX,eAaE;AAAA,kBAAOR;AAAP,QAbF,EAeID,QAAQ,gBACJ,KAAC,WAAD,CAAa,SAAb;AAAuB,QAAA,KAAK,EAAEX,MAAM,CAACqB,WAArC;AAAkD,QAAA,IAAI,EAAC;AAAvD,QADI,gBAEJ,KAAC,WAAD,CAAa,WAAb;AAAyB,QAAA,KAAK,EAAErB,MAAM,CAACsB,WAAvC;AAAoD,QAAA,IAAI,EAAC;AAAzD,QAjBR;AAAA,MADF,EAsBIX,QAAQ,iBACR,KAAC,iBAAD;AAAmB,MAAA,OAAO,EAAEH,KAAK,CAACe,OAAlC;AAA2C,MAAA,MAAM,EAAEf,KAAK,CAACgB,MAAzD;AAAA,6BACE,KAAC,UAAD;AAAA,kBAAahB,KAAK,CAACiB;AAAnB;AADF,MAvBJ;AAAA,IADF;AA8BD,CAjCD;;;AAPEf,EAAAA,Q;AACAC,EAAAA,Q;AACAI,EAAAA,M;AACAQ,EAAAA,O;AACAC,EAAAA,M;;AAsCF,eAAejB,aAAf","sourcesContent":["import React from 'react';\r\nimport {COLORS, ComponentM, ComponentS} from '..';\r\nimport {SystemIcons} from '../icons';\r\nimport {AccordionItemProps} from './AccordionMenu';\r\nimport {AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer} from './styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\ninterface AccordionItemPropsInner extends AccordionItemProps {\r\n onSelect: (id: string) => void;\r\n isActive: boolean;\r\n isLast: boolean;\r\n padding?: string;\r\n margin?: string;\r\n}\r\n\r\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\r\n const {id, onSelect, isActive, title, icon, disabled, isLast} = props;\r\n\r\n return (\r\n <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\r\n <ItemHeaderContainer tabIndex={!disabled ? 0 : undefined}\r\n onClick={() => {\r\n if (!disabled) {\r\n onSelect(id);\r\n }\r\n }}\r\n onKeyDown={(e: any) => {\r\n if (e.key === 'Enter')\r\n onSelect(id);\r\n }}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n className={(isActive ? 'active' : '') + (disabled ? ' disabled' : '')}>\r\n {icon && React.cloneElement(icon as React.ReactElement, {size: '24px'})}\r\n <span>{title}</span>\r\n {\r\n isActive\r\n ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\"/>\r\n : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\"/>\r\n }\r\n </ItemHeaderContainer>\r\n {\r\n isActive &&\r\n <ItemBodyContainer padding={props.padding} margin={props.margin}>\r\n <ComponentS>{props.children}</ComponentS>\r\n </ItemBodyContainer>\r\n }\r\n </AccordionItemContainer>\r\n );\r\n};\r\n\r\nexport default AccordionItem;\r\n"],"file":"AccordionItem.js"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAoBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOV,aAAa,GAAGA,aAAH,GAAmBQ,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOV,gBAAgB,GAAGA,gBAAH,GAAsBQ,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGV,cAAH,EAAmB;AACjB,UAAGa,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFX,IAAAA,QAAQ,IAAIA,QAAQ,CAACW,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,qBAAC,4BAAD;AAAA,cACGd,KAAK,CAACqB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEd,KAAK,CAAC0B,OAAN,CAAcJ,IAAd,MAAwBtB,KAAK,CAAC2B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAER,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEd,EAAAA,K;AAUAc,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA3B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;eAsEaP,a","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","React","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAoBA,IAAMA,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDC,KAAK,CAACC,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOV,aAAa,GAAGA,aAAH,GAAmBQ,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOV,gBAAgB,GAAGA,gBAAH,GAAsBQ,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGV,cAAH,EAAmB;AACjB,UAAGa,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,4CAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFX,IAAAA,QAAQ,IAAIA,QAAQ,CAACW,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,qBAAC,4BAAD;AAAA,cACGd,KAAK,CAACqB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,qBAAC,sBAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEd,KAAK,CAAC0B,OAAN,CAAcJ,IAAd,MAAwBtB,KAAK,CAAC2B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAER,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGgB,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEd,EAAAA,K;AAUAc,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA3B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;eAsEaP,a","sourcesContent":["import * as React from 'react';\r\nimport AccordionItem from './AccordionItem';\r\nimport { AccordionMenuWrapper } from './styles';\r\n\r\nexport interface AccordionProps {\r\n items: AccordionItemProps[];\r\n selectedItems?: string[];\r\n setSelectedItems?: (a: string[]) => void;\r\n onSelect?: (id: string) => void;\r\n multipleActive?: boolean;\r\n padding?: string;\r\n margin?: string;\r\n}\r\n\r\nexport interface AccordionItemProps {\r\n id: string;\r\n disabled?: boolean;\r\n title: string;\r\n icon?: React.ReactNode;\r\n children: React.ReactNode;\r\n}\r\n\r\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\r\n items,\r\n selectedItems,\r\n setSelectedItems,\r\n onSelect,\r\n multipleActive,\r\n padding,\r\n margin,\r\n }: AccordionProps) => {\r\n\r\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\r\n\r\n const getCollection = () => {\r\n return selectedItems ? selectedItems : builtinSelectedItems;\r\n };\r\n\r\n const getUpdateFunction = () => {\r\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\r\n }\r\n\r\n const onSelected = (id: string) => {\r\n const collection = getCollection();\r\n const updateFunc = getUpdateFunction();\r\n\r\n const isActive = !!collection.find(x => x == id);\r\n if(multipleActive) {\r\n if(isActive)\r\n updateFunc(collection.filter(x => x != id));\r\n \r\n else \r\n updateFunc([...collection, id]);\r\n }\r\n else\r\n updateFunc(isActive ? [] : [id]);\r\n\r\n onSelect && onSelect(id);\r\n };\r\n\r\n return (\r\n <AccordionMenuWrapper>\r\n {items.map((item) => (\r\n <AccordionItem\r\n key={item.id}\r\n disabled={item.disabled}\r\n id={item.id}\r\n title={item.title}\r\n icon={item.icon}\r\n isActive={!!getCollection().find(x => x == item.id)}\r\n isLast={items.indexOf(item) === items.length - 1}\r\n onSelect={onSelected}\r\n padding={padding}\r\n margin={margin}>\r\n {item.children}\r\n </AccordionItem>\r\n ))}\r\n </AccordionMenuWrapper>\r\n );\r\n};\r\n\r\nexport default AccordionMenu;\r\n"],"file":"AccordionMenu.cjs"}
@@ -1,19 +1,19 @@
1
- import * as React from 'react';
2
- export interface AccordionProps {
3
- items: AccordionItemProps[];
4
- selectedItems?: string[];
5
- setSelectedItems?: (a: string[]) => void;
6
- onSelect?: (id: string) => void;
7
- multipleActive?: boolean;
8
- padding?: string;
9
- margin?: string;
10
- }
11
- export interface AccordionItemProps {
12
- id: string;
13
- disabled?: boolean;
14
- title: string;
15
- icon?: React.ReactNode;
16
- children: React.ReactNode;
17
- }
18
- declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
19
- export default AccordionMenu;
1
+ import * as React from 'react';
2
+ export interface AccordionProps {
3
+ items: AccordionItemProps[];
4
+ selectedItems?: string[];
5
+ setSelectedItems?: (a: string[]) => void;
6
+ onSelect?: (id: string) => void;
7
+ multipleActive?: boolean;
8
+ padding?: string;
9
+ margin?: string;
10
+ }
11
+ export interface AccordionItemProps {
12
+ id: string;
13
+ disabled?: boolean;
14
+ title: string;
15
+ icon?: React.ReactNode;
16
+ children: React.ReactNode;
17
+ }
18
+ declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
19
+ export default AccordionMenu;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;AAoBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDV,KAAK,CAACW,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGT,cAAH,EAAmB;AACjB,UAAGY,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,KAAC,oBAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEP,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGe,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEb,EAAAA,K;AAUAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;AAsEF,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\nimport AccordionItem from './AccordionItem';\nimport { AccordionMenuWrapper } from './styles';\n\nexport interface AccordionProps {\n items: AccordionItemProps[];\n selectedItems?: string[];\n setSelectedItems?: (a: string[]) => void;\n onSelect?: (id: string) => void;\n multipleActive?: boolean;\n padding?: string;\n margin?: string;\n}\n\nexport interface AccordionItemProps {\n id: string;\n disabled?: boolean;\n title: string;\n icon?: React.ReactNode;\n children: React.ReactNode;\n}\n\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\n items,\n selectedItems,\n setSelectedItems,\n onSelect,\n multipleActive,\n padding,\n margin,\n }: AccordionProps) => {\n\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\n\n const getCollection = () => {\n return selectedItems ? selectedItems : builtinSelectedItems;\n };\n\n const getUpdateFunction = () => {\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\n }\n\n const onSelected = (id: string) => {\n const collection = getCollection();\n const updateFunc = getUpdateFunction();\n\n const isActive = !!collection.find(x => x == id);\n if(multipleActive) {\n if(isActive)\n updateFunc(collection.filter(x => x != id));\n \n else \n updateFunc([...collection, id]);\n }\n else\n updateFunc(isActive ? [] : [id]);\n\n onSelect && onSelect(id);\n };\n\n return (\n <AccordionMenuWrapper>\n {items.map((item) => (\n <AccordionItem\n key={item.id}\n disabled={item.disabled}\n id={item.id}\n title={item.title}\n icon={item.icon}\n isActive={!!getCollection().find(x => x == item.id)}\n isLast={items.indexOf(item) === items.length - 1}\n onSelect={onSelected}\n padding={padding}\n margin={margin}>\n {item.children}\n </AccordionItem>\n ))}\n </AccordionMenuWrapper>\n );\n};\n\nexport default AccordionMenu;\n"],"file":"AccordionMenu.js"}
1
+ {"version":3,"sources":["../../src/Accordion/AccordionMenu.tsx"],"names":["React","AccordionItem","AccordionMenuWrapper","AccordionMenu","items","selectedItems","setSelectedItems","onSelect","multipleActive","padding","margin","useState","builtinSelectedItems","builtinSetSelectedItems","getCollection","getUpdateFunction","onSelected","id","collection","updateFunc","isActive","find","x","filter","map","item","disabled","title","icon","indexOf","length","children"],"mappings":";;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;;;AAoBA,IAAMC,aAAsD,GAAG,SAAzDA,aAAyD,OAQuB;AAAA,MAPpBC,KAOoB,QAPpBA,KAOoB;AAAA,MANpBC,aAMoB,QANpBA,aAMoB;AAAA,MALpBC,gBAKoB,QALpBA,gBAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,cAGoB,QAHpBA,cAGoB;AAAA,MAFpBC,OAEoB,QAFpBA,OAEoB;AAAA,MADpBC,MACoB,QADpBA,MACoB;;AAEpF,wBAAwDV,KAAK,CAACW,QAAN,CAAyB,EAAzB,CAAxD;AAAA;AAAA,MAAOC,oBAAP;AAAA,MAA6BC,uBAA7B;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1B,WAAOT,aAAa,GAAGA,aAAH,GAAmBO,oBAAvC;AACD,GAFD;;AAIA,MAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AAC9B,WAAOT,gBAAgB,GAAGA,gBAAH,GAAsBO,uBAA7C;AACD,GAFD;;AAIA,MAAMG,UAAU,GAAG,SAAbA,UAAa,CAACC,EAAD,EAAgB;AACjC,QAAMC,UAAU,GAAGJ,aAAa,EAAhC;AACA,QAAMK,UAAU,GAAGJ,iBAAiB,EAApC;AAEA,QAAMK,QAAQ,GAAG,CAAC,CAACF,UAAU,CAACG,IAAX,CAAgB,UAAAC,CAAC;AAAA,aAAIA,CAAC,IAAIL,EAAT;AAAA,KAAjB,CAAnB;;AACA,QAAGT,cAAH,EAAmB;AACjB,UAAGY,QAAH,EACED,UAAU,CAACD,UAAU,CAACK,MAAX,CAAkB,UAAAD,CAAC;AAAA,eAAIA,CAAC,IAAIL,EAAT;AAAA,OAAnB,CAAD,CAAV,CADF,KAIEE,UAAU,8BAAKD,UAAL,IAAiBD,EAAjB,GAAV;AACH,KAND,MAQEE,UAAU,CAACC,QAAQ,GAAG,EAAH,GAAQ,CAACH,EAAD,CAAjB,CAAV;;AAEFV,IAAAA,QAAQ,IAAIA,QAAQ,CAACU,EAAD,CAApB;AACD,GAhBD;;AAkBA,sBACE,KAAC,oBAAD;AAAA,cACGb,KAAK,CAACoB,GAAN,CAAU,UAACC,IAAD;AAAA,0BACT,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAEA,IAAI,CAACC,QAFjB;AAGE,QAAA,EAAE,EAAED,IAAI,CAACR,EAHX;AAIE,QAAA,KAAK,EAAEQ,IAAI,CAACE,KAJd;AAKE,QAAA,IAAI,EAAEF,IAAI,CAACG,IALb;AAME,QAAA,QAAQ,EAAE,CAAC,CAACd,aAAa,GAAGO,IAAhB,CAAqB,UAAAC,CAAC;AAAA,iBAAIA,CAAC,IAAIG,IAAI,CAACR,EAAd;AAAA,SAAtB,CANd;AAOE,QAAA,MAAM,EAAEb,KAAK,CAACyB,OAAN,CAAcJ,IAAd,MAAwBrB,KAAK,CAAC0B,MAAN,GAAe,CAPjD;AAQE,QAAA,QAAQ,EAAEd,UARZ;AASE,QAAA,OAAO,EAAEP,OATX;AAUE,QAAA,MAAM,EAAEC,MAVV;AAAA,kBAWGe,IAAI,CAACM;AAXR,SACON,IAAI,CAACR,EADZ,CADS;AAAA,KAAV;AADH,IADF;AAmBD,CAzDD;;;AAjBEb,EAAAA,K;AAUAa,IAAAA,E;AACAS,IAAAA,Q;AACAC,IAAAA,K;AACAC,IAAAA,I;AACAG,IAAAA,Q;;AAbA1B,EAAAA,a;AACAC,EAAAA,gB;AACAC,EAAAA,Q;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,M;;AAsEF,eAAeP,aAAf","sourcesContent":["import * as React from 'react';\r\nimport AccordionItem from './AccordionItem';\r\nimport { AccordionMenuWrapper } from './styles';\r\n\r\nexport interface AccordionProps {\r\n items: AccordionItemProps[];\r\n selectedItems?: string[];\r\n setSelectedItems?: (a: string[]) => void;\r\n onSelect?: (id: string) => void;\r\n multipleActive?: boolean;\r\n padding?: string;\r\n margin?: string;\r\n}\r\n\r\nexport interface AccordionItemProps {\r\n id: string;\r\n disabled?: boolean;\r\n title: string;\r\n icon?: React.ReactNode;\r\n children: React.ReactNode;\r\n}\r\n\r\nconst AccordionMenu: React.FunctionComponent<AccordionProps> = ({\r\n items,\r\n selectedItems,\r\n setSelectedItems,\r\n onSelect,\r\n multipleActive,\r\n padding,\r\n margin,\r\n }: AccordionProps) => {\r\n\r\n const [builtinSelectedItems, builtinSetSelectedItems] = React.useState<string[]>([]);\r\n\r\n const getCollection = () => {\r\n return selectedItems ? selectedItems : builtinSelectedItems;\r\n };\r\n\r\n const getUpdateFunction = () => {\r\n return setSelectedItems ? setSelectedItems : builtinSetSelectedItems;\r\n }\r\n\r\n const onSelected = (id: string) => {\r\n const collection = getCollection();\r\n const updateFunc = getUpdateFunction();\r\n\r\n const isActive = !!collection.find(x => x == id);\r\n if(multipleActive) {\r\n if(isActive)\r\n updateFunc(collection.filter(x => x != id));\r\n \r\n else \r\n updateFunc([...collection, id]);\r\n }\r\n else\r\n updateFunc(isActive ? [] : [id]);\r\n\r\n onSelect && onSelect(id);\r\n };\r\n\r\n return (\r\n <AccordionMenuWrapper>\r\n {items.map((item) => (\r\n <AccordionItem\r\n key={item.id}\r\n disabled={item.disabled}\r\n id={item.id}\r\n title={item.title}\r\n icon={item.icon}\r\n isActive={!!getCollection().find(x => x == item.id)}\r\n isLast={items.indexOf(item) === items.length - 1}\r\n onSelect={onSelected}\r\n padding={padding}\r\n margin={margin}>\r\n {item.children}\r\n </AccordionItem>\r\n ))}\r\n </AccordionMenuWrapper>\r\n );\r\n};\r\n\r\nexport default AccordionMenu;\r\n"],"file":"AccordionMenu.js"}
@@ -43,7 +43,7 @@ var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObje
43
43
 
44
44
  exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
45
45
 
46
- var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
46
+ var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
47
47
 
48
48
  exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
49
49
 
@@ -51,15 +51,15 @@ var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4
51
51
 
52
52
  exports.ContentAccordionItemContent = ContentAccordionItemContent;
53
53
 
54
- var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n"])));
54
+ var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
55
55
 
56
56
  exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
57
57
 
58
- var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
58
+ var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
59
59
 
60
60
  exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
61
61
 
62
- var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
62
+ var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
63
63
 
64
64
  exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
65
65
 
@@ -67,7 +67,7 @@ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_t
67
67
 
68
68
  exports.ContentAccordionItem = ContentAccordionItem;
69
69
 
70
- var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
70
+ var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphSStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphMStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Bold, _styles.COLORS.black), ContentAccordionItemContentBody, (0, _typography.ParagraphLStyling)(_typography.ParagraphTextStyle.Regular, _styles.COLORS.black));
71
71
 
72
72
  exports.ContentAccordionWrapper = ContentAccordionWrapper;
73
73
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentTextStyle","Regular","ParagraphTextStyle","Bold","black","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","defaultOnMouseDownHandler","event","title","header","body","footer","size","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;;;;;AAEO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,iaAK5BC,eAAOC,WALqB,EAS1BD,eAAOE,WATmB,EAUfF,eAAOG,UAVQ,EAWxBC,oBAAUC,KAXc,EAejCC,mBAfiC,EAmB1BN,eAAOO,WAnBmB,EAoBfP,eAAOQ,WApBQ,EAqBxBJ,oBAAUK,MArBc,CAAhC;;;;AAyBA,IAAMC,8BAA8B,GAAGZ,0BAAOC,GAAV,6KAApC;;;;AAUA,IAAMY,8BAA8B,GAAGb,0BAAOC,GAAV,qFAApC;;;;AAEA,IAAMa,2BAA2B,GAAGd,0BAAOC,GAAV,oIAAjC;;;;AAKA,IAAMc,iCAAiC,GAAGf,0BAAOC,GAAV,qFAAvC;;;;AAEA,IAAMe,+BAA+B,GAAGhB,0BAAOC,GAAV,qFAArC;;;;AAEA,IAAMgB,iCAAiC,GAAGjB,0BAAOC,GAAV,qFAAvC;;;;AAEA,IAAMiB,oBAAoB,GAAGlB,0BAAOC,GAAV,yVAGPC,eAAOiB,WAHA,EAM3BL,2BAN2B,EAY3Bf,0BAZ2B,EAalBG,eAAOkB,WAbW,CAA1B;;;;AAoBA,IAAMC,uBAAuB,GAAGrB,0BAAOC,GAAV,6iCAIhCiB,oBAJgC,EAKLhB,eAAOiB,WALF,EAY9BpB,0BAZ8B,EAe5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CAf4B,EAkB9BT,2BAlB8B,EAsB5BC,iCAtB4B,EAuB1B,mCAAkBS,+BAAmBC,IAArC,EAA2CvB,eAAOwB,KAAlD,CAvB0B,EA0B5BV,+BA1B4B,EA2B1B,mCAAkBQ,+BAAmBD,OAArC,EAA8CrB,eAAOwB,KAArD,CA3B0B,EAoC9B3B,0BApC8B,EAuC5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CAvC4B,EA0C9BT,2BA1C8B,EA8C5BC,iCA9C4B,EA+C1B,mCAAkBS,+BAAmBC,IAArC,EAA2CvB,eAAOwB,KAAlD,CA/C0B,EAkD5BV,+BAlD4B,EAmD1B,mCAAkBQ,+BAAmBD,OAArC,EAA8CrB,eAAOwB,KAArD,CAnD0B,EA4D9B3B,0BA5D8B,EA+D5B,mCAAkBuB,+BAAmBC,OAArC,EAA8C,IAA9C,CA/D4B,EAkE9BT,2BAlE8B,EAsE5BC,iCAtE4B,EAuE1B,mCAAkBS,+BAAmBC,IAArC,EAA2CvB,eAAOwB,KAAlD,CAvE0B,EA0E5BV,+BA1E4B,EA2E1B,mCAAkBQ,+BAAmBD,OAArC,EAA8CrB,eAAOwB,KAArD,CA3E0B,CAA7B;;;;AAiGA,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AACzF,wBAA4BC,eAAMC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB,YAAM;AACpB,QAAIL,KAAK,CAACM,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACJ,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAAC1B,MAAf;AAAA,OAAnB,EAA0C2B,GAA1C,CAA8C,UAACD,IAAD;AAAA,eAAUA,IAAI,CAACE,GAAf;AAAA,OAA9C,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAI5B,MAAM,wBAAGiB,KAAK,CAACO,KAAN,CAAYK,IAAZ,CAAiB,UAACH,IAAD;AAAA,eAAU,CAAC,CAACA,IAAI,CAAC1B,MAAjB;AAAA,OAAjB,CAAH,sDAAG,kBAA2C4B,GAAxD;;AACA,UAAI5B,MAAJ,EAAY;AACVqB,QAAAA,SAAS,CAAC,CAACrB,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACiB,KAAK,CAACO,KAAP,EAAcP,KAAK,CAACM,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAJ,EAA+B;AAC7BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAACG,GAAD;AAAA,eAASA,GAAG,KAAKF,IAAI,CAACE,GAAtB;AAAA,OAAd,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIX,KAAK,CAACM,KAAV,EAAiB;AACfF,QAAAA,SAAS,4CAAKD,MAAL,IAAaM,IAAI,CAACE,GAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,GAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,CAACP,IAAD,EAAgC;AACjD,QAAMQ,QAAQ,GAAGd,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAjB;AAEA,wBACE,sBAAC,oBAAD;AAAqC,MAAA,EAAE,iBAAUF,IAAI,CAACE,GAAf,CAAvC;AAA6D,MAAA,SAAS,EAAE,GAAGO,MAAH,CAAUD,QAAQ,GAAG,SAAH,GAAe,EAAjC,EAAqCC,MAArC,CAA4CT,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAA1E,CAAxE;AAAA,8BACE,sBAAC,0BAAD;AACE,QAAA,QAAQ,EAAE,CAACL,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBK,SADjC;AAEE,QAAA,WAAW,EAAEC,iCAFf;AAGE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACX,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,SAHX;AAIE,QAAA,UAAU,EAAE,oBAACY,KAAD;AAAA,iBAAWA,KAAK,CAACV,GAAN,KAAc,OAAd,IAAyBE,WAAW,CAACJ,IAAD,CAA/C;AAAA,SAJd;AAAA,gCAKE,qBAAC,8BAAD;AAAA,oBACGT,KAAK,CAACM,KAAN,GAAcW,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,KAAb,KAAH,gBAA2B,qBAAC,kBAAD,CAAa,IAAb,KAAjD,GAAwEA,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,WAAb,KAAH,gBAAiC,qBAAC,kBAAD,CAAa,YAAb;AADpH,UALF,eAQE,qBAAC,8BAAD;AAAA,oBAAiCR,IAAI,CAACa;AAAtC,UARF;AAAA,QADF,eAWE,sBAAC,2BAAD;AAAA,mBACGb,IAAI,CAACc,MAAL,iBAAe,qBAAC,iCAAD;AAAA,oBAAoCd,IAAI,CAACc;AAAzC,UADlB,eAEE,qBAAC,+BAAD;AAAA,oBAAkCd,IAAI,CAACe;AAAvC,UAFF,EAGGf,IAAI,CAACgB,MAAL,iBAAe,qBAAC,iCAAD;AAAA,oBAAoChB,IAAI,CAACgB;AAAzC,UAHlB;AAAA,QAXF;AAAA,OAA2BhB,IAAI,CAACE,GAAhC,CADF;AAmBD,GAtBD;;AAwBA,sBAAO,qBAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,GAAGO,MAAH,2BAAclB,KAAK,CAAC0B,IAApB,qDAA4BC,YAAKC,MAAjC,EAApC;AAAA,cAAiF5B,KAAK,CAACO,KAAN,CAAYG,GAAZ,CAAgB,UAACD,IAAD;AAAA,aAAUO,UAAU,CAACP,IAAD,CAApB;AAAA,KAAhB;AAAjF,IAAP;AACD,CApDM;;;;AALLF,EAAAA,K;AAVAI,IAAAA,G;AACAW,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAX,IAAAA,Q;AACA/B,IAAAA,M;;AAKAuB,EAAAA,K;;eA0DaP,gB","sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ParagraphLStyling,\r\n ParagraphMStyling,\r\n ParagraphSStyling,\r\n ParagraphTextStyle,\r\n} from '../styles/typography';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n min-height: 48px;\r\n color: ${COLORS.neutral_600};\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background-color: ${COLORS.primary_20};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:active {\r\n color: ${COLORS.primary_800};\r\n background-color: ${COLORS.primary_100};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n display: none;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.div``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n border-top: 1px solid ${COLORS.neutral_100};\r\n\r\n &.active {\r\n ${ContentAccordionItemContent} {\r\n display: flex;\r\n }\r\n }\r\n\r\n &.disabled {\r\n ${ContentAccordionItemHeader} {\r\n color: ${COLORS.neutral_300};\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n width: 100%;\r\n position: relative;\r\n\r\n ${ContentAccordionItem}:last-child {\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n }\r\n\r\n &.small {\r\n min-width: 320px;\r\n max-width: 528px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 8px;\r\n padding: 0 8px;\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 0 8px 16px 40px;\r\n gap: 8px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n\r\n &.medium {\r\n min-width: 344px;\r\n max-width: 584px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 12px;\r\n padding: 0 12px;\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 8px 12px 24px 48px;\r\n gap: 12px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n\r\n &.large {\r\n min-width: 384px;\r\n max-width: 656px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 16px;\r\n padding: 0 16px;\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 16px 16px 32px 56px;\r\n gap: 16px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport interface ContentAccordionItem {\r\n key: string;\r\n title: string;\r\n header?: string;\r\n body: any;\r\n footer?: any;\r\n disabled?: boolean;\r\n active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps {\r\n items: ContentAccordionItem[];\r\n multi?: boolean;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\r\n const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n React.useEffect(() => {\r\n if (props.multi) {\r\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\r\n } else {\r\n let active = props.items.find((item) => !!item.active)?.key;\r\n if (active) {\r\n setOpened([active]);\r\n }\r\n }\r\n }, [props.items, props.multi]);\r\n\r\n const onItemClick = (item: ContentAccordionItem) => {\r\n if (item.disabled) return;\r\n if (opened.includes(item.key)) {\r\n setOpened(opened.filter((key) => key !== item.key));\r\n } else {\r\n if (props.multi) {\r\n setOpened([...opened, item.key]);\r\n } else {\r\n setOpened([item.key]);\r\n }\r\n }\r\n };\r\n\r\n const renderItem = (item: ContentAccordionItem) => {\r\n const isActive = opened.includes(item.key);\r\n\r\n return (\r\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n <ContentAccordionItemHeader\r\n tabIndex={!item.disabled ? 0 : undefined}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onClick={() => !item.disabled && onItemClick(item)}\r\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\r\n <ContentAccordionItemHeaderIcon>\r\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\r\n </ContentAccordionItemHeaderIcon>\r\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\r\n </ContentAccordionItemHeader>\r\n <ContentAccordionItemContent>\r\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\r\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\r\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\r\n </ContentAccordionItemContent>\r\n </ContentAccordionItem>\r\n );\r\n };\r\n\r\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"file":"ContentAccordion.cjs"}
@@ -1,27 +1,27 @@
1
- import React from 'react';
2
- import { Size } from '../types';
3
- export declare const ContentAccordionItemHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const ContentAccordionItemHeaderIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const ContentAccordionItemHeaderText: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const ContentAccordionItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare const ContentAccordionItemContentHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const ContentAccordionItemContentBody: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const ContentAccordionItemContentFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
11
- export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
12
- export interface ContentAccordionItem {
13
- key: string;
14
- title: string;
15
- header?: string;
16
- body: any;
17
- footer?: any;
18
- disabled?: boolean;
19
- active?: boolean;
20
- }
21
- export interface ContentAccordionProps {
22
- items: ContentAccordionItem[];
23
- multi?: boolean;
24
- size?: Size.Small | Size.Medium | Size.Large;
25
- }
26
- export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
27
- export default ContentAccordion;
1
+ import React from 'react';
2
+ import { Size } from '../types';
3
+ export declare const ContentAccordionItemHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const ContentAccordionItemHeaderIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const ContentAccordionItemHeaderText: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const ContentAccordionItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const ContentAccordionItemContentHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const ContentAccordionItemContentBody: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const ContentAccordionItemContentFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
10
+ export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
11
+ export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ export interface ContentAccordionItem {
13
+ key: string;
14
+ title: string;
15
+ header?: string;
16
+ body: any;
17
+ footer?: any;
18
+ disabled?: boolean;
19
+ active?: boolean;
20
+ }
21
+ export interface ContentAccordionProps {
22
+ items: ContentAccordionItem[];
23
+ multi?: boolean;
24
+ size?: Size.Small | Size.Medium | Size.Large;
25
+ }
26
+ export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
27
+ export default ContentAccordion;
@@ -9,7 +9,7 @@ import React from 'react';
9
9
  import styled from 'styled-components';
10
10
  import { Size } from '../types';
11
11
  import { SystemIcons } from '../icons';
12
- import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
12
+ import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphTextStyle } from '../styles/typography';
13
13
  import { COLORS, focusStyles } from '../styles';
14
14
  import { Z_INDEXES } from '../styles/z-indexes';
15
15
  import { defaultOnMouseDownHandler } from '../common';
@@ -17,13 +17,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
18
  export var ContentAccordionItemHeader = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n"])), COLORS.neutral_600, COLORS.primary_700, COLORS.primary_20, Z_INDEXES.hover, focusStyles, COLORS.primary_800, COLORS.primary_100, Z_INDEXES.active);
19
19
  export var ContentAccordionItemHeaderIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
20
- export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
20
+ export var ContentAccordionItemHeaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
21
21
  export var ContentAccordionItemContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n"])));
22
- export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n"])));
23
- export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
24
- export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
22
+ export var ContentAccordionItemContentHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
23
+ export var ContentAccordionItemContentBody = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
24
+ export var ContentAccordionItemContentFooter = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
25
25
  export var ContentAccordionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, COLORS.neutral_300);
26
- export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentSStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentMStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ComponentLStyling(ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, ComponentLStyling(ComponentTextStyle.Regular, null));
26
+ export var ContentAccordionWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, COLORS.neutral_100, ContentAccordionItemHeader, ComponentSStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentMStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black), ContentAccordionItemHeader, ComponentLStyling(ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black), ContentAccordionItemContentBody, ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black));
27
27
  export var ContentAccordion = function ContentAccordion(props) {
28
28
  var _props$size;
29
29
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const ContentAccordionItemHeader = styled.div`\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ${COLORS.neutral_600};\n cursor: pointer;\n\n &:hover {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_20};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n`;\n\nexport interface ContentAccordionItem {\n key: string;\n title: string;\n header?: string;\n body: any;\n footer?: any;\n disabled?: boolean;\n active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n items: ContentAccordionItem[];\n multi?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n const [opened, setOpened] = React.useState<string[]>([]);\n\n React.useEffect(() => {\n if (props.multi) {\n setOpened(props.items.filter(item => item.active).map(item => item.key));\n } else {\n let active = props.items.find(item => !!item.active)?.key;\n if (active) {\n setOpened([active]);\n }\n }\n }, [props.items, props.multi]);\n\n const onItemClick = (item: ContentAccordionItem) => {\n if (item.disabled) return;\n if (opened.includes(item.key)) {\n setOpened(opened.filter(key => key !== item.key));\n } else {\n if (props.multi) {\n setOpened([...opened, item.key]);\n } else {\n setOpened([item.key]);\n }\n }\n }\n\n const renderItem = (item: ContentAccordionItem) => {\n const isActive = opened.includes(item.key);\n\n return (\n <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader tabIndex={!item.disabled ? 0 : undefined}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => !item.disabled && onItemClick(item)}\n onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
1
+ {"version":3,"sources":["../../src/Accordion/ContentAccordion.tsx"],"names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","props","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","event","title","header","body","footer","size","Medium"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport {\r\n ComponentLStyling,\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ParagraphLStyling,\r\n ParagraphMStyling,\r\n ParagraphSStyling,\r\n ParagraphTextStyle,\r\n} from '../styles/typography';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nexport const ContentAccordionItemHeader = styled.div`\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n min-height: 48px;\r\n color: ${COLORS.neutral_600};\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background-color: ${COLORS.primary_20};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:active {\r\n color: ${COLORS.primary_800};\r\n background-color: ${COLORS.primary_100};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderIcon = styled.div`\r\n width: 24px;\r\n height: 24px;\r\n\r\n svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n`;\r\n\r\nexport const ContentAccordionItemHeaderText = styled.div``;\r\n\r\nexport const ContentAccordionItemContent = styled.div`\r\n display: none;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const ContentAccordionItemContentHeader = styled.div``;\r\n\r\nexport const ContentAccordionItemContentBody = styled.div``;\r\n\r\nexport const ContentAccordionItemContentFooter = styled.div``;\r\n\r\nexport const ContentAccordionItem = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n border-top: 1px solid ${COLORS.neutral_100};\r\n\r\n &.active {\r\n ${ContentAccordionItemContent} {\r\n display: flex;\r\n }\r\n }\r\n\r\n &.disabled {\r\n ${ContentAccordionItemHeader} {\r\n color: ${COLORS.neutral_300};\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n }\r\n`;\r\n\r\nexport const ContentAccordionWrapper = styled.div`\r\n width: 100%;\r\n position: relative;\r\n\r\n ${ContentAccordionItem}:last-child {\r\n border-bottom: 1px solid ${COLORS.neutral_100};\r\n }\r\n\r\n &.small {\r\n min-width: 320px;\r\n max-width: 528px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 8px;\r\n padding: 0 8px;\r\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 0 8px 16px 40px;\r\n gap: 8px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphSStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n\r\n &.medium {\r\n min-width: 344px;\r\n max-width: 584px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 12px;\r\n padding: 0 12px;\r\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 8px 12px 24px 48px;\r\n gap: 12px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphMStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n\r\n &.large {\r\n min-width: 384px;\r\n max-width: 656px;\r\n\r\n ${ContentAccordionItemHeader} {\r\n gap: 16px;\r\n padding: 0 16px;\r\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n ${ContentAccordionItemContent} {\r\n padding: 16px 16px 32px 56px;\r\n gap: 16px;\r\n\r\n ${ContentAccordionItemContentHeader} {\r\n ${ParagraphLStyling(ParagraphTextStyle.Bold, COLORS.black)}\r\n }\r\n\r\n ${ContentAccordionItemContentBody} {\r\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport interface ContentAccordionItem {\r\n key: string;\r\n title: string;\r\n header?: string;\r\n body: any;\r\n footer?: any;\r\n disabled?: boolean;\r\n active?: boolean;\r\n}\r\n\r\nexport interface ContentAccordionProps {\r\n items: ContentAccordionItem[];\r\n multi?: boolean;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\r\n const [opened, setOpened] = React.useState<string[]>([]);\r\n\r\n React.useEffect(() => {\r\n if (props.multi) {\r\n setOpened(props.items.filter((item) => item.active).map((item) => item.key));\r\n } else {\r\n let active = props.items.find((item) => !!item.active)?.key;\r\n if (active) {\r\n setOpened([active]);\r\n }\r\n }\r\n }, [props.items, props.multi]);\r\n\r\n const onItemClick = (item: ContentAccordionItem) => {\r\n if (item.disabled) return;\r\n if (opened.includes(item.key)) {\r\n setOpened(opened.filter((key) => key !== item.key));\r\n } else {\r\n if (props.multi) {\r\n setOpened([...opened, item.key]);\r\n } else {\r\n setOpened([item.key]);\r\n }\r\n }\r\n };\r\n\r\n const renderItem = (item: ContentAccordionItem) => {\r\n const isActive = opened.includes(item.key);\r\n\r\n return (\r\n <ContentAccordionItem key={item.key} id={`item_${item.key}`} className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\r\n <ContentAccordionItemHeader\r\n tabIndex={!item.disabled ? 0 : undefined}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onClick={() => !item.disabled && onItemClick(item)}\r\n onKeyPress={(event) => event.key === 'Enter' && onItemClick(item)}>\r\n <ContentAccordionItemHeaderIcon>\r\n {props.multi ? isActive ? <SystemIcons.Minus /> : <SystemIcons.Plus /> : isActive ? <SystemIcons.ChevronDown /> : <SystemIcons.ChevronRight />}\r\n </ContentAccordionItemHeaderIcon>\r\n <ContentAccordionItemHeaderText>{item.title}</ContentAccordionItemHeaderText>\r\n </ContentAccordionItemHeader>\r\n <ContentAccordionItemContent>\r\n {item.header && <ContentAccordionItemContentHeader>{item.header}</ContentAccordionItemContentHeader>}\r\n <ContentAccordionItemContentBody>{item.body}</ContentAccordionItemContentBody>\r\n {item.footer && <ContentAccordionItemContentFooter>{item.footer}</ContentAccordionItemContentFooter>}\r\n </ContentAccordionItemContent>\r\n </ContentAccordionItem>\r\n );\r\n };\r\n\r\n return <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>{props.items.map((item) => renderItem(item))}</ContentAccordionWrapper>;\r\n};\r\n\r\nexport default ContentAccordion;\r\n"],"file":"ContentAccordion.js"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\r\nexport {default as AccordionMenuItem} from './AccordionMenu';\r\nexport {ContentAccordion} from './ContentAccordion';\r\nexport {AccordionMenuWrapper} from './styles';\r\n"],"file":"index.cjs"}
@@ -1,4 +1,4 @@
1
- export { default as AccordionMenu } from './AccordionMenu';
2
- export { default as AccordionMenuItem } from './AccordionMenu';
3
- export { ContentAccordion } from './ContentAccordion';
4
- export { AccordionMenuWrapper } from './styles';
1
+ export { default as AccordionMenu } from './AccordionMenu';
2
+ export { default as AccordionMenuItem } from './AccordionMenu';
3
+ export { ContentAccordion } from './ContentAccordion';
4
+ export { AccordionMenuWrapper } from './styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/index.ts"],"names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,aAAnB,QAAuC,iBAAvC;AACA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,iBAA3C;AACA,SAAQC,gBAAR,QAA+B,oBAA/B;AACA,SAAQC,oBAAR,QAAmC,UAAnC","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/Accordion/index.ts"],"names":["default","AccordionMenu","AccordionMenuItem","ContentAccordion","AccordionMenuWrapper"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,aAAnB,QAAuC,iBAAvC;AACA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,iBAA3C;AACA,SAAQC,gBAAR,QAA+B,oBAA/B;AACA,SAAQC,oBAAR,QAAmC,UAAnC","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\r\nexport {default as AccordionMenuItem} from './AccordionMenu';\r\nexport {ContentAccordion} from './ContentAccordion';\r\nexport {AccordionMenuWrapper} from './styles';\r\n"],"file":"index.js"}
@@ -27,7 +27,7 @@ var AccordionItemContainer = _styledComponents.default.div(_templateObject2 || (
27
27
 
28
28
  exports.AccordionItemContainer = AccordionItemContainer;
29
29
 
30
- var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ", ";\n cursor: pointer;\n \n ", "\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active{\n color: ", ";\n }\n \n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), _styles.COLORS.neutral_20, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
30
+ var ItemHeaderContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n cursor: pointer;\n\n ", "\n\n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n :focus:not(:active) {\n ", "\n }\n\n :hover {\n background: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n :active {\n color: ", ";\n background: ", ";\n z-index: ", ";\n }\n\n &.active {\n color: ", ";\n }\n\n &.disabled {\n background: ", "!important;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ", "!important;\n }\n }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
31
31
 
32
32
  exports.ItemHeaderContainer = ItemHeaderContainer;
33
33
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","neutral_20","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AASA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,4uBAMhBI,eAAOG,UANS,EAS5B,+BAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CAT4B,EAmB1BC,mBAnB0B,EAuBdP,eAAOQ,UAvBO,EAwBnBR,eAAOS,WAxBY,EAyBjBC,oBAAUC,KAzBO,EA6BnBX,eAAOY,WA7BY,EA8BdZ,eAAOa,WA9BO,EA+BjBH,oBAAUI,MA/BO,EAmCnBd,eAAOe,WAnCY,EAuCdf,eAAOgB,KAvCO,EAwCnBhB,eAAOiB,WAxCY,EA4CjBjB,eAAOiB,WA5CU,CAAzB;;;;AAiDA,IAAMC,mBAAmB,GAAGvB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMuB,iBAAiB,GAAGxB,0BAAOC,GAAV,gJACjB,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACsB,OAAN,IAAiB,UAArB;AAAA,CADY,EAElB,UAAAtB,KAAK;AAAA,SAAIA,KAAK,CAACuB,MAAN,IAAgB,QAApB;AAAA,CAFa,EAGdrB,eAAOgB,KAHO,CAAvB","sourcesContent":["import styled, {css} from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const AccordionMenuWrapper = styled.div`\n min-width: 320px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean; }>`\n width: 100%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\n`;\n\n\nexport const ItemHeaderContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px 11px 16px;\n background: ${COLORS.neutral_20};\n cursor: pointer;\n \n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n \n \n svg:last-child {\n margin-left: auto;\n }\n outline: none;\n\n\n :focus:not(:active){\n ${focusStyles}\n }\n\n :hover {\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n :active {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.active};\n }\n\n &.active{\n color: ${COLORS.neutral_800};\n }\n \n &.disabled {\n background: ${COLORS.white}!important;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n svg {\n color: ${COLORS.neutral_300}!important;\n }\n }\n`;\n\nexport const HeaderIconContainer = styled.div`\n margin-left: auto;\n`;\n\nexport const ItemBodyContainer = styled.div<{padding?: string; margin?: string}>`\n padding: ${props => props.padding || '0px 16px'};\n margin: ${props => props.margin || '12px 0'};\n background: ${COLORS.white};\n`;\n"],"file":"styles.cjs"}
1
+ {"version":3,"sources":["../../src/Accordion/styles.ts"],"names":["AccordionMenuWrapper","styled","div","AccordionItemContainer","props","displaySeparator","COLORS","neutral_100","ItemHeaderContainer","ComponentTextStyle","Regular","neutral_600","focusStyles","primary_20","primary_700","Z_INDEXES","hover","primary_800","primary_100","active","neutral_800","white","neutral_300","HeaderIconContainer","ItemBodyContainer","padding","margin"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,kLAA1B;;;;AAOA,IAAMC,sBAAsB,GAAGF,0BAAOC,GAAV,wMAKhB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,gBAAN,uBAAsCC,eAAOC,WAA7C,IAA6D,EAAzE;AAAA,CALgB,CAA5B;;;;AAQA,IAAMC,mBAAmB,GAAGP,0BAAOC,GAAV,2sBAQ5B,+BAAkBO,2BAAmBC,OAArC,EAA8CJ,eAAOK,WAArD,CAR4B,EAgB1BC,mBAhB0B,EAoBdN,eAAOO,UApBO,EAqBnBP,eAAOQ,WArBY,EAsBjBC,oBAAUC,KAtBO,EA0BnBV,eAAOW,WA1BY,EA2BdX,eAAOY,WA3BO,EA4BjBH,oBAAUI,MA5BO,EAgCnBb,eAAOc,WAhCY,EAoCdd,eAAOe,KApCO,EAqCnBf,eAAOgB,WArCY,EAyCjBhB,eAAOgB,WAzCU,CAAzB;;;;AA8CA,IAAMC,mBAAmB,GAAGtB,0BAAOC,GAAV,6GAAzB;;;;AAIA,IAAMsB,iBAAiB,GAAGvB,0BAAOC,GAAV,gJACjB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACqB,OAAN,IAAiB,UAA5B;AAAA,CADiB,EAElB,UAACrB,KAAD;AAAA,SAAWA,KAAK,CAACsB,MAAN,IAAgB,QAA3B;AAAA,CAFkB,EAGdpB,eAAOe,KAHO,CAAvB","sourcesContent":["import styled, { css } from 'styled-components';\r\nimport { COLORS, ComponentMStyling, ComponentTextStyle, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\n\r\nexport const AccordionMenuWrapper = styled.div`\r\n min-width: 320px;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n`;\r\n\r\nexport const AccordionItemContainer = styled.div<{ displaySeparator: boolean }>`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n border-bottom: ${(props) => (props.displaySeparator ? `1px solid ${COLORS.neutral_100}` : '')};\r\n`;\r\n\r\nexport const ItemHeaderContainer = styled.div`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 16px 11px 16px;\r\n cursor: pointer;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n svg:last-child {\r\n margin-left: auto;\r\n }\r\n outline: none;\r\n\r\n :focus:not(:active) {\r\n ${focusStyles}\r\n }\r\n\r\n :hover {\r\n background: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n z-index: ${Z_INDEXES.hover};\r\n }\r\n\r\n :active {\r\n color: ${COLORS.primary_800};\r\n background: ${COLORS.primary_100};\r\n z-index: ${Z_INDEXES.active};\r\n }\r\n\r\n &.active {\r\n color: ${COLORS.neutral_800};\r\n }\r\n\r\n &.disabled {\r\n background: ${COLORS.white}!important;\r\n color: ${COLORS.neutral_300};\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n svg {\r\n color: ${COLORS.neutral_300}!important;\r\n }\r\n }\r\n`;\r\n\r\nexport const HeaderIconContainer = styled.div`\r\n margin-left: auto;\r\n`;\r\n\r\nexport const ItemBodyContainer = styled.div<{ padding?: string; margin?: string }>`\r\n padding: ${(props) => props.padding || '0px 16px'};\r\n margin: ${(props) => props.margin || '12px 0'};\r\n background: ${COLORS.white};\r\n`;\r\n"],"file":"styles.cjs"}