@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.12

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 (480) hide show
  1. package/dist/js/accordion.js +5 -0
  2. package/dist/js/accordion.js.map +1 -0
  3. package/dist/js/alert.js +5 -0
  4. package/dist/js/alert.js.map +1 -0
  5. package/dist/js/carousel.js +5 -0
  6. package/dist/js/carousel.js.map +1 -0
  7. package/dist/js/component/accordion.cjs.js +5 -0
  8. package/dist/js/component/accordion.cjs.js.map +1 -0
  9. package/dist/js/component/accordion.es.js +5 -0
  10. package/dist/js/component/accordion.es.js.map +1 -0
  11. package/dist/js/component/accordion.iife.js +5 -0
  12. package/dist/js/component/accordion.iife.js.map +1 -0
  13. package/dist/js/component/alert.cjs.js +5 -0
  14. package/dist/js/component/alert.cjs.js.map +1 -0
  15. package/dist/js/component/alert.es.js +5 -0
  16. package/dist/js/component/alert.es.js.map +1 -0
  17. package/dist/js/component/alert.iife.js +5 -0
  18. package/dist/js/component/alert.iife.js.map +1 -0
  19. package/dist/js/component/carousel.cjs.js +5 -0
  20. package/dist/js/component/carousel.cjs.js.map +1 -0
  21. package/dist/js/component/carousel.es.js +5 -0
  22. package/dist/js/component/carousel.es.js.map +1 -0
  23. package/dist/js/component/carousel.iife.js +5 -0
  24. package/dist/js/component/carousel.iife.js.map +1 -0
  25. package/dist/js/generator/accordion.cjs.js +5 -0
  26. package/dist/js/generator/accordion.cjs.js.map +1 -0
  27. package/dist/js/generator/accordion.es.js +5 -0
  28. package/dist/js/generator/accordion.es.js.map +1 -0
  29. package/dist/js/generator/accordion.iife.js +5 -0
  30. package/dist/js/generator/accordion.iife.js.map +1 -0
  31. package/dist/js/generator/alert.cjs.js +5 -0
  32. package/dist/js/generator/alert.cjs.js.map +1 -0
  33. package/dist/js/generator/alert.es.js +5 -0
  34. package/dist/js/generator/alert.es.js.map +1 -0
  35. package/dist/js/generator/alert.iife.js +5 -0
  36. package/dist/js/generator/alert.iife.js.map +1 -0
  37. package/dist/js/generator/carousel.cjs.js +5 -0
  38. package/dist/js/generator/carousel.cjs.js.map +1 -0
  39. package/dist/js/generator/carousel.es.js +5 -0
  40. package/dist/js/generator/carousel.es.js.map +1 -0
  41. package/dist/js/generator/carousel.iife.js +5 -0
  42. package/dist/js/generator/carousel.iife.js.map +1 -0
  43. package/dist/js/generator/navigation.cjs.js +3 -0
  44. package/dist/js/generator/navigation.cjs.js.map +1 -0
  45. package/dist/js/generator/navigation.es.js +3 -0
  46. package/dist/js/generator/navigation.es.js.map +1 -0
  47. package/dist/js/generator/navigation.iife.js +3 -0
  48. package/dist/js/generator/navigation.iife.js.map +1 -0
  49. package/dist/js/graupl.js +9 -0
  50. package/dist/js/graupl.js.map +1 -0
  51. package/dist/js/navigation.js +3 -0
  52. package/dist/js/navigation.js.map +1 -0
  53. package/package.json +24 -14
  54. package/.browserslistrc +0 -3
  55. package/.czrc +0 -3
  56. package/.devcontainer/devcontainer.json +0 -221
  57. package/.editorconfig +0 -13
  58. package/.env +0 -3
  59. package/.github/CODE_OF_CONDUCT.md +0 -73
  60. package/.github/COMMIT_CONVENTION.md +0 -17
  61. package/.github/CONTRIBUTING.md +0 -86
  62. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -30
  63. package/.github/ISSUE_TEMPLATE/documentation.md +0 -20
  64. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  65. package/.github/SECURITY.md +0 -26
  66. package/.github/dependabot.yml +0 -17
  67. package/.github/pull_request_template.md +0 -5
  68. package/.github/workflows/codeql-analysis.yml +0 -71
  69. package/.github/workflows/docs.yml +0 -66
  70. package/.github/workflows/prerelease.yml +0 -125
  71. package/.github/workflows/release.yml +0 -111
  72. package/.github/workflows/test.yml +0 -78
  73. package/.husky/commit-msg +0 -3
  74. package/.husky/pre-commit +0 -4
  75. package/.prettierignore +0 -12
  76. package/.stylelintignore +0 -9
  77. package/.versionrc.cjs +0 -73
  78. package/.vscode/settings.json +0 -10
  79. package/CHANGELOG.md +0 -559
  80. package/build.js +0 -9
  81. package/combine-at-rules.cjs +0 -61
  82. package/commitlint.config.js +0 -5
  83. package/container/.env +0 -26
  84. package/container/build/app.dockerfile +0 -41
  85. package/container/docker-compose.yml +0 -27
  86. package/dist/js/graupl.cjs.js +0 -7
  87. package/dist/js/graupl.esm.js +0 -2561
  88. package/dist/js/graupl.iife.js +0 -7
  89. package/docs/.vitepress/config.js +0 -108
  90. package/docs/.vitepress/theme/custom.scss +0 -35
  91. package/docs/.vitepress/theme/index.js +0 -4
  92. package/docs/compiling-graupl.md +0 -57
  93. package/docs/components/alert.md +0 -130
  94. package/docs/components/button.md +0 -84
  95. package/docs/components/card.md +0 -369
  96. package/docs/components/index.md +0 -1
  97. package/docs/components/inputgroup.md +0 -159
  98. package/docs/components/menu.md +0 -326
  99. package/docs/components/navigation.md +0 -158
  100. package/docs/content.md +0 -237
  101. package/docs/defaults.md +0 -121
  102. package/docs/forms.md +0 -79
  103. package/docs/functions.md +0 -9
  104. package/docs/getting-started.md +0 -1
  105. package/docs/index.md +0 -1
  106. package/docs/introduction.md +0 -25
  107. package/docs/layout.md +0 -200
  108. package/docs/mixins.md +0 -47
  109. package/docs/state.md +0 -67
  110. package/docs/theme.md +0 -258
  111. package/docs/utilities/alignment.md +0 -411
  112. package/docs/utilities/background.md +0 -192
  113. package/docs/utilities/border.md +0 -268
  114. package/docs/utilities/color.md +0 -348
  115. package/docs/utilities/container.md +0 -3
  116. package/docs/utilities/display.md +0 -3
  117. package/docs/utilities/flex.md +0 -3
  118. package/docs/utilities/gradient.md +0 -3
  119. package/docs/utilities/height.md +0 -3
  120. package/docs/utilities/inset.md +0 -3
  121. package/docs/utilities/justification.md +0 -3
  122. package/docs/utilities/list.md +0 -3
  123. package/docs/utilities/order.md +0 -3
  124. package/docs/utilities/position.md +0 -3
  125. package/docs/utilities/ratio.md +0 -3
  126. package/docs/utilities/responsive-classes.md +0 -3
  127. package/docs/utilities/spacing.md +0 -3
  128. package/docs/utilities/typography.md +0 -3
  129. package/docs/utilities/visibility.md +0 -3
  130. package/docs/utilities/visually-hidden.md +0 -3
  131. package/docs/utilities/width.md +0 -3
  132. package/docs/utilities/z-index.md +0 -3
  133. package/docs/utilities.md +0 -357
  134. package/eslint.config.js +0 -74
  135. package/favicon.ico +0 -0
  136. package/index.html +0 -1214
  137. package/index.js +0 -12
  138. package/lint-staged.config.js +0 -6
  139. package/logo.svg +0 -296
  140. package/packages/core/build.js +0 -9
  141. package/packages/core/dist/css/base/button.css +0 -2
  142. package/packages/core/dist/css/base/button.css.map +0 -1
  143. package/packages/core/dist/css/base/form.css +0 -2
  144. package/packages/core/dist/css/base/form.css.map +0 -1
  145. package/packages/core/dist/css/base/link.css +0 -2
  146. package/packages/core/dist/css/base/link.css.map +0 -1
  147. package/packages/core/dist/css/base/table.css +0 -2
  148. package/packages/core/dist/css/base/table.css.map +0 -1
  149. package/packages/core/dist/css/base.css +0 -2
  150. package/packages/core/dist/css/base.css.map +0 -1
  151. package/packages/core/dist/css/component/accordion.css +0 -5
  152. package/packages/core/dist/css/component/accordion.css.map +0 -1
  153. package/packages/core/dist/css/component/alert.css +0 -2
  154. package/packages/core/dist/css/component/alert.css.map +0 -1
  155. package/packages/core/dist/css/component/card.css +0 -2
  156. package/packages/core/dist/css/component/card.css.map +0 -1
  157. package/packages/core/dist/css/component/carousel.css +0 -2
  158. package/packages/core/dist/css/component/carousel.css.map +0 -1
  159. package/packages/core/dist/css/component/input-group.css +0 -2
  160. package/packages/core/dist/css/component/input-group.css.map +0 -1
  161. package/packages/core/dist/css/component/list.css +0 -2
  162. package/packages/core/dist/css/component/list.css.map +0 -1
  163. package/packages/core/dist/css/component/menu.css +0 -2
  164. package/packages/core/dist/css/component/menu.css.map +0 -1
  165. package/packages/core/dist/css/component/navigation.css +0 -2
  166. package/packages/core/dist/css/component/navigation.css.map +0 -1
  167. package/packages/core/dist/css/component.css +0 -5
  168. package/packages/core/dist/css/component.css.map +0 -1
  169. package/packages/core/dist/css/graupl.css +0 -5
  170. package/packages/core/dist/css/graupl.css.map +0 -1
  171. package/packages/core/dist/css/init.css +0 -2
  172. package/packages/core/dist/css/init.css.map +0 -1
  173. package/packages/core/dist/css/layout/columns.css +0 -2
  174. package/packages/core/dist/css/layout/columns.css.map +0 -1
  175. package/packages/core/dist/css/layout/container.css +0 -2
  176. package/packages/core/dist/css/layout/container.css.map +0 -1
  177. package/packages/core/dist/css/layout/flex-columns.css +0 -2
  178. package/packages/core/dist/css/layout/flex-columns.css.map +0 -1
  179. package/packages/core/dist/css/layout.css +0 -5
  180. package/packages/core/dist/css/layout.css.map +0 -1
  181. package/packages/core/dist/css/normalize.css +0 -2
  182. package/packages/core/dist/css/normalize.css.map +0 -1
  183. package/packages/core/dist/css/state/focus.css +0 -2
  184. package/packages/core/dist/css/state/focus.css.map +0 -1
  185. package/packages/core/dist/css/state.css +0 -2
  186. package/packages/core/dist/css/state.css.map +0 -1
  187. package/packages/core/dist/css/theme/color.css +0 -2
  188. package/packages/core/dist/css/theme/color.css.map +0 -1
  189. package/packages/core/dist/css/theme/typography.css +0 -2
  190. package/packages/core/dist/css/theme/typography.css.map +0 -1
  191. package/packages/core/dist/css/theme.css +0 -2
  192. package/packages/core/dist/css/theme.css.map +0 -1
  193. package/packages/core/dist/css/utilities/alignment.css +0 -2
  194. package/packages/core/dist/css/utilities/alignment.css.map +0 -1
  195. package/packages/core/dist/css/utilities/background.css +0 -2
  196. package/packages/core/dist/css/utilities/background.css.map +0 -1
  197. package/packages/core/dist/css/utilities/border.css +0 -2
  198. package/packages/core/dist/css/utilities/border.css.map +0 -1
  199. package/packages/core/dist/css/utilities/color.css +0 -2
  200. package/packages/core/dist/css/utilities/color.css.map +0 -1
  201. package/packages/core/dist/css/utilities/container.css +0 -2
  202. package/packages/core/dist/css/utilities/container.css.map +0 -1
  203. package/packages/core/dist/css/utilities/display.css +0 -2
  204. package/packages/core/dist/css/utilities/display.css.map +0 -1
  205. package/packages/core/dist/css/utilities/flex.css +0 -2
  206. package/packages/core/dist/css/utilities/flex.css.map +0 -1
  207. package/packages/core/dist/css/utilities/gradient.css +0 -2
  208. package/packages/core/dist/css/utilities/gradient.css.map +0 -1
  209. package/packages/core/dist/css/utilities/height.css +0 -2
  210. package/packages/core/dist/css/utilities/height.css.map +0 -1
  211. package/packages/core/dist/css/utilities/inset.css +0 -2
  212. package/packages/core/dist/css/utilities/inset.css.map +0 -1
  213. package/packages/core/dist/css/utilities/justification.css +0 -2
  214. package/packages/core/dist/css/utilities/justification.css.map +0 -1
  215. package/packages/core/dist/css/utilities/list.css +0 -2
  216. package/packages/core/dist/css/utilities/list.css.map +0 -1
  217. package/packages/core/dist/css/utilities/order.css +0 -2
  218. package/packages/core/dist/css/utilities/order.css.map +0 -1
  219. package/packages/core/dist/css/utilities/position.css +0 -2
  220. package/packages/core/dist/css/utilities/position.css.map +0 -1
  221. package/packages/core/dist/css/utilities/ratio.css +0 -2
  222. package/packages/core/dist/css/utilities/ratio.css.map +0 -1
  223. package/packages/core/dist/css/utilities/spacing.css +0 -2
  224. package/packages/core/dist/css/utilities/spacing.css.map +0 -1
  225. package/packages/core/dist/css/utilities/typography.css +0 -2
  226. package/packages/core/dist/css/utilities/typography.css.map +0 -1
  227. package/packages/core/dist/css/utilities/visibility.css +0 -2
  228. package/packages/core/dist/css/utilities/visibility.css.map +0 -1
  229. package/packages/core/dist/css/utilities/visually-hidden.css +0 -2
  230. package/packages/core/dist/css/utilities/visually-hidden.css.map +0 -1
  231. package/packages/core/dist/css/utilities/width.css +0 -2
  232. package/packages/core/dist/css/utilities/width.css.map +0 -1
  233. package/packages/core/dist/css/utilities/z-index.css +0 -2
  234. package/packages/core/dist/css/utilities/z-index.css.map +0 -1
  235. package/packages/core/dist/css/utilities.css +0 -2
  236. package/packages/core/dist/css/utilities.css.map +0 -1
  237. package/packages/core/package.json +0 -58
  238. package/packages/core/scss/base/button.scss +0 -3
  239. package/packages/core/scss/base/form.scss +0 -3
  240. package/packages/core/scss/base/link.scss +0 -3
  241. package/packages/core/scss/base/table.scss +0 -3
  242. package/packages/core/scss/base.scss +0 -3
  243. package/packages/core/scss/component/accordion.scss +0 -3
  244. package/packages/core/scss/component/alert.scss +0 -3
  245. package/packages/core/scss/component/card.scss +0 -3
  246. package/packages/core/scss/component/carousel.scss +0 -3
  247. package/packages/core/scss/component/input-group.scss +0 -3
  248. package/packages/core/scss/component/list.scss +0 -3
  249. package/packages/core/scss/component/menu.scss +0 -3
  250. package/packages/core/scss/component/navigation.scss +0 -3
  251. package/packages/core/scss/component.scss +0 -3
  252. package/packages/core/scss/graupl.scss +0 -3
  253. package/packages/core/scss/init.scss +0 -3
  254. package/packages/core/scss/layout/columns.scss +0 -3
  255. package/packages/core/scss/layout/container.scss +0 -3
  256. package/packages/core/scss/layout/flex-columns.scss +0 -3
  257. package/packages/core/scss/layout.scss +0 -3
  258. package/packages/core/scss/normalize.scss +0 -3
  259. package/packages/core/scss/state/focus.scss +0 -3
  260. package/packages/core/scss/state.scss +0 -3
  261. package/packages/core/scss/theme/color.scss +0 -3
  262. package/packages/core/scss/theme/typography.scss +0 -3
  263. package/packages/core/scss/theme.scss +0 -3
  264. package/packages/core/scss/utilities/alignment.scss +0 -3
  265. package/packages/core/scss/utilities/background.scss +0 -3
  266. package/packages/core/scss/utilities/border.scss +0 -3
  267. package/packages/core/scss/utilities/color.scss +0 -3
  268. package/packages/core/scss/utilities/container.scss +0 -3
  269. package/packages/core/scss/utilities/display.scss +0 -3
  270. package/packages/core/scss/utilities/flex.scss +0 -3
  271. package/packages/core/scss/utilities/gradient.scss +0 -3
  272. package/packages/core/scss/utilities/height.scss +0 -3
  273. package/packages/core/scss/utilities/inset.scss +0 -3
  274. package/packages/core/scss/utilities/justification.scss +0 -3
  275. package/packages/core/scss/utilities/list.scss +0 -3
  276. package/packages/core/scss/utilities/order.scss +0 -3
  277. package/packages/core/scss/utilities/position.scss +0 -3
  278. package/packages/core/scss/utilities/ratio.scss +0 -3
  279. package/packages/core/scss/utilities/spacing.scss +0 -3
  280. package/packages/core/scss/utilities/typography.scss +0 -3
  281. package/packages/core/scss/utilities/visibility.scss +0 -3
  282. package/packages/core/scss/utilities/visually-hidden.scss +0 -3
  283. package/packages/core/scss/utilities/width.scss +0 -3
  284. package/packages/core/scss/utilities/z-index.scss +0 -3
  285. package/packages/core/scss/utilities.scss +0 -3
  286. package/packages/core/src/js/accordion/Accordion.js +0 -1163
  287. package/packages/core/src/js/accordion/AccordionItem.js +0 -496
  288. package/packages/core/src/js/accordion/index.js +0 -10
  289. package/packages/core/src/js/alert/Alert.js +0 -581
  290. package/packages/core/src/js/alert/index.js +0 -11
  291. package/packages/core/src/js/carousel/Carousel.js +0 -1427
  292. package/packages/core/src/js/carousel/index.js +0 -10
  293. package/packages/core/src/js/domHelpers.js +0 -37
  294. package/packages/core/src/js/eventHandlers.js +0 -39
  295. package/packages/core/src/js/navigation/index.js +0 -36
  296. package/packages/core/src/js/storage.js +0 -106
  297. package/packages/core/src/js/validate.js +0 -225
  298. package/packages/core/src/scss/_defaults.scss +0 -184
  299. package/packages/core/src/scss/_index.scss +0 -15
  300. package/packages/core/src/scss/_init.scss +0 -6
  301. package/packages/core/src/scss/_normalize.scss +0 -197
  302. package/packages/core/src/scss/_variables.scss +0 -95
  303. package/packages/core/src/scss/base/_index.scss +0 -6
  304. package/packages/core/src/scss/base/button/_defaults.scss +0 -49
  305. package/packages/core/src/scss/base/button/_index.scss +0 -206
  306. package/packages/core/src/scss/base/button/_mixins.scss +0 -104
  307. package/packages/core/src/scss/base/button/_variables.scss +0 -252
  308. package/packages/core/src/scss/base/form/_defaults.scss +0 -24
  309. package/packages/core/src/scss/base/form/_index.scss +0 -227
  310. package/packages/core/src/scss/base/form/_variables.scss +0 -245
  311. package/packages/core/src/scss/base/link/_defaults.scss +0 -35
  312. package/packages/core/src/scss/base/link/_index.scss +0 -245
  313. package/packages/core/src/scss/base/link/_variables.scss +0 -370
  314. package/packages/core/src/scss/base/table/_defaults.scss +0 -68
  315. package/packages/core/src/scss/base/table/_index.scss +0 -314
  316. package/packages/core/src/scss/base/table/_variables.scss +0 -309
  317. package/packages/core/src/scss/component/_index.scss +0 -10
  318. package/packages/core/src/scss/component/accordion/_defaults.scss +0 -40
  319. package/packages/core/src/scss/component/accordion/_index.scss +0 -198
  320. package/packages/core/src/scss/component/accordion/_variables.scss +0 -356
  321. package/packages/core/src/scss/component/alert/_defaults.scss +0 -49
  322. package/packages/core/src/scss/component/alert/_index.scss +0 -119
  323. package/packages/core/src/scss/component/alert/_variables.scss +0 -200
  324. package/packages/core/src/scss/component/card/_defaults.scss +0 -32
  325. package/packages/core/src/scss/component/card/_index.scss +0 -212
  326. package/packages/core/src/scss/component/card/_variables.scss +0 -216
  327. package/packages/core/src/scss/component/carousel/_defaults.scss +0 -43
  328. package/packages/core/src/scss/component/carousel/_index.scss +0 -192
  329. package/packages/core/src/scss/component/carousel/_variables.scss +0 -104
  330. package/packages/core/src/scss/component/input-group/_defaults.scss +0 -30
  331. package/packages/core/src/scss/component/input-group/_index.scss +0 -47
  332. package/packages/core/src/scss/component/input-group/_variables.scss +0 -66
  333. package/packages/core/src/scss/component/list/_defaults.scss +0 -15
  334. package/packages/core/src/scss/component/list/_index.scss +0 -52
  335. package/packages/core/src/scss/component/list/_variables.scss +0 -236
  336. package/packages/core/src/scss/component/menu/_defaults.scss +0 -57
  337. package/packages/core/src/scss/component/menu/_index.scss +0 -308
  338. package/packages/core/src/scss/component/menu/_variables.scss +0 -642
  339. package/packages/core/src/scss/component/navigation/_defaults.scss +0 -23
  340. package/packages/core/src/scss/component/navigation/_index.scss +0 -190
  341. package/packages/core/src/scss/component/navigation/_variables.scss +0 -290
  342. package/packages/core/src/scss/functions/_container.scss +0 -38
  343. package/packages/core/src/scss/functions/_important.scss +0 -36
  344. package/packages/core/src/scss/functions/_screen.scss +0 -38
  345. package/packages/core/src/scss/functions/_theme.scss +0 -39
  346. package/packages/core/src/scss/functions/_utility.scss +0 -28
  347. package/packages/core/src/scss/layout/_index.scss +0 -5
  348. package/packages/core/src/scss/layout/columns/_defaults.scss +0 -24
  349. package/packages/core/src/scss/layout/columns/_index.scss +0 -137
  350. package/packages/core/src/scss/layout/columns/_variables.scss +0 -55
  351. package/packages/core/src/scss/layout/container/_defaults.scss +0 -35
  352. package/packages/core/src/scss/layout/container/_index.scss +0 -628
  353. package/packages/core/src/scss/layout/container/_variables.scss +0 -114
  354. package/packages/core/src/scss/layout/flex-columns/_defaults.scss +0 -28
  355. package/packages/core/src/scss/layout/flex-columns/_index.scss +0 -184
  356. package/packages/core/src/scss/layout/flex-columns/_variables.scss +0 -30
  357. package/packages/core/src/scss/mixins/_animation.scss +0 -15
  358. package/packages/core/src/scss/mixins/_container.scss +0 -80
  359. package/packages/core/src/scss/mixins/_layer.scss +0 -16
  360. package/packages/core/src/scss/mixins/_screen.scss +0 -77
  361. package/packages/core/src/scss/mixins/_state.scss +0 -18
  362. package/packages/core/src/scss/mixins/_theme.scss +0 -15
  363. package/packages/core/src/scss/mixins/_utility.scss +0 -185
  364. package/packages/core/src/scss/mixins/_visually-hidden.scss +0 -30
  365. package/packages/core/src/scss/state/_index.scss +0 -3
  366. package/packages/core/src/scss/state/focus/_defaults.scss +0 -9
  367. package/packages/core/src/scss/state/focus/_index.scss +0 -42
  368. package/packages/core/src/scss/state/focus/_mixins.scss +0 -13
  369. package/packages/core/src/scss/state/focus/_variables.scss +0 -50
  370. package/packages/core/src/scss/theme/_index.scss +0 -4
  371. package/packages/core/src/scss/theme/color/_defaults.scss +0 -143
  372. package/packages/core/src/scss/theme/color/_index.scss +0 -42
  373. package/packages/core/src/scss/theme/color/_variables.scss +0 -133
  374. package/packages/core/src/scss/theme/typography/_defaults.scss +0 -54
  375. package/packages/core/src/scss/theme/typography/_index.scss +0 -120
  376. package/packages/core/src/scss/theme/typography/_variables.scss +0 -248
  377. package/packages/core/src/scss/utilities/_index.scss +0 -23
  378. package/packages/core/src/scss/utilities/_template/_defaults.scss +0 -41
  379. package/packages/core/src/scss/utilities/_template/_index.scss +0 -171
  380. package/packages/core/src/scss/utilities/_template/_variables.scss +0 -6
  381. package/packages/core/src/scss/utilities/alignment/_defaults.scss +0 -76
  382. package/packages/core/src/scss/utilities/alignment/_index.scss +0 -336
  383. package/packages/core/src/scss/utilities/alignment/_variables.scss +0 -6
  384. package/packages/core/src/scss/utilities/background/_defaults.scss +0 -122
  385. package/packages/core/src/scss/utilities/background/_index.scss +0 -634
  386. package/packages/core/src/scss/utilities/background/_variables.scss +0 -6
  387. package/packages/core/src/scss/utilities/border/_defaults.scss +0 -73
  388. package/packages/core/src/scss/utilities/border/_index.scss +0 -558
  389. package/packages/core/src/scss/utilities/border/_variables.scss +0 -6
  390. package/packages/core/src/scss/utilities/color/_defaults.scss +0 -49
  391. package/packages/core/src/scss/utilities/color/_index.scss +0 -469
  392. package/packages/core/src/scss/utilities/color/_variables.scss +0 -6
  393. package/packages/core/src/scss/utilities/container/_defaults.scss +0 -40
  394. package/packages/core/src/scss/utilities/container/_index.scss +0 -174
  395. package/packages/core/src/scss/utilities/container/_variables.scss +0 -6
  396. package/packages/core/src/scss/utilities/display/_defaults.scss +0 -47
  397. package/packages/core/src/scss/utilities/display/_index.scss +0 -184
  398. package/packages/core/src/scss/utilities/display/_variables.scss +0 -6
  399. package/packages/core/src/scss/utilities/flex/_defaults.scss +0 -99
  400. package/packages/core/src/scss/utilities/flex/_index.scss +0 -486
  401. package/packages/core/src/scss/utilities/flex/_variables.scss +0 -6
  402. package/packages/core/src/scss/utilities/gradient/_defaults.scss +0 -70
  403. package/packages/core/src/scss/utilities/gradient/_index.scss +0 -696
  404. package/packages/core/src/scss/utilities/gradient/_variables.scss +0 -29
  405. package/packages/core/src/scss/utilities/height/_defaults.scss +0 -54
  406. package/packages/core/src/scss/utilities/height/_index.scss +0 -525
  407. package/packages/core/src/scss/utilities/height/_variables.scss +0 -6
  408. package/packages/core/src/scss/utilities/inset/_defaults.scss +0 -55
  409. package/packages/core/src/scss/utilities/inset/_index.scss +0 -258
  410. package/packages/core/src/scss/utilities/inset/_variables.scss +0 -6
  411. package/packages/core/src/scss/utilities/justification/_defaults.scss +0 -73
  412. package/packages/core/src/scss/utilities/justification/_index.scss +0 -333
  413. package/packages/core/src/scss/utilities/justification/_variables.scss +0 -6
  414. package/packages/core/src/scss/utilities/list/_defaults.scss +0 -53
  415. package/packages/core/src/scss/utilities/list/_index.scss +0 -253
  416. package/packages/core/src/scss/utilities/list/_variables.scss +0 -6
  417. package/packages/core/src/scss/utilities/order/_defaults.scss +0 -36
  418. package/packages/core/src/scss/utilities/order/_index.scss +0 -246
  419. package/packages/core/src/scss/utilities/order/_variables.scss +0 -6
  420. package/packages/core/src/scss/utilities/position/_defaults.scss +0 -41
  421. package/packages/core/src/scss/utilities/position/_index.scss +0 -178
  422. package/packages/core/src/scss/utilities/position/_variables.scss +0 -6
  423. package/packages/core/src/scss/utilities/ratio/_defaults.scss +0 -42
  424. package/packages/core/src/scss/utilities/ratio/_index.scss +0 -188
  425. package/packages/core/src/scss/utilities/ratio/_variables.scss +0 -9
  426. package/packages/core/src/scss/utilities/spacing/_defaults.scss +0 -64
  427. package/packages/core/src/scss/utilities/spacing/_index.scss +0 -970
  428. package/packages/core/src/scss/utilities/spacing/_variables.scss +0 -6
  429. package/packages/core/src/scss/utilities/typography/_defaults.scss +0 -58
  430. package/packages/core/src/scss/utilities/typography/_index.scss +0 -1089
  431. package/packages/core/src/scss/utilities/typography/_variables.scss +0 -6
  432. package/packages/core/src/scss/utilities/visibility/_defaults.scss +0 -39
  433. package/packages/core/src/scss/utilities/visibility/_index.scss +0 -173
  434. package/packages/core/src/scss/utilities/visibility/_variables.scss +0 -6
  435. package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +0 -29
  436. package/packages/core/src/scss/utilities/visually-hidden/_index.scss +0 -189
  437. package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +0 -6
  438. package/packages/core/src/scss/utilities/width/_defaults.scss +0 -54
  439. package/packages/core/src/scss/utilities/width/_index.scss +0 -525
  440. package/packages/core/src/scss/utilities/width/_variables.scss +0 -6
  441. package/packages/core/src/scss/utilities/z-index/_defaults.scss +0 -40
  442. package/packages/core/src/scss/utilities/z-index/_index.scss +0 -173
  443. package/packages/core/src/scss/utilities/z-index/_variables.scss +0 -6
  444. package/packages/core/vite.config.js +0 -28
  445. package/packages/icons/dist/css/base/button.css +0 -2
  446. package/packages/icons/dist/css/base/button.css.map +0 -1
  447. package/packages/icons/dist/css/base/link.css +0 -2
  448. package/packages/icons/dist/css/base/link.css.map +0 -1
  449. package/packages/icons/dist/css/base.css +0 -2
  450. package/packages/icons/dist/css/base.css.map +0 -1
  451. package/packages/icons/dist/css/component/icon.css +0 -2
  452. package/packages/icons/dist/css/component/icon.css.map +0 -1
  453. package/packages/icons/dist/css/component.css +0 -2
  454. package/packages/icons/dist/css/component.css.map +0 -1
  455. package/packages/icons/dist/css/icon.css +0 -2
  456. package/packages/icons/dist/css/icon.css.map +0 -1
  457. package/packages/icons/package.json +0 -48
  458. package/packages/icons/scss/base/button.scss +0 -3
  459. package/packages/icons/scss/base/link.scss +0 -3
  460. package/packages/icons/scss/base.scss +0 -3
  461. package/packages/icons/scss/component/icon.scss +0 -3
  462. package/packages/icons/scss/component.scss +0 -3
  463. package/packages/icons/scss/icon.scss +0 -3
  464. package/packages/icons/src/scss/_index.scss +0 -4
  465. package/packages/icons/src/scss/base/_index.scss +0 -4
  466. package/packages/icons/src/scss/base/button/_defaults.scss +0 -7
  467. package/packages/icons/src/scss/base/button/_index.scss +0 -58
  468. package/packages/icons/src/scss/base/button/_variables.scss +0 -7
  469. package/packages/icons/src/scss/base/link/_defaults.scss +0 -7
  470. package/packages/icons/src/scss/base/link/_index.scss +0 -58
  471. package/packages/icons/src/scss/base/link/_variables.scss +0 -7
  472. package/packages/icons/src/scss/component/_index.scss +0 -3
  473. package/packages/icons/src/scss/component/icon/_defaults.scss +0 -30
  474. package/packages/icons/src/scss/component/icon/_index.scss +0 -60
  475. package/packages/icons/src/scss/component/icon/_mixins.scss +0 -62
  476. package/packages/icons/src/scss/component/icon/_variables.scss +0 -24
  477. package/postcss.config.cjs +0 -11
  478. package/prettier.config.js +0 -16
  479. package/stylelint.config.js +0 -22
  480. package/vite.config.js +0 -28
@@ -1,2561 +0,0 @@
1
- var F = Object.defineProperty;
2
- var q = (s, t, e) => t in s ? F(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
- var r = (s, t, e) => q(s, typeof t != "symbol" ? t + "" : t, e);
4
- function C(s, t) {
5
- try {
6
- if (typeof t != "object") {
7
- const e = typeof t;
8
- throw new TypeError(
9
- `Elements given to isValidInstance() must be inside of an object. "${e}" given.`
10
- );
11
- }
12
- for (const e in t)
13
- if (!(t[e] instanceof s)) {
14
- const i = typeof t[e];
15
- throw new TypeError(
16
- `${e} must be an instance of ${s.name}. "${i}" given.`
17
- );
18
- }
19
- return {
20
- status: !0,
21
- error: null
22
- };
23
- } catch (e) {
24
- return {
25
- status: !1,
26
- error: e
27
- };
28
- }
29
- }
30
- function o(s, t) {
31
- try {
32
- if (typeof t != "object") {
33
- const e = typeof t;
34
- throw new TypeError(
35
- `Values given to isValidType() must be inside of an object. "${e}" given.`
36
- );
37
- }
38
- for (const e in t) {
39
- const i = typeof t[e];
40
- if (i !== s)
41
- throw new TypeError(`${e} must be a ${s}. "${i}" given.`);
42
- }
43
- return {
44
- status: !0,
45
- error: null
46
- };
47
- } catch (e) {
48
- return {
49
- status: !1,
50
- error: e
51
- };
52
- }
53
- }
54
- function D(s) {
55
- try {
56
- if (typeof s != "object") {
57
- const t = typeof s;
58
- throw new TypeError(
59
- `Values given to isQuerySelector() must be inside of an object. "${t}" given.`
60
- );
61
- }
62
- for (const t in s)
63
- try {
64
- if (s[t] === null)
65
- throw new Error();
66
- document.querySelector(s[t]);
67
- } catch {
68
- throw new TypeError(
69
- `${t} must be a valid query selector. "${s[t]}" given.`
70
- );
71
- }
72
- return {
73
- status: !0,
74
- error: null
75
- };
76
- } catch (t) {
77
- return {
78
- status: !1,
79
- error: t
80
- };
81
- }
82
- }
83
- function h(s) {
84
- try {
85
- if (typeof s != "object" || Array.isArray(s)) {
86
- const t = typeof s;
87
- throw new TypeError(
88
- `Values given to isValidClassList() must be inside of an object. "${t}" given.`
89
- );
90
- }
91
- for (const t in s) {
92
- const e = typeof s[t];
93
- if (e !== "string")
94
- if (Array.isArray(s[t]))
95
- s[t].forEach((i) => {
96
- if (typeof i != "string")
97
- throw new TypeError(
98
- `${t} must be a string or an array of strings. An array containing non-strings given.`
99
- );
100
- });
101
- else
102
- throw new TypeError(
103
- `${t} must be a string or an array of strings. "${e}" given.`
104
- );
105
- else {
106
- const i = {};
107
- i[t] = s[t], D(i);
108
- }
109
- }
110
- return {
111
- status: !0,
112
- error: null
113
- };
114
- } catch (t) {
115
- return {
116
- status: !1,
117
- error: t
118
- };
119
- }
120
- }
121
- function y(s, t) {
122
- if (o("string", { tagName: s }).status && C(HTMLElement, t).status) {
123
- const e = s.toLowerCase();
124
- let i = !0;
125
- for (const n in t)
126
- t[n].tagName.toLowerCase() !== e && (i = !1);
127
- return i;
128
- } else
129
- return !1;
130
- }
131
- function u(s, t) {
132
- s === "" || s.length === 0 || (typeof s == "string" ? t.classList.add(s) : t.classList.add(...s));
133
- }
134
- function d(s, t) {
135
- s === "" || s.length === 0 || (typeof s == "string" ? t.classList.remove(s) : t.classList.remove(...s));
136
- }
137
- class v {
138
- /**
139
- * Constructs a new Accordion item object.
140
- *
141
- * @class
142
- *
143
- * @param {object} options - The options object.
144
- * @param {HTMLElement} options.accordionItemElement - The accordion item element.
145
- * @param {HTMLElement} options.accordionItemToggleElement - The toggle element.
146
- * @param {HTMLElement} options.accordionItemHeaderElement - The header element.
147
- * @param {HTMLElement} options.accordionItemContentElement - The content element.
148
- * @param {Accordion} [options.parentAccordion = null] - The accordion containing this item.
149
- */
150
- constructor({
151
- accordionItemElement: t,
152
- accordionItemToggleElement: e,
153
- accordionItemHeaderElement: i,
154
- accordionItemContentElement: n,
155
- parentAccordion: a = null
156
- }) {
157
- /**
158
- * The HTML elements for the accordion item in the DOM.
159
- *
160
- * @protected
161
- *
162
- * @type {Object<HTMLElement>}
163
- *
164
- * @property {HTMLElement} item - The accordion item element.
165
- * @property {HTMLElement} toggle - The controller element.
166
- * @property {HTMLElement} header - The header element.
167
- * @property {HTMLElement} content - The content element.
168
- */
169
- r(this, "_dom", {
170
- item: null,
171
- toggle: null,
172
- header: null,
173
- content: null
174
- });
175
- /**
176
- * The declared graupl accordion elements within the accordion item.
177
- *
178
- * @protected
179
- *
180
- * @type {Object<Accordion>}
181
- *
182
- * @property {Accordion} parentAccordion - The parent accordion containing this item.
183
- */
184
- r(this, "_elements", {
185
- parentAccordion: null
186
- });
187
- /**
188
- * The open state of the accordion.
189
- *
190
- * @protected
191
- *
192
- * @type {boolean}
193
- */
194
- r(this, "_open", !1);
195
- /**
196
- * The locked state of the accordions item.
197
- *
198
- * If locked, the accordion item cannot be closed.
199
- *
200
- * @protected
201
- *
202
- * @type {boolean}
203
- */
204
- r(this, "_locked", !1);
205
- /**
206
- * The event that is triggered when the accordion item is shown.
207
- *
208
- * @protected
209
- *
210
- * @event grauplAccordionItemExpand
211
- *
212
- * @type {CustomEvent}
213
- *
214
- * @property {boolean} bubbles - A flag to bubble the event.
215
- * @property {Object<AccordionItem>} detail - The details object containing the Accordion item itself.
216
- */
217
- r(this, "_expandEvent", new CustomEvent("grauplAccordionItemExpand", {
218
- bubbles: !0,
219
- detail: { item: this }
220
- }));
221
- /**
222
- * The event that is triggered when the accordion item is hidden.
223
- *
224
- * @protected
225
- *
226
- * @event grauplAccordionItemCollapse
227
- *
228
- * @type {CustomEvent}
229
- *
230
- * @property {boolean} bubbles - A flag to bubble the event.
231
- * @property {Object<AccordionItem>} detail - The details object containing the Accordion item itself.
232
- */
233
- r(this, "_collapseEvent", new CustomEvent("grauplAccordionItemCollapse", {
234
- bubbles: !0,
235
- detail: { item: this }
236
- }));
237
- this._dom.item = t, this._dom.toggle = e, this._dom.header = i, this._dom.content = n, this._elements.parentAccordion = a;
238
- }
239
- /**
240
- * Initializes the accordion item.
241
- */
242
- initialize() {
243
- this._setIds(), this._setAriaAttributes(), this.dom.toggle.getAttribute("aria-expanded") === "true" ? this.show(!1, !1) : this.hide(!1, !1);
244
- }
245
- /**
246
- * The HTML elements for the accordion item in the DOM.
247
- *
248
- * @readonly
249
- *
250
- * @type {object}
251
- *
252
- * @see _dom
253
- */
254
- get dom() {
255
- return this._dom;
256
- }
257
- /**
258
- * The declared graupl accordion elements within the accordion item.
259
- *
260
- * @readonly
261
- *
262
- * @type {Object<Accordion>}
263
- *
264
- * @see _elements
265
- */
266
- get elements() {
267
- return this._elements;
268
- }
269
- /**
270
- * The open state of the accordion.
271
- *
272
- * @readonly
273
- *
274
- * @type {object}
275
- *
276
- * @see _open
277
- */
278
- get isOpen() {
279
- return this._open;
280
- }
281
- /**
282
- * The locked state of the accordions item.
283
- *
284
- * If locked, the accordion item cannot be closed.
285
- *
286
- * @readonly
287
- *
288
- * @type {boolean}
289
- *
290
- * @see _locked
291
- */
292
- get isLocked() {
293
- return this._locked;
294
- }
295
- set isOpen(t) {
296
- o("boolean", { value: t }), this._open !== t && (this._open = t);
297
- }
298
- /**
299
- * Sets the IDs for the accordion item and it's elements if they don't exist.
300
- *
301
- * The generated IDs use the parent accordion's key and follows the pattern:
302
- * - Accordion item: `accordion-item-{key}-{index}`
303
- * - Accordion item toggle: `accordion-item-toggle-{key}-{index}`
304
- * - Accordion item content: `accordion-item-content-{key}-{index}`
305
- */
306
- _setIds() {
307
- const { key: t } = this.elements.parentAccordion, e = this.elements.parentAccordion.dom.accordionItems.indexOf(
308
- this.dom.item
309
- );
310
- this.dom.item.id = this.dom.item.id || `accordion-item-${t}-${e}`, this.dom.toggle.id = this.dom.toggle.id || `accordion-item-toggle-${t}-${e}`, this.dom.header.id = this.dom.header.id || `accordion-item-header-${t}-${e}`, this.dom.content.id = this.dom.content.id || `accordion-item-content-${t}-${e}`;
311
- }
312
- /**
313
- * Sets the ARIA attributes for the accordion item and it's elements.
314
- */
315
- _setAriaAttributes() {
316
- y("button", { toggle: this.dom.toggle }) || this.dom.toggle.setAttribute("role", "button"), this.dom.toggle.getAttribute("aria-expanded") !== "true" && this.dom.toggle.setAttribute("aria-expanded", "false"), this.dom.toggle.setAttribute("aria-controls", this.dom.content.id), y("section", { content: this.dom.content }) || this.dom.content.setAttribute("role", "region"), this.dom.content.setAttribute("aria-labelledby", this.dom.toggle.id);
317
- }
318
- /**
319
- * Shows the accordion item.
320
- *
321
- * @public
322
- *
323
- * @fires grauplAccordionItemExpand
324
- *
325
- * @param {boolean} [emit = true] - Emit the show event once shown.
326
- * @param {boolean} [transition = true] - Respect the transition class.
327
- */
328
- show(t = !0, e = !0) {
329
- if (this._open)
330
- return;
331
- const { closeClass: i, openClass: n, transitionClass: a, openDuration: c } = this.elements.parentAccordion;
332
- this.dom.toggle.setAttribute("aria-expanded", "true"), e && a !== "" ? (u(a, this.dom.item), requestAnimationFrame(() => {
333
- d(i, this.dom.item), this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height}px`, requestAnimationFrame(() => {
334
- u(n, this.dom.item), this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height + this.dom.content.getBoundingClientRect().height}px`, requestAnimationFrame(() => {
335
- setTimeout(() => {
336
- d(a, this.dom.item), this.dom.item.style.height = "";
337
- }, c);
338
- });
339
- });
340
- })) : (u(n, this.dom.item), d(i, this.dom.item)), this._open = !0, this.elements.parentAccordion.allowMultipleExpand || (this.unlockSiblings(), this.closeSiblings()), this.elements.parentAccordion.allowNoExpand || (this.elements.parentAccordion.openAccordionItems.length <= 1 ? this.lock() : this.unlockSiblings()), t && this.dom.item.dispatchEvent(this._expandEvent);
341
- }
342
- /**
343
- * Hides the accordion item.
344
- *
345
- * @public
346
- *
347
- * @fires grauplAccordionItemCollapse
348
- *
349
- * @param {boolean} [emit = true] - Emit the show event once shown.
350
- * @param {boolean} [transition = true] - Respect the transition class.
351
- */
352
- hide(t = !0, e = !0) {
353
- if (!this._open || !this.elements.parentAccordion.allowNoExpand && this.elements.parentAccordion.openAccordionItems.length <= 1)
354
- return;
355
- const { closeClass: i, openClass: n, transitionClass: a, closeDuration: c } = this.elements.parentAccordion;
356
- this.dom.toggle.setAttribute("aria-expanded", "false"), e && a !== "" ? (u(a, this.dom.item), this.dom.item.style.height = `${this.dom.item.getBoundingClientRect().height}px`, requestAnimationFrame(() => {
357
- d(n, this.dom.item), this.dom.item.style.height = `${this.dom.header.getBoundingClientRect().height}px`, requestAnimationFrame(() => {
358
- u(i, this.dom.item), requestAnimationFrame(() => {
359
- setTimeout(() => {
360
- d(a, this.dom.item), this.dom.item.style.height = "";
361
- }, c);
362
- });
363
- });
364
- })) : (u(i, this.dom.item), d(n, this.dom.item)), this._open = !1, !this.elements.parentAccordion.allowNoExpand && this.elements.parentAccordion.openAccordionItems.length === 1 && this.elements.parentAccordion.openAccordionItems[0].lock(), t && this.dom.item.dispatchEvent(this._collapseEvent);
365
- }
366
- /**
367
- * Toggle the accordion item.
368
- *
369
- * @public
370
- */
371
- toggle() {
372
- this.isOpen ? this.hide() : this.show();
373
- }
374
- /**
375
- * Focuses the accordion item.
376
- *
377
- * @public
378
- */
379
- focus() {
380
- this.dom.toggle.focus();
381
- }
382
- /**
383
- * Blurs the accordion item.
384
- *
385
- * @public
386
- */
387
- blur() {
388
- this.dom.toggle.blur();
389
- }
390
- /**
391
- * Locks the accordion item.
392
- *
393
- * @public
394
- */
395
- lock() {
396
- this._locked = !0, this.dom.toggle.setAttribute("disabled", "true");
397
- }
398
- /**
399
- * Unlocks the accordion item.
400
- *
401
- * @public
402
- */
403
- unlock() {
404
- this._locked = !1, this.dom.toggle.removeAttribute("disabled");
405
- }
406
- closeSiblings() {
407
- this.elements.parentAccordion && this.elements.parentAccordion.elements.accordionItems.forEach((t) => {
408
- t !== this && t.hide();
409
- });
410
- }
411
- /**
412
- * Unlocks the siblings of the accordion item.
413
- *
414
- * @public
415
- */
416
- unlockSiblings() {
417
- this.elements.parentAccordion && this.elements.parentAccordion.elements.accordionItems.forEach((t) => {
418
- t !== this && t.unlock();
419
- });
420
- }
421
- }
422
- function f(s) {
423
- try {
424
- const t = s.key || s.keyCode, e = {
425
- Enter: t === "Enter" || t === 13,
426
- Space: t === " " || t === "Spacebar" || t === 32,
427
- Escape: t === "Escape" || t === "Esc" || t === 27,
428
- ArrowUp: t === "ArrowUp" || t === "Up" || t === 38,
429
- ArrowRight: t === "ArrowRight" || t === "Right" || t === 39,
430
- ArrowDown: t === "ArrowDown" || t === "Down" || t === 40,
431
- ArrowLeft: t === "ArrowLeft" || t === "Left" || t === 37,
432
- Home: t === "Home" || t === 36,
433
- End: t === "End" || t === 35,
434
- Tab: t === "Tab" || t === 9
435
- };
436
- return Object.keys(e).find((i) => e[i] === !0) || "";
437
- } catch {
438
- return "";
439
- }
440
- }
441
- function p(s) {
442
- s.preventDefault(), s.stopPropagation();
443
- }
444
- function H(s = null) {
445
- window.Graupl = window.Graupl || {}, o("string", { type: s }) && (window.Graupl[s] = window.Graupl[s] || {});
446
- }
447
- function G(s = null) {
448
- return o("string", { type: s }) ? window.Graupl[s] : window.Graupl;
449
- }
450
- function z(s, t = {}) {
451
- o("string", { type: s }) && o("object", { data: t }) && (window.Graupl[s] = t);
452
- }
453
- function j(s) {
454
- o("string", { type: s }) && (window.Graupl[s] = {});
455
- }
456
- function P(s, t, e) {
457
- o("string", { type: s, key: t }) && (window.Graupl[s][t] = e);
458
- }
459
- function N(s, t) {
460
- return o("string", { type: s, key: t }) ? window.Graupl[s][t] : null;
461
- }
462
- function V(s, t) {
463
- o("string", { type: s, key: t }) && delete window.Graupl[s][t];
464
- }
465
- const g = {
466
- initializeStorage: H,
467
- getStorage: G,
468
- setStorage: z,
469
- clearStorage: j,
470
- pushToStorage: P,
471
- getFromStorage: N,
472
- removeFromStorage: V
473
- };
474
- class R {
475
- /**
476
- * Constructs a new `Accordion`.
477
- *
478
- * @param {object} options - The options for generating the accordion.
479
- * @param {HTMLElement} [options.accordionElement] - The accordion element in the DOM.
480
- * @param {string} [options.accordionItemSelector = .accordion-item] - The query selector string for accordion items.
481
- * @param {string} [options.accordionItemToggleSelector = .accordion-item-toggle] - The query selector string for accordion toggle.
482
- * @param {string} [options.accordionItemHeaderSelector = .accordion-item-header] - The query selector string for accordion header.
483
- * @param {string} [options.accordionItemContentSelector = .accordion-item-content] - The query selector string for accordion content.
484
- * @param {?(string|string[])} [options.openClass = show] - The class to apply when a accordion is "open".
485
- * @param {?(string|string[])} [options.closeClass = hide] - The class to apply when a accordion is "closed".
486
- * @param {?(string|string[])} [options.transitionClass = transitioning] - The class to apply when a accordion is transitioning between "open" and "closed" states.
487
- * @param {number} [options.transitionDuration = 300] - The duration of the transition between "open" and "closed" states (in milliseconds).
488
- * @param {number} [options.openDuration = -1] - The duration of the transition from "closed" to "open" states (in milliseconds).
489
- * @param {number} [options.closeDuration = -1] - The duration of the transition from "open" to "closed" states (in milliseconds).
490
- * @param {boolean} [options.optionalKeySupport = false] - A flag to determine if accordions can be navigated with arrows.
491
- * @param {boolean} [options.allowMultipleExpand = true] - A flag to determine if multiple accordions can be open at the same time.
492
- * @param {boolean} [options.allowNoExpand = true] - A flag to determine if no accordions can be open at the same time.
493
- * @param {?string} [options.prefix = graupl-] - The prefix to use for CSS custom properties.
494
- * @param {?string} [options.key = null] - The key used to generate IDs throughout the accordion.
495
- * @param {boolean} [options.initialize = false] - A flag to initialize the accordion immediately upon creation.
496
- */
497
- constructor({
498
- accordionElement: t,
499
- accordionItemSelector: e = ".accordion-item",
500
- accordionItemToggleSelector: i = ".accordion-item-toggle",
501
- accordionItemHeaderSelector: n = ".accordion-item-header",
502
- accordionItemContentSelector: a = ".accordion-item-content",
503
- openClass: c = "show",
504
- closeClass: _ = "hide",
505
- transitionClass: l = "transitioning",
506
- transitionDuration: m = 300,
507
- openDuration: E = -1,
508
- closeDuration: w = -1,
509
- optionalKeySupport: I = !1,
510
- allowMultipleExpand: b = !0,
511
- allowNoExpand: k = !0,
512
- prefix: A = "am-",
513
- key: T = null,
514
- initialize: x = !1
515
- }) {
516
- /**
517
- * The DOM elements within the accordion.
518
- *
519
- * @protected
520
- *
521
- * @type {Object<HTMLElement, HTMLElement[]>}
522
- *
523
- * @property {HTMLElement} accordion - The accordion element.
524
- * @property {HTMLElement[]} accordionItems - An array of accordion items.
525
- * @property {HTMLElement[]} accordionItemToggles - An array of accordion item toggles.
526
- * @property {HTMLElement[]} accordionItemHeaders - An array of accordion headers.
527
- * @property {HTMLElement[]} accordionItemContents - An array of accordion item contents.
528
- */
529
- r(this, "_dom", {
530
- accordion: null,
531
- accordionItems: [],
532
- accordionItemToggles: [],
533
- accordionItemHeaders: [],
534
- accordionItemContents: []
535
- });
536
- /**
537
- * The DOM elements within the accordion that cannot be reset or generated by the accordion.
538
- *
539
- * @protected
540
- *
541
- * @type {string[]}
542
- */
543
- r(this, "_domLock", ["accordion"]);
544
- /**
545
- * The query selectors used by the accordion.
546
- *
547
- * @protected
548
- *
549
- * @type {Object<string>}
550
- *
551
- * @property {string} accordionItems - The query selector for accordion items.
552
- * @property {string} accordionItemToggles - The query selector for accordion toggles.
553
- * @property {string} accordionItemHeaders - The query selector for accordion headers.
554
- * @property {string} accordionItemContents - The query selector for accordion contents.
555
- */
556
- r(this, "_selectors", {
557
- accordionItems: "",
558
- accordionItemToggles: "",
559
- accordionItemHeaders: "",
560
- accordionItemContents: ""
561
- });
562
- /**
563
- * The list of accordion items.
564
- *
565
- * @protected
566
- *
567
- * @type {Object<AccordionItem[]>}
568
- *
569
- * @property {AccordionItem[]} accordionItems - The list of accordion items.
570
- */
571
- r(this, "_elements", {
572
- accordionItems: []
573
- });
574
- /**
575
- * The class(es) to apply when the accordion is open.
576
- *
577
- * @protected
578
- *
579
- * @type {string|string[]}
580
- */
581
- r(this, "_openClass", "show");
582
- /**
583
- * The class(es) to apply when the accordion is closed.
584
- *
585
- * @protected
586
- *
587
- * @type {string|string[]}
588
- */
589
- r(this, "_closeClass", "hide");
590
- /**
591
- * The class(es) to apply when the accordion is transitioning between states.
592
- *
593
- * @protected
594
- *
595
- * @type {string|string[]}
596
- */
597
- r(this, "_transitionClass", "transitioning");
598
- /**
599
- * The duration time (in milliseconds) for the transition between open and closed states.
600
- *
601
- * @protected
602
- *
603
- * @type {number}
604
- */
605
- r(this, "_transitionDuration", 300);
606
- /**
607
- * The duration time (in milliseconds) for the transition from closed to open states.
608
- *
609
- * @protected
610
- *
611
- * @type {number}
612
- */
613
- r(this, "_openDuration", -1);
614
- /**
615
- * The duration time (in milliseconds) for the transition from open to closed states.
616
- *
617
- * @protected
618
- *
619
- * @type {number}
620
- */
621
- r(this, "_closeDuration", -1);
622
- /**
623
- * A flag to decide if the accordion items can be navigated by arrows.
624
- *
625
- * @protected
626
- *
627
- * @type {boolean}
628
- */
629
- r(this, "_optionalKeySupport", !0);
630
- /**
631
- * A flag to decide if multiple accordions can be open at the same time.
632
- *
633
- * If set to false, only one accordion can be open at a time.
634
- *
635
- * @protected
636
- *
637
- * @type {boolean}
638
- */
639
- r(this, "_allowMultipleExpand", !0);
640
- /**
641
- * A flag to decide if no accordions can be opened at the same time.
642
- *
643
- * If set to false, at least one accordion must be open at all times.
644
- *
645
- * @protected
646
- *
647
- * @type {boolean}
648
- */
649
- r(this, "_allowNoExpand", !0);
650
- /**
651
- * The index of the current child node.
652
- *
653
- * @protected
654
- *
655
- * @type {number}
656
- */
657
- r(this, "_currentChild", 0);
658
- /**
659
- * The prefix to use for CSS custom properties.
660
- *
661
- * @protected
662
- *
663
- * @type {string}
664
- */
665
- r(this, "_prefix", "graupl-");
666
- /**
667
- * The key used to generate IDs throughout the accordion.
668
- *
669
- * @protected
670
- *
671
- * @type {string}
672
- */
673
- r(this, "_key", "");
674
- /**
675
- * errors - The list of errors found during validation.
676
- *
677
- * @protected
678
- *
679
- * @type {string[]}
680
- */
681
- r(this, "_errors", []);
682
- this._dom.accordion = t, this._selectors.accordionItems = e, this._selectors.accordionItemToggles = i, this._selectors.accordionItemHeaders = n, this._selectors.accordionItemContents = a, this._openClass = c || "", this._closeClass = _ || "", this._transitionClass = l || "", this._transitionDuration = m, this._openDuration = E, this._closeDuration = w, this._optionalKeySupport = I, this._allowMultipleExpand = b, this._allowNoExpand = k, this._prefix = A || "", this._key = T || "", x && this.initialize();
683
- }
684
- /**
685
- * Initializes the accordion.
686
- */
687
- initialize() {
688
- try {
689
- if (!this._validate())
690
- throw new Error(
691
- `Graupl Accordion: cannot initialize accordion. The following errors have been found:
692
- - ${this.errors.join(
693
- `
694
- - `
695
- )}`
696
- );
697
- this._generateKey(), this._setDOMElements(), this._setIds(), this._createChildElements(), this._handleFocus(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), this._setTransitionDurations(), g.initializeStorage("accordions"), g.pushToStorage("accordions", this.dom.accordion.id, this);
698
- } catch (t) {
699
- console.error(t);
700
- }
701
- }
702
- /**
703
- * The class(es) to apply when the accordion is open.
704
- *
705
- * @type {string|string[]}
706
- *
707
- * @see _openClass
708
- */
709
- get openClass() {
710
- return this._openClass;
711
- }
712
- /**
713
- * The class(es) to apply when the accordion is closed.
714
- *
715
- * @type {string|string[]}
716
- *
717
- * @see _closeClass
718
- */
719
- get closeClass() {
720
- return this._closeClass;
721
- }
722
- /**
723
- * The class(es) to apply when the accordion is transitioning between open and closed.
724
- *
725
- * @type {string|string[]}
726
- *
727
- * @see _transitionClass
728
- */
729
- get transitionClass() {
730
- return this._transitionClass;
731
- }
732
- /**
733
- * The duration time (in milliseconds) for the transition between open and closed states.
734
- *
735
- * @type {number}
736
- *
737
- * @see _transitionDuration
738
- */
739
- get transitionDuration() {
740
- return this._transitionDuration;
741
- }
742
- /**
743
- * The duration time (in milliseconds) for the transition from closed to open states.
744
- *
745
- * If openDuration is set to -1, the transitionDuration will be used instead.
746
- *
747
- * @type {number}
748
- *
749
- * @see _openDuration
750
- */
751
- get openDuration() {
752
- return this._openDuration === -1 ? this.transitionDuration : this._openDuration;
753
- }
754
- /**
755
- * The duration time (in milliseconds) for the transition from open to closed states.
756
- *
757
- * If closeDuration is set to -1, the transitionDuration will be used instead.
758
- *
759
- * @type {number}
760
- *
761
- * @see _closeDuration
762
- */
763
- get closeDuration() {
764
- return this._closeDuration === -1 ? this.transitionDuration : this._closeDuration;
765
- }
766
- /**
767
- * The current index of the accordion item.
768
- *
769
- * @readonly
770
- *
771
- * @type {number}
772
- *
773
- * @see _currentChild
774
- */
775
- get currentChild() {
776
- return this._currentChild;
777
- }
778
- /**
779
- * The dom elements of the accordion.
780
- *
781
- * @readonly
782
- *
783
- * @type {object}
784
- *
785
- * @see _dom
786
- */
787
- get dom() {
788
- return this._dom;
789
- }
790
- /**
791
- * The elements of the accordion.
792
- *
793
- * @readonly
794
- *
795
- * @type {object}
796
- *
797
- * @see _elements
798
- */
799
- get elements() {
800
- return this._elements;
801
- }
802
- /**
803
- * The selectors used for the accordion and accordion items.
804
- *
805
- * @readonly
806
- *
807
- * @type {boolean}
808
- *
809
- * @see _selectors
810
- */
811
- get selectors() {
812
- return this._selectors;
813
- }
814
- /**
815
- * A flag to decide if the accordion items can be navigated by arrows.
816
- *
817
- * @readonly
818
- *
819
- * @type {boolean}
820
- *
821
- * @see _optionalKeySupport
822
- */
823
- get optionalKeySupport() {
824
- return this._optionalKeySupport;
825
- }
826
- /**
827
- * The currently selected accordion item.
828
- *
829
- * @readonly
830
- *
831
- * @type {AccordionItem}
832
- */
833
- get currentAccordionItem() {
834
- return this.elements.accordionItems[this.currentChild];
835
- }
836
- /**
837
- * The currently open accordion items.
838
- *
839
- * @readonly
840
- *
841
- * @type {AccordionItem[]}
842
- */
843
- get openAccordionItems() {
844
- return this.elements.accordionItems.filter((t) => t.isOpen);
845
- }
846
- /**
847
- * A flag to decide if multiple accordions can be open at the same time.
848
- *
849
- * @type {boolean}
850
- *
851
- * @see _allowMultipleExpand
852
- */
853
- get allowMultipleExpand() {
854
- return this._allowMultipleExpand;
855
- }
856
- /**
857
- * A flag to decide if no accordions can be opened at the same time.
858
- *
859
- * @type {boolean}
860
- *
861
- * @see _allowNoExpand
862
- */
863
- get allowNoExpand() {
864
- return this._allowNoExpand;
865
- }
866
- /**
867
- * The prefix to use for CSS custom properties.
868
- *
869
- * @type {string}
870
- *
871
- * @see _prefix
872
- */
873
- get prefix() {
874
- return this._prefix;
875
- }
876
- /**
877
- * The key used to generate IDs throughout the accordion.
878
- *
879
- * @type {string}
880
- *
881
- * @see _key
882
- */
883
- get key() {
884
- return this._key;
885
- }
886
- /**
887
- * An array to hold error messages.
888
- *
889
- * @readonly
890
- *
891
- * @type {string[]}
892
- *
893
- * @see _errors
894
- */
895
- get errors() {
896
- return this._errors;
897
- }
898
- set openClass(t) {
899
- h({ openClass: t }), this._openClass !== t && (this._openClass = t);
900
- }
901
- set closeClass(t) {
902
- h({ closeClass: t }), this._closeClass !== t && (this._closeClass = t);
903
- }
904
- set transitionClass(t) {
905
- h({ transitionClass: t }), this._transitionClass !== t && (this._transitionClass = t);
906
- }
907
- set transitionDuration(t) {
908
- o("number", { value: t }), this._transitionDuration !== t && (this._transitionDuration = t, this._setTransitionDurations());
909
- }
910
- set openDuration(t) {
911
- o("number", { value: t }), this._openDuration !== t && (this._openDuration = t, this._setTransitionDurations());
912
- }
913
- set closeDuration(t) {
914
- o("number", { value: t }), this._closeDuration !== t && (this._closeDuration = t, this._setTransitionDurations());
915
- }
916
- set currentChild(t) {
917
- o("number", { value: t }), this._currentChild !== t && t >= 0 && t < this.elements.accordionItems.length && (this._currentChild = t);
918
- }
919
- set accordionItems(t) {
920
- o("object", { value: t }), t != null && t.isArray() && t.every((e) => e instanceof v) && (this._accordionItems = t);
921
- }
922
- set allowMultipleExpand(t) {
923
- o("boolean", { value: t }), this._allowMultipleExpand !== t && (this._allowMultipleExpand = t);
924
- }
925
- set allowNoExpand(t) {
926
- o("boolean", { value: t }), this._allowNoExpand !== t && (this._allowNoExpand = t);
927
- }
928
- set prefix(t) {
929
- o("string", { value: t }), this._prefix !== t && (this._prefix = t);
930
- }
931
- set key(t) {
932
- o("string", { value: t }), this._key !== t && (this._key = t);
933
- }
934
- /**
935
- * Sets DOM elements.
936
- *
937
- * Elements listed in _domLock cannot be set using this method.
938
- *
939
- * @protected
940
- *
941
- * @param {string} elementType - The type of element to populate.
942
- * @param {HTMLElement} [base = this.dom.accordion] - The element used as the base for the querySelect.
943
- * @param {boolean} [overwrite = true] - A flag to set if the existing elements will be overwritten.
944
- * @param {boolean} [strict = false] - A flag to set if the elements must be direct children of the base.
945
- */
946
- _setDOMElementType(t, e = this.dom.accordion, i = !0, n = !1) {
947
- if (typeof this.selectors[t] == "string") {
948
- if (this._domLock.includes(t))
949
- throw new Error(
950
- `Graupl ${this.contructor.name}: "${t}" element cannot be set through _setDOMElementType.`
951
- );
952
- e !== this.dom.accordion && C(HTMLElement, { base: e });
953
- const c = Array.from(
954
- e.querySelectorAll(this.selectors[t])
955
- ).filter(
956
- (_) => n ? _.parentElement === e : !0
957
- );
958
- i ? this._dom[t] = c : this._dom[t] = [
959
- ...this._dom[t],
960
- ...c
961
- ];
962
- } else
963
- throw new Error(
964
- `Graupl ${this.contructor.name}: "${t}" is not a valid element type.`
965
- );
966
- }
967
- /**
968
- * Resets DOM elements.
969
- *
970
- * Elements listed in _domLock cannot be reset using this method.
971
- *
972
- * @protected
973
- *
974
- * @param {string} elementType - The type of element to clear.
975
- */
976
- _resetDOMElementType(t) {
977
- if (typeof this.selectors[t] == "string") {
978
- if (this._domLock.includes(t))
979
- throw new Error(
980
- `Graupl ${this.contructor.name}: "${t}" element cannot be reset through _resetDOMElementType.`
981
- );
982
- Array.isArray(this._dom[t]) ? this._dom[t] = [] : this._dom[t] = null;
983
- } else
984
- throw new Error(
985
- `Graupl ${this.contructor.name}: "${t}" is not a valid element type.`
986
- );
987
- }
988
- /**
989
- * Sets all DOM elements within the accordion.
990
- *
991
- * Utilizes _setDOMElementType and
992
- * _resetDOMElementType.
993
- *
994
- * @protected
995
- */
996
- _setDOMElements() {
997
- this._setDOMElementType("accordionItems"), this._resetDOMElementType("accordionItemToggles"), this.dom.accordionItems.forEach((t) => {
998
- this._setDOMElementType("accordionItemToggles", t, !1), this._setDOMElementType("accordionItemHeaders", t, !1), this._setDOMElementType("accordionItemContents", t, !1);
999
- });
1000
- }
1001
- /**
1002
- * Generates a key for the accordion.
1003
- *
1004
- * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
1005
- */
1006
- _generateKey(t = !1) {
1007
- (this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
1008
- }
1009
- /**
1010
- * Sets the IDs of the accordion and it's children if they do not already exist.
1011
- *
1012
- * The generated IDs use the key and follow the format:
1013
- * - accordion: `accordion-${key}`
1014
- *
1015
- * @protected
1016
- */
1017
- _setIds() {
1018
- this.dom.accordion.id = this.dom.accordion.id || `accordion-${this.key}`;
1019
- }
1020
- /**
1021
- * Creates and initializes all accordion items.
1022
- *
1023
- * @protected
1024
- */
1025
- _createChildElements() {
1026
- this.dom.accordionItems.forEach((t, e) => {
1027
- const i = new v({
1028
- accordionItemElement: t,
1029
- accordionItemToggleElement: this.dom.accordionItemToggles[e],
1030
- accordionItemHeaderElement: this.dom.accordionItemHeaders[e],
1031
- accordionItemContentElement: this.dom.accordionItemContents[e],
1032
- parentAccordion: this
1033
- });
1034
- i.initialize(), this.elements.accordionItems.push(i);
1035
- });
1036
- }
1037
- /**
1038
- * Validates all aspects of the accordion item to ensure proper functionality.
1039
- *
1040
- * @protected
1041
- *
1042
- * @return {boolean} - The result of the validation.
1043
- */
1044
- _validate() {
1045
- let t = !0;
1046
- const e = C(HTMLElement, {
1047
- accordionElement: this.dom.accordion
1048
- });
1049
- e || (this._errors.push(e.message), t = !1);
1050
- const i = D({
1051
- accordionItemSelector: this._selectors.accordionItems,
1052
- accordionItemToggleSelector: this._selectors.accordionItemToggles,
1053
- accordionItemHeaderSelector: this._selectors.accordionItemHeaders,
1054
- accordionItemContentSelector: this._selectors.accordionItemContents
1055
- });
1056
- if (i || (this._errors.push(i.message), t = !1), this._openClass !== "") {
1057
- const m = h({ openClass: this._openClass });
1058
- m.status || (this._errors.push(m.error.message), t = !1);
1059
- }
1060
- if (this._closeClass !== "") {
1061
- const m = h({
1062
- closeClass: this._closeClass
1063
- });
1064
- m.status || (this._errors.push(m.error.message), t = !1);
1065
- }
1066
- if (this._transitionClass !== "") {
1067
- const m = h({
1068
- transitionClass: this._transitionClass
1069
- });
1070
- m.status || (this._errors.push(m.error.message), t = !1);
1071
- }
1072
- const n = o("number", {
1073
- transitionDuration: this._transitionDuration
1074
- });
1075
- n.status || (this._errors.push(n.error.message), t = !1);
1076
- const a = o("number", {
1077
- openDuration: this._openDuration
1078
- });
1079
- a.status || (this._errors.push(a.error.message), t = !1);
1080
- const c = o("number", {
1081
- closeDuration: this._closeDuration
1082
- });
1083
- c.status || (this._errors.push(c.error.message), t = !1);
1084
- const _ = o("boolean", {
1085
- optionalKeySupport: this._optionalKeySupport,
1086
- allowMultipleExpand: this._allowMultipleExpand,
1087
- allowNoExpand: this._allowNoExpand
1088
- });
1089
- if (_.status || (this._errors.push(_.error.message), t = !1), this._key !== "") {
1090
- const m = o("string", { key: this._key });
1091
- m.status || (this._errors.push(m.error.message), t = !1);
1092
- }
1093
- const l = o("string", { prefix: this._prefix });
1094
- return l.status || (this._errors.push(l.error.message), t = !1), t;
1095
- }
1096
- /**
1097
- * Handles focus events throughout the accordion for proper use.
1098
- *
1099
- * - Adds a `focus` listener to every accordion item so when it gains focus,
1100
- * it will set the accordion's current child to the index of the item.
1101
- *
1102
- * @protected
1103
- */
1104
- _handleFocus() {
1105
- this.elements.accordionItems.forEach((t, e) => {
1106
- t.dom.toggle.addEventListener("focus", () => {
1107
- this.currentChild = e;
1108
- });
1109
- });
1110
- }
1111
- /**
1112
- * Handles click events throughout the accordion item for proper use.
1113
- *
1114
- * - Adds a `pointerup` listener to the accordion item toggles that will toggle each accordion item.
1115
- *
1116
- * @protected
1117
- */
1118
- _handleClick() {
1119
- this.elements.accordionItems.forEach((t, e) => {
1120
- t.dom.toggle.addEventListener("pointerup", () => {
1121
- this.currentChild = e, t.toggle();
1122
- });
1123
- });
1124
- }
1125
- /**
1126
- * Handles keydown events throughout the accordion item for proper use.
1127
- *
1128
- * This method exists to assist the _handleKeyup method.
1129
- *
1130
- * - Adds a `keydown` listener to all accordion item toggles.
1131
- * - Blocks propagation on "Space" and "Enter" keys.
1132
- * - _If_ optionalKeySupport is enabled, blocks propagation on the following keys:
1133
- * - "ArrowDown", "ArrowUp", "Home", and "End".
1134
- */
1135
- _handleKeydown() {
1136
- this.dom.accordionItemToggles.forEach((t) => {
1137
- t.addEventListener("keydown", (e) => {
1138
- const i = f(e);
1139
- (["Space", "Enter"].includes(i) || this.optionalKeySupport && ["ArrowDown", "ArrowUp", "Home", "End"].includes(i)) && p(e);
1140
- });
1141
- });
1142
- }
1143
- /**
1144
- * Handles keyup events throughout the accordion item for proper use.
1145
- *
1146
- * Adds the follow keybindings (explanations are taken from the WAI ARIA Practices Guide Accordion Pattern):
1147
- *
1148
- * - `Enter` or `Space`:
1149
- * - When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel.
1150
- * - When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
1151
- * - `Tab`: Moves focus to the next focusable element; all focusable elements in the accordion are included in the page `Tab` sequence.
1152
- * - `Shift + Tab`: Moves focus to the previous focusable element; all focusable elements in the accordion are included in the page `Tab` sequence.
1153
- * - `Down Arrow` (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
1154
- * - `Up Arrow` (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
1155
- * - `Home` (Optional): When focus is on an accordion header, moves focus to the first accordion header.
1156
- * - `End` (Optional): When focus is on an accordion header, moves focus to the last accordion header.
1157
- *
1158
- * Note: When the above explanations mention "accordion header", they are referring to the accordion item toggle.
1159
- */
1160
- _handleKeyup() {
1161
- this.dom.accordionItemToggles.forEach((t) => {
1162
- t.addEventListener("keyup", (e) => {
1163
- const i = f(e);
1164
- switch (i) {
1165
- case "Space":
1166
- case "Enter":
1167
- p(e), this.currentAccordionItem.toggle();
1168
- break;
1169
- }
1170
- if (this.optionalKeySupport)
1171
- switch (i) {
1172
- case "Home":
1173
- p(e), this.focusFirstChild();
1174
- break;
1175
- case "End":
1176
- p(e), this.focusLastChild();
1177
- break;
1178
- case "ArrowDown":
1179
- p(e), this.focusNextChild();
1180
- break;
1181
- case "ArrowUp":
1182
- p(e), this.focusPreviousChild();
1183
- break;
1184
- }
1185
- });
1186
- });
1187
- }
1188
- /**
1189
- * Sets the transition durations of the accordion as a CSS custom properties.
1190
- *
1191
- * The custom properties are:
1192
- * - `--graupl-accordion-transition-duration`,
1193
- * - `--graupl-accordion-open-transition-duration`, and
1194
- * - `--graupl-accordion-close-transition-duration`.
1195
- *
1196
- * The prefix of `graupl-` can be changed by setting the accordion's prefix value.
1197
- *
1198
- * @protected
1199
- */
1200
- _setTransitionDurations() {
1201
- this.dom.accordion.style.setProperty(
1202
- `--${this.prefix}accordion-transition-duration`,
1203
- `${this.transitionDuration}ms`
1204
- ), this.dom.accordion.style.setProperty(
1205
- `--${this.prefix}accordion-open-transition-duration`,
1206
- `${this.openDuration}ms`
1207
- ), this.dom.accordion.style.setProperty(
1208
- `--${this.prefix}accordion-close-transition-duration`,
1209
- `${this.closeDuration}ms`
1210
- );
1211
- }
1212
- /**
1213
- * Focus the accordion's current child.
1214
- *
1215
- * @public
1216
- */
1217
- focusCurrentChild() {
1218
- this.currentChild !== -1 && this.currentAccordionItem.focus();
1219
- }
1220
- /**
1221
- * Focuses the accordion's child at a given index.
1222
- *
1223
- * @public
1224
- *
1225
- * @param {number} index - The index of the child to focus.
1226
- */
1227
- focusChild(t) {
1228
- this.blurCurrentChild(), this.currentChild = t, this.focusCurrentChild();
1229
- }
1230
- /**
1231
- * Focuses the accordion's first child.
1232
- *
1233
- * @public
1234
- */
1235
- focusFirstChild() {
1236
- this.focusChild(0);
1237
- }
1238
- /**
1239
- * Focus the accordion's last child.
1240
- *
1241
- * @public
1242
- */
1243
- focusLastChild() {
1244
- this.focusChild(this.elements.accordionItems.length - 1);
1245
- }
1246
- /**
1247
- * Focus the accordion's next child.
1248
- *
1249
- * @public
1250
- */
1251
- focusNextChild() {
1252
- this.currentChild < this.elements.accordionItems.length - 1 ? this.focusChild(this.currentChild + 1) : this.focusCurrentChild();
1253
- }
1254
- /**
1255
- * Focus the accordion's previous child.
1256
- *
1257
- * @public
1258
- */
1259
- focusPreviousChild() {
1260
- this.currentChild > 0 ? this.focusChild(this.currentChild - 1) : this.focusCurrentChild();
1261
- }
1262
- /**
1263
- * Blurs the accordion's current child.
1264
- *
1265
- * @public
1266
- */
1267
- blurCurrentChild() {
1268
- this.currentChild !== -1 && this.currentAccordionItem.blur();
1269
- }
1270
- /**
1271
- * Open all accordion items.
1272
- *
1273
- * @public
1274
- */
1275
- openChildren() {
1276
- this.elements.accordionItems.forEach((t) => t.show());
1277
- }
1278
- /**
1279
- * Close all accordion items.
1280
- *
1281
- * @public
1282
- */
1283
- closeChildren() {
1284
- this.elements.accordionItems.forEach((t) => t.hide());
1285
- }
1286
- }
1287
- class B {
1288
- /**
1289
- * Constructs a new `Alert`.
1290
- *
1291
- * @param {object} options - The options object.
1292
- * @param {HTMLElement} options.alertElement - The alert element.
1293
- * @param {?HTMLElement} [options.controllerElement = null] - The controller element.
1294
- * @param {string|string[]|null} [options.showClass = show] - The class to add when the alert is shown.
1295
- * @param {string|string[]|null} [options.hideClass = hide] - The class to add when
1296
- * @param {string|string[]|null} [options.transitionClass = transitioning] - The class to add when the alert is transitioning between shown and hidden.
1297
- * @param {number} [options.transitionTimer = 150] - The time in milliseconds the transition will take.
1298
- * @param {boolean} [options.isHidden = false] - A flag to determine the initial state of the alert.
1299
- * @param {?string} [options.key = null] - The key used to generate IDs throughout the alert.
1300
- * @param {boolean} [options.initialize = false] - AA flag to initialize the alert immediately upon creation.
1301
- */
1302
- constructor({
1303
- alertElement: t,
1304
- controllerElement: e = null,
1305
- showClass: i = "show",
1306
- hideClass: n = "hide",
1307
- transitionClass: a = "transitioning",
1308
- transitionTimer: c = 150,
1309
- isHidden: _ = !1,
1310
- key: l = null,
1311
- initialize: m = !1
1312
- }) {
1313
- /**
1314
- * The HTML elements for the alert in the DOM.
1315
- *
1316
- * @protected
1317
- *
1318
- * @type {Object<HTMLElement>}
1319
- */
1320
- r(this, "_dom", {
1321
- alert: null,
1322
- controller: null
1323
- });
1324
- /**
1325
- * A flag to determine if the alert is hidden.
1326
- *
1327
- * @protected
1328
- *
1329
- * @type {boolean}
1330
- */
1331
- r(this, "_hidden", !1);
1332
- /**
1333
- * The class to use to show the alert.
1334
- *
1335
- * @protected
1336
- *
1337
- * @type {string|string[]}
1338
- */
1339
- r(this, "_showClass", "");
1340
- /**
1341
- * The class to use to hide the alert.
1342
- *
1343
- * @protected
1344
- *
1345
- * @type {string|string[]}
1346
- */
1347
- r(this, "_hideClass", "");
1348
- /**
1349
- * The class to use when transitioning the alert.
1350
- *
1351
- * @protected
1352
- *
1353
- * @type {string|string[]}
1354
- */
1355
- r(this, "_transitionClass", "");
1356
- /**
1357
- * The time in milliseconds the transition will take.
1358
- *
1359
- * @protected
1360
- *
1361
- * @type {number}
1362
- */
1363
- r(this, "_transitionTimer", 150);
1364
- /**
1365
- * The key used to generate IDs throughout the carousel.
1366
- *
1367
- * @protected
1368
- *
1369
- * @type {string}
1370
- */
1371
- r(this, "_key", "");
1372
- /**
1373
- * An array of error messages generated by the alert.
1374
- *
1375
- * @protected
1376
- *
1377
- * @type {string[]}
1378
- */
1379
- r(this, "_errors", []);
1380
- /**
1381
- * The event that is triggered when the alert is shown.
1382
- *
1383
- * @protected
1384
- *
1385
- * @event grauplAlertShow
1386
- *
1387
- * @type {CustomEvent}
1388
- *
1389
- * @property {boolean} bubbles - A flag to bubble the event.
1390
- * @property {Object<Alert>} detail - The details object container the Alert itself.
1391
- */
1392
- r(this, "_showEvent", new CustomEvent("grauplAlertShow", {
1393
- bubbles: !0,
1394
- detail: { alert: this }
1395
- }));
1396
- /**
1397
- * The event that is triggered when the alert is hidden.
1398
- *
1399
- * @protected
1400
- *
1401
- * @event grauplAlertHide
1402
- *
1403
- * @type {CustomEvent}
1404
- *
1405
- * @property {boolean} bubbles - A flag to bubble the event.
1406
- * @property {Object<Alert>} detail - The details object containing the Alert itself.
1407
- */
1408
- r(this, "_hideEvent", new CustomEvent("grauplAlertHide", {
1409
- bubbles: !0,
1410
- detail: { alert: this }
1411
- }));
1412
- this._dom.alert = t, this._dom.controller = e, this._showClass = i || "", this._hideClass = n || "", this._transitionClass = a || "", this._transitionTimer = c, this._hidden = _, this._key = l || "", m && this.initialize();
1413
- }
1414
- /**
1415
- * Initializes the alert.
1416
- */
1417
- initialize() {
1418
- try {
1419
- if (!this._validate())
1420
- throw new Error(
1421
- `Graupl Alert: cannot initialize alert. The following errors have been found:
1422
- - ${this.errors.join(
1423
- `
1424
- - `
1425
- )}`
1426
- );
1427
- this._generateKey(), this._setIds(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), g.initializeStorage("alerts"), g.pushToStorage("alerts", this.dom.alert.id, this);
1428
- } catch (t) {
1429
- console.error(t);
1430
- }
1431
- }
1432
- /**
1433
- * The HTML elements for the alert in the DOM.
1434
- *
1435
- * @readonly
1436
- *
1437
- * @see _dom
1438
- *
1439
- * @type {object}
1440
- */
1441
- get dom() {
1442
- return this._dom;
1443
- }
1444
- /**
1445
- * The class to use the show the alert.
1446
- *
1447
- * @type {string|string[]}
1448
- *
1449
- * @see _showClass
1450
- */
1451
- get showClass() {
1452
- return this._showClass;
1453
- }
1454
- /**
1455
- * The class to use to hide the alert.
1456
- *
1457
- * @type {string|string[]}
1458
- *
1459
- * @see _hideClass
1460
- */
1461
- get hideClass() {
1462
- return this._hideClass;
1463
- }
1464
- /**
1465
- * The class to use when transitioning the alert.
1466
- *
1467
- * @type {string|string[]}
1468
- *
1469
- * @see _transitionClass
1470
- */
1471
- get transitionClass() {
1472
- return this._transitionClass;
1473
- }
1474
- /**
1475
- * The time in milliseconds the transition will take.
1476
- *
1477
- * @type {number}
1478
- *
1479
- * @see _transitionTimer
1480
- */
1481
- get transitionTimer() {
1482
- return this._transitionTimer;
1483
- }
1484
- /**
1485
- * The key used to generate IDs throughout the accordion.
1486
- *
1487
- * @type {string}
1488
- *
1489
- * @see _key
1490
- */
1491
- get key() {
1492
- return this._key;
1493
- }
1494
- set showClass(t) {
1495
- h({ showClass: t }), this._showClass !== t && (this._showClass = t);
1496
- }
1497
- set hideClass(t) {
1498
- h({ hideClass: t }), this._hideClass !== t && (this._hideClass = t);
1499
- }
1500
- set transitionClass(t) {
1501
- h({ transitionClass: t }), this._transitionClass !== t && (this._transitionClass = t);
1502
- }
1503
- set transitionTimer(t) {
1504
- o("number", { transitionTimer: t }), this._transitionTimer !== t && (this._transitionTimer = t);
1505
- }
1506
- set key(t) {
1507
- o("string", { value: t }), this._key !== t && (this._key = t);
1508
- }
1509
- /**
1510
- * Validates all aspects of the alert to ensure proper functionality.
1511
- *
1512
- * @protected
1513
- *
1514
- * @return {boolean} - The result of the validation.
1515
- */
1516
- _validate() {
1517
- let t = !0, e;
1518
- if (this._dom.controller !== null ? e = C(HTMLElement, {
1519
- alertElement: this._dom.alert,
1520
- controllerElement: this._dom.controller
1521
- }) : e = C(HTMLElement, {
1522
- alertElement: this._dom.alert
1523
- }), e.status || (this._errors.push(e.message), t = !1), this._showClass !== "") {
1524
- const a = h({ showClass: this._showClass });
1525
- a.status || (this._errors.push(a.message), t = !1);
1526
- }
1527
- if (this._hideClass !== "") {
1528
- const a = h({ hideClass: this._hideClass });
1529
- a.status || (this._errors.push(a.message), t = !1);
1530
- }
1531
- if (this._transitionClass !== "") {
1532
- const a = h({
1533
- transitionClass: this._transitionClass
1534
- });
1535
- a.status || (this._errors.push(a.message), t = !1);
1536
- }
1537
- const i = o("number", {
1538
- transitionTimer: this._transitionTimer
1539
- });
1540
- i.status || (this._errors.push(i.message), t = !1);
1541
- const n = o("boolean", { isHidden: this._hidden });
1542
- return n.status || (this._errors.push(n.message), t = !1), t;
1543
- }
1544
- /**
1545
- * Generates a key for the alert.
1546
- *
1547
- * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
1548
- */
1549
- _generateKey(t = !1) {
1550
- (this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
1551
- }
1552
- /**
1553
- * Sets the IDs of the alert and it's children if they do not already exist.
1554
- *
1555
- * The generated IDs use the key and follow the format:
1556
- * - alert: `alert-${key}`
1557
- * - controller: `alert-controller-${key}`
1558
- */
1559
- _setIds() {
1560
- this.dom.alert.id = this.dom.alert.id || `alert-${this.key}`, this.dom.controller.id = this.dom.controller.id || `alert-controller-${this.key}`;
1561
- }
1562
- /**
1563
- * Shows the alert.
1564
- *
1565
- * @fires grauplAlertShow
1566
- *
1567
- * @param {boolean} [emit = true] - A toggle to emit the show event once shown.
1568
- */
1569
- show(t = !0) {
1570
- this._hidden && (this.transitionClass !== "" ? (u(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
1571
- this.hideClass !== "" && d(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
1572
- this.showClass !== "" && u(this.showClass, this.dom.alert), requestAnimationFrame(() => {
1573
- d(this.transitionClass, this.dom.alert);
1574
- });
1575
- });
1576
- })) : (this.showClass !== "" && u(this.showClass, this.dom.alert), this.hideClass !== "" && d(this.hideClass, this.dom.alert)), this._hidden = !1, t && this.dom.alert.dispatchEvent(this._hideEvent));
1577
- }
1578
- /**
1579
- * Hides the alert.
1580
- *
1581
- * @fires grauplAlertHide
1582
- *
1583
- * @param {boolean} [emit = true] - A toggle to emit the hide event once shown.
1584
- */
1585
- hide(t = !0) {
1586
- this._hidden || (this.transitionClass !== "" ? (u(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
1587
- this.showClass !== "" && d(this.showClass, this.dom.alert), requestAnimationFrame(() => {
1588
- this.transitionTimer > 0 ? setTimeout(() => {
1589
- this.hideClass !== "" && u(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
1590
- d(this.transitionClass, this.dom.alert);
1591
- });
1592
- }, this.transitionTimer) : (this.hideClass !== "" && u(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
1593
- d(this.transitionClass, this.dom.alert);
1594
- }));
1595
- });
1596
- })) : (this.hideClass !== "" && u(this.hideClass, this.dom.alert), this.showClass !== "" && d(this.showClass, this.dom.alert)), this._hidden = !0, t && this.dom.alert.dispatchEvent(this._hideEvent));
1597
- }
1598
- /**
1599
- * Handles click events throughout the alert for proper use.
1600
- *
1601
- * - Adds a `pointerup` listener to the controller that will hide the alert.
1602
- *
1603
- * @protected
1604
- */
1605
- _handleClick() {
1606
- this.dom.controller !== null && this.dom.controller.addEventListener("pointerup", () => this.hide());
1607
- }
1608
- /**
1609
- * Handles keydown events throughout the alert for proper use.
1610
- *
1611
- * This method exists to assist the _handleKeyup method.
1612
- *
1613
- * - Adds a `keydown` listener to the controller (if it exists).
1614
- * - Blocks propagation on "Space" and "Enter" keys.
1615
- */
1616
- _handleKeydown() {
1617
- this.dom.controller !== null && this.dom.controller.addEventListener("keydown", (t) => {
1618
- const e = f(t);
1619
- (e === "Space" || e === "Enter") && p(t);
1620
- });
1621
- }
1622
- /**
1623
- * Handles keyup events throughout the alert for proper use.
1624
- *
1625
- * - Adds a `keyup` listener to the controller (if it exists).
1626
- * - Hides the alert when the user hits "Space" or "Enter".
1627
- */
1628
- _handleKeyup() {
1629
- this.dom.controller !== null && this.dom.controller.addEventListener("keyup", (t) => {
1630
- const e = f(t);
1631
- (e === "Space" || e === "Enter") && this.hide();
1632
- });
1633
- }
1634
- }
1635
- class U {
1636
- /**
1637
- * Contructs a new `Carousel`.
1638
- *
1639
- * @param {object} options - The options for the generated carousel.
1640
- * @param {HTMLElement} options.carouselElement - The carousel element in the DOM.
1641
- * @param {string} [options.carouselItemSelector = .carousel-item] - The query selector string for carousel items.
1642
- * @param {string} [options.carouselItemContainerSelector = .carousel-item-container] - The query selector string for the carousel item container.
1643
- * @param {string} [options.carouselControlSelector = .carousel-control] - The query selector string for carousel controls.
1644
- * @param {string} [options.carouselControlContainerSelector = .carousel-control-container] - The query selector string for carousel control container.
1645
- * @param {string} [options.carouselTabSelector = .carousel-tab] - The query selector string for carousel tabs.
1646
- * @param {string} [options.carouselTabContainerSelector = .carousel-tab-container] - The query selector string for the carousel tab container.
1647
- * @param {string} [options.autoplaySelector = .autoplay] - The query selector string for the autoplay button.
1648
- * @param {string} [options.nextSelector = .next] - The query selector string for the next button.
1649
- * @param {string} [options.previousSelector = .previous] - The query selector string for the previous button.
1650
- * @param {?(string|string[])} [options.activeClass = active] - The class(es) to apply when a carousel item is active.
1651
- * @param {?(string|string[])} [options.previousClass = previous] - The class(es) to apply to a carousel item that is the previously active item.
1652
- * @param {?(string|string[])} [options.nextClass = next] - The class(es) to apply to a carousel item that is the next active item.
1653
- * @param {?(string|string[])} [options.playClass = play] - The class(es) to apply to the autoplay button when the carousel is paused.
1654
- * @param {?(string|string[])} [options.pauseClass = pause] - The class(es) to apply to the autoplay button when the carousel is playing.
1655
- * @param {boolean} [options.autoplay = true] - A flag to indicate if the carousel should autoplay.
1656
- * @param {number} [options.transitionDelay = 10000] - A flag to initialize the carousel immediately upon creation.
1657
- * @param {number} [options.transitionDuration = 500] - The duration time (in milliseconds) for the transition between carousel items.
1658
- * @param {?string} [options.playText = Play] - The text to use for the play button.
1659
- * @param {?string} [options.pauseText = Pause] - The text to use for the pause button.
1660
- * @param {?string} [options.prefix = graupl-] - The prefix to use for CSS custom properties.
1661
- * @param {?string} [options.key = null] - The key used to generate IDs throughout the carousel.
1662
- * @param {boolean} [options.initialize = false] - A flag to initialize the carousel immediately upon creation.
1663
- */
1664
- constructor({
1665
- carouselElement: t,
1666
- carouselItemSelector: e = ".carousel-item",
1667
- carouselItemContainerSelector: i = ".carousel-item-container",
1668
- carouselControlSelector: n = ".carousel-control",
1669
- carouselControlContainerSelector: a = ".carousel-control-container",
1670
- carouselTabSelector: c = ".carousel-tab",
1671
- carouselTabContainerSelector: _ = ".carousel-tab-container",
1672
- autoplaySelector: l = ".autoplay",
1673
- nextSelector: m = ".next",
1674
- previousSelector: E = ".previous",
1675
- activeClass: w = "active",
1676
- previousClass: I = "previous",
1677
- nextClass: b = "next",
1678
- playClass: k = "play",
1679
- pauseClass: A = "pause",
1680
- autoplay: T = !0,
1681
- transitionDelay: x = 1e4,
1682
- transitionDuration: S = 500,
1683
- playText: $ = "Play",
1684
- pauseText: L = "Pause",
1685
- prefix: M = "graupl-",
1686
- key: O = null,
1687
- initialize: K = !1
1688
- }) {
1689
- /**
1690
- * The DOM elements within the carousel.
1691
- *
1692
- * @protected
1693
- *
1694
- * @type {Object<HTMLElement, HTMLElement[]>}
1695
- *
1696
- * @property {HTMLElement} carousel - The carousel element.
1697
- * @property {HTMLElement[]} carouselItems - The carousel items.
1698
- * @property {HTMLElement} carouselItemContainer - The carousel item container.
1699
- * @property {HTMLElement[]} carouselControls - The carousel controls.
1700
- * @property {HTMLElement} carouselControlContainer - The carousel control container.
1701
- * @property {HTMLElement[]} carouselTabs - The carousel tabs.
1702
- * @property {HTMLElement} carouselTabContainer - The carousel tab container.
1703
- * @property {HTMLElement} autoplay - The autoplay button.
1704
- * @property {HTMLElement} next - The next button.
1705
- * @property {HTMLElement} previous - The previous button.
1706
- */
1707
- r(this, "_dom", {
1708
- carousel: null,
1709
- carouselItems: [],
1710
- carouselItemContainer: null,
1711
- carouselControls: [],
1712
- carouselControlContainer: null,
1713
- carouselTabs: [],
1714
- carouselTabContainer: null,
1715
- autoplay: null,
1716
- next: null,
1717
- previous: null
1718
- });
1719
- /**
1720
- * The query selectors used by the carousel to populate the dom.
1721
- *
1722
- * @protected
1723
- *
1724
- * @type {Object<string>}
1725
- *
1726
- * @property {string} carouselItems - The query selector string for carousel items.
1727
- * @property {string} carouselItemContainer - The query selector string for the carousel item container.
1728
- * @property {string} carouselControls - The query selector string for carousel controls.
1729
- * @property {string} carouselControlContainer - The query selector string for carousel control container.
1730
- * @property {string} carouselTabs - The query selector string for the carousel tabs.
1731
- * @property {string} carouselTabContainer - The query selector string for the carousel tab container.
1732
- * @property {string} autoplay - The query selector string for the autoplay button.
1733
- * @property {string} next - The query selector string for the next button.
1734
- * @property {string} previous - The query selector string for the previous button.
1735
- */
1736
- r(this, "_selectors", {
1737
- carouselItems: "",
1738
- carouselItemContainer: "",
1739
- carouselControls: "",
1740
- carouselControlContainer: "",
1741
- carouselTabs: "",
1742
- carouselTabContainer: "",
1743
- autoplay: "",
1744
- next: "",
1745
- previous: ""
1746
- });
1747
- /**
1748
- * The class(es) to apply when a carousel item is active.
1749
- *
1750
- * @protected
1751
- *
1752
- * @type {string|string[]}
1753
- */
1754
- r(this, "_activeClass", "active");
1755
- /**
1756
- * The class(es) to apply to a carousel item that is the previously active item.
1757
- *
1758
- * @protected
1759
- *
1760
- * @type {string|string[]}
1761
- */
1762
- r(this, "_previousClass", "previous");
1763
- /**
1764
- * The class(es) to apply to a carousel item that is the next active item.
1765
- *
1766
- * @protected
1767
- *
1768
- * @type {string|string[]}
1769
- */
1770
- r(this, "_nextClass", "next");
1771
- /**
1772
- * The class(es) to apply to the autoplay button when the carousel is paused.
1773
- *
1774
- * @protected
1775
- *
1776
- * @type {string|string[]}
1777
- */
1778
- r(this, "_playClass", "play");
1779
- /**
1780
- * The class(es) to apply to the autoplay button when the carousel is playing.
1781
- *
1782
- * @protected
1783
- *
1784
- * @type {string|string[]}
1785
- */
1786
- r(this, "_pauseClass", "pause");
1787
- /**
1788
- * The index of the currently active carousel item.
1789
- *
1790
- * @protected
1791
- *
1792
- * @type {number}
1793
- */
1794
- r(this, "_currentItem", 0);
1795
- /**
1796
- * A flag to indicate if the carousel is currently playing.
1797
- *
1798
- * @protected
1799
- *
1800
- * @type {boolean}
1801
- */
1802
- r(this, "_autoplay", !0);
1803
- /**
1804
- * A variable to delay transition slides in milliseconds.
1805
- *
1806
- * @protected
1807
- *
1808
- * @type {number}
1809
- */
1810
- r(this, "_transitionDelay", 1e4);
1811
- /**
1812
- * The duration time (in milliseconds) for the transition between carousel items.
1813
- *
1814
- * @protected
1815
- *
1816
- * @type {number}
1817
- */
1818
- r(this, "_transitionDuration", 500);
1819
- /**
1820
- * The label for the autoplay button when the carousel is paused.
1821
- *
1822
- * @protected
1823
- *
1824
- * @type {string}
1825
- */
1826
- r(this, "_playText", "Play");
1827
- /**
1828
- * The label for the autoplay button when the carousel is playing.
1829
- *
1830
- * @protected
1831
- *
1832
- * @type {string}
1833
- */
1834
- r(this, "_pauseText", "Pause");
1835
- /**
1836
- * The current action being performed by the carousel.
1837
- *
1838
- * @protected
1839
- *
1840
- * @type {string}
1841
- */
1842
- r(this, "_currentAction", "next");
1843
- /**
1844
- * The stored interval callback for autoplaying the carousel.
1845
- *
1846
- * @protected
1847
- *
1848
- * @type {?Function}
1849
- */
1850
- r(this, "_autoplayInterval", null);
1851
- /**
1852
- * The prefix to use for CSS custom properties.
1853
- *
1854
- * @protected
1855
- *
1856
- * @type {string}
1857
- */
1858
- r(this, "_prefix", "graupl-");
1859
- /**
1860
- * The key used to generate IDs throughout the carousel.
1861
- *
1862
- * @protected
1863
- *
1864
- * @type {string}
1865
- */
1866
- r(this, "_key", "");
1867
- /**
1868
- * An array of error messages generated by the carousel.
1869
- *
1870
- * @protected
1871
- *
1872
- * @type {string[]}
1873
- */
1874
- r(this, "_errors", []);
1875
- this._dom.carousel = t, this._selectors.carouselItems = e, this._selectors.carouselItemContainer = i, this._selectors.carouselControls = n, this._selectors.carouselControlContainer = a, this._selectors.carouselTabs = c, this._selectors.carouselTabContainer = _, this._selectors.autoplay = l, this._selectors.next = m, this._selectors.previous = E, this._activeClass = w || "", this._previousClass = I || "", this._nextClass = b || "", this._playClass = k || "", this._pauseClass = A || "", this._autoplay = T, this._transitionDelay = x, this._transitionDuration = S, this._playText = $ || "", this._pauseText = L || "", this._prefix = M || "", this._key = O || "", K && this.initialize();
1876
- }
1877
- /**
1878
- * Initializes the carousel.
1879
- */
1880
- initialize() {
1881
- try {
1882
- if (!this._validate())
1883
- throw new Error(
1884
- `Graupl Carousel: cannot initialize carousel. The following errors have been found:
1885
- - ${this.errors.join(
1886
- `
1887
- - `
1888
- )}`
1889
- );
1890
- this._generateKey(), this._setDOMElements(), this._setIds(), this._setAriaAttributes(), this.activateFirstItem(), this._handleAutoplay(), this._handleFocus(), this._handleClick(), this._handleHover(), this._handleKeydown(), this._handleKeyup(), this._setTransitionDuration(), g.initializeStorage("carousels"), g.pushToStorage("carousels", this.dom.carousel.id, this);
1891
- } catch (t) {
1892
- console.error(t);
1893
- }
1894
- }
1895
- /**
1896
- * The HTML elements for the carousel in the DOM.
1897
- *
1898
- * @readonly
1899
- *
1900
- * @type {Object<HTMLElement>}
1901
- *
1902
- * @see _dom
1903
- */
1904
- get dom() {
1905
- return this._dom;
1906
- }
1907
- /**
1908
- * The query selectors used by the carousel to populate the dom.
1909
- *
1910
- * @readonly
1911
- *
1912
- * @type {Object<string>}
1913
- *
1914
- * @see _selectors
1915
- */
1916
- get selectors() {
1917
- return this._selectors;
1918
- }
1919
- /**
1920
- * The class(es) to apply when a carousel item is active.
1921
- *
1922
- * @type {string|string[]}
1923
- *
1924
- * @see _activeClass
1925
- */
1926
- get activeClass() {
1927
- return this._activeClass;
1928
- }
1929
- /**
1930
- * The class(es) to apply to a carousel item that is the next active item.
1931
- *
1932
- * @type {string|string[]}
1933
- *
1934
- * @see _previousClass
1935
- */
1936
- get previousClass() {
1937
- return this._previousClass;
1938
- }
1939
- /**
1940
- * The class(es) to apply to a carousel item that is the next active item.
1941
- *
1942
- * @type {string|string[]}
1943
- *
1944
- * @see _nextClass
1945
- */
1946
- get nextClass() {
1947
- return this._nextClass;
1948
- }
1949
- /**
1950
- * The class(es) to apply to the autoplay button when the carousel is paused.
1951
- *
1952
- * @type {string|string[]}
1953
- *
1954
- * @see _playClass
1955
- */
1956
- get playClass() {
1957
- return this._playClass;
1958
- }
1959
- /**
1960
- * The class(es) to apply to the autoplay button when the carousel is playing.
1961
- *
1962
- * @type {string|string[]}
1963
- *
1964
- * @see _pauseClass
1965
- */
1966
- get pauseClass() {
1967
- return this._pauseClass;
1968
- }
1969
- /**
1970
- * The index of the currently active carousel item.
1971
- *
1972
- * @type {number}
1973
- *
1974
- * @see _currentItem
1975
- */
1976
- get currentItem() {
1977
- return this._currentItem;
1978
- }
1979
- /**
1980
- * The currently active carousel item.
1981
- *
1982
- * @readonly
1983
- *
1984
- * @type {HTMLElement}
1985
- */
1986
- get currentCarouselItem() {
1987
- return this.dom.carouselItems[this.currentItem];
1988
- }
1989
- /**
1990
- * The currently active carousel tab.
1991
- *
1992
- * @readonly
1993
- *
1994
- * @type {HTMLElement}
1995
- */
1996
- get currentCarouselTab() {
1997
- return this.dom.carouselTabs[this.currentItem];
1998
- }
1999
- /**
2000
- * A flag to indicate if the carousel is currently playing.
2001
- *
2002
- * @type {boolean}
2003
- *
2004
- * @see _autoplay
2005
- */
2006
- get autoplay() {
2007
- return this._autoplay;
2008
- }
2009
- /**
2010
- * The delay in milliseconds before transitioning slides.
2011
- *
2012
- * @type {number}
2013
- *
2014
- * @see _transitionDelay
2015
- */
2016
- get transitionDelay() {
2017
- return this._transitionDelay;
2018
- }
2019
- /**
2020
- * The duration time (in milliseconds) for the transition between carousel items.
2021
- *
2022
- * @type {number}
2023
- *
2024
- * @see _transitionDuration
2025
- */
2026
- get transitionDuration() {
2027
- return this._transitionDuration;
2028
- }
2029
- /**
2030
- * The label for the autoplay button when the carousel is paused.
2031
- *
2032
- * @type {string}
2033
- *
2034
- * @see _playText
2035
- */
2036
- get playText() {
2037
- return this._playText;
2038
- }
2039
- /**
2040
- * The label for the autoplay button when the carousel is playing.
2041
- *
2042
- * @type {string}
2043
- *
2044
- * @see _pauseText
2045
- */
2046
- get pauseText() {
2047
- return this._pauseText;
2048
- }
2049
- /**
2050
- * The prefix to use for CSS custom properties.
2051
- *
2052
- * @type {string}
2053
- *
2054
- * @see _prefix
2055
- */
2056
- get prefix() {
2057
- return this._prefix;
2058
- }
2059
- /**
2060
- * The key used to generate IDs throughout the accordion.
2061
- *
2062
- * @type {string}
2063
- *
2064
- * @see _key
2065
- */
2066
- get key() {
2067
- return this._key;
2068
- }
2069
- /**
2070
- * The current action being performed by the carousel.
2071
- *
2072
- * @type {string}
2073
- *
2074
- * @see _currentAction
2075
- */
2076
- get currentAction() {
2077
- return this._currentAction;
2078
- }
2079
- /**
2080
- * An array of error messages generated by the carousel.
2081
- *
2082
- * @readonly
2083
- *
2084
- * @type {string[]}
2085
- *
2086
- * @see _errors
2087
- */
2088
- get errors() {
2089
- return this._errors;
2090
- }
2091
- set currentItem(t) {
2092
- if (o("number", { value: t }), t === this.currentItem)
2093
- return;
2094
- t < 0 ? this._currentItem = 0 : t >= this.dom.carouselItems.length ? this._currentItem = this.dom.carouselItems.length - 1 : this._currentItem = t, this._dom.carousel.querySelectorAll(
2095
- this.selectors.carouselTab
2096
- ) && this.dom.carouselItems.forEach((i, n) => {
2097
- i.setAttribute("aria-selected", n === this._currentItem);
2098
- });
2099
- }
2100
- set autoplay(t) {
2101
- o("boolean", { value: t }), this._autoplay !== t && (this._autoplay = t);
2102
- }
2103
- set activeClass(t) {
2104
- h({ activeClass: t }), this._activeClass !== t && (this._activeClass = t);
2105
- }
2106
- set previousClass(t) {
2107
- h({ previousClass: t }), this._previousClass !== t && (this._previousClass = t);
2108
- }
2109
- set nextClass(t) {
2110
- h({ nextClass: t }), this._nextClass !== t && (this._nextClass = t);
2111
- }
2112
- set playClass(t) {
2113
- h({ playClass: t }), this._playClass !== t && (this._playClass = t);
2114
- }
2115
- set pauseClass(t) {
2116
- h({ pauseClass: t }), this._pauseClass !== t && (this._pauseClass = t);
2117
- }
2118
- set transitionDelay(t) {
2119
- o("number", { value: t }), t !== this.transitionDelay && t >= 0 && (this._currentItem = t);
2120
- }
2121
- set transitionDuration(t) {
2122
- o("number", { value: t }), this._transitionDuration !== t && t >= 0 && (this._transitionDuration = t, this._setTransitionDuration());
2123
- }
2124
- set playText(t) {
2125
- o("string", { value: t }), this._playText !== t && (this._playText = t);
2126
- }
2127
- set pauseText(t) {
2128
- o("string", { value: t }), this._pauseText !== t && (this._pauseText = t);
2129
- }
2130
- set prefix(t) {
2131
- o("string", { value: t }), this._prefix !== t && (this._prefix = t);
2132
- }
2133
- set key(t) {
2134
- o("string", { value: t }), this._key !== t && (this._key = t);
2135
- }
2136
- /**
2137
- * Validates all aspects of the carousel to ensure proper functionality.
2138
- *
2139
- * @protected
2140
- *
2141
- * @return {boolean} - The results of the validation.
2142
- */
2143
- _validate() {
2144
- let t = !0;
2145
- const e = C(HTMLElement, {
2146
- carousel: this.dom.carousel
2147
- });
2148
- e || (this._errors.push(e.message), t = !1);
2149
- const i = D({
2150
- carouselItemsSelector: this._selectors.carouselItems,
2151
- carouselItemContainerSelector: this._selectors.carouselItemContainer,
2152
- carouselControlsSelector: this._selectors.carouselControls,
2153
- carouselControlContainerSelector: this._selectors.carouselControlContainer,
2154
- carouselTabsSelector: this._selectors.carouselTabs,
2155
- carouselTabContainerSelector: this._selectors.carouselTabContainer,
2156
- autoplaySelector: this._selectors.autoplay,
2157
- nextSelector: this._selectors.next,
2158
- previousSelector: this._selectors.previous
2159
- });
2160
- i || (this._errors.push(i.message), t = !1);
2161
- const n = o("boolean", { autoplay: this.autoplay });
2162
- n || (this._errors.push(n.message), t = !1);
2163
- const a = o("number", {
2164
- transitionDelay: this._transitionDelay
2165
- });
2166
- a || (this._errors.push(a.message), t = !1);
2167
- const c = o("number", {
2168
- transitionDuration: this._transitionDuration
2169
- });
2170
- if (c || (this._errors.push(c.message), t = !1), this._activeClass !== "") {
2171
- const l = h({
2172
- activeClass: this._activeClass
2173
- });
2174
- l || (this._errors.push(l.message), t = !1);
2175
- }
2176
- if (this._previousClass !== "") {
2177
- const l = h({
2178
- previousClass: this._previousClass
2179
- });
2180
- l || (this._errors.push(l.message), t = !1);
2181
- }
2182
- if (this._nextClass !== "") {
2183
- const l = h({
2184
- nextClass: this._nextClass
2185
- });
2186
- l || (this._errors.push(l.message), t = !1);
2187
- }
2188
- if (this._playClass !== "") {
2189
- const l = h({
2190
- playClass: this._playClass
2191
- });
2192
- l || (this._errors.push(l.message), t = !1);
2193
- }
2194
- if (this._pauseClass !== "") {
2195
- const l = h({
2196
- pauseClass: this._pauseClass
2197
- });
2198
- l || (this._errors.push(l.message), t = !1);
2199
- }
2200
- if (this._playText !== "") {
2201
- const l = o("string", {
2202
- playText: this._playText
2203
- });
2204
- l || (this._errors.push(l.message), t = !1);
2205
- }
2206
- if (this._pauseText !== "") {
2207
- const l = o("string", {
2208
- pauseText: this._pauseText
2209
- });
2210
- l || (this._errors.push(l.message), t = !1);
2211
- }
2212
- const _ = o("string", { prefix: this._prefix });
2213
- return _ || (this._errors.push(_.message), t = !1), t;
2214
- }
2215
- /**
2216
- * Sets DOM elements within the carousel.
2217
- *
2218
- * The carousel element _cannot_ be set through this method.
2219
- *
2220
- * @protected
2221
- *
2222
- * @param {string} elementType - The type of element to populate.
2223
- * @param {HTMLElement} [base = this.dom.carousel] - The element used as the base for the querySelector.
2224
- * @param {boolean} [overwrite = true] - A flag to set if the existing elements will be overwritten.
2225
- */
2226
- _setDOMElementType(t, e = this.dom.carousel, i = !0) {
2227
- if (typeof this.selectors[t] == "string") {
2228
- if (t === "carousel")
2229
- throw new Error(
2230
- `Graupl Carousel: "${t}" element cannot be set through _setDOMElementType.`
2231
- );
2232
- if (e !== this.dom.carousel && C(HTMLElement, { base: e }), Array.isArray(this._dom[t])) {
2233
- const a = Array.from(
2234
- e.querySelectorAll(this.selectors[t])
2235
- ).filter(
2236
- (c) => c.parentElement === e
2237
- );
2238
- i ? this._dom[t] = a : this._dom[t] = [
2239
- ...this._dom[t],
2240
- ...a
2241
- ];
2242
- } else {
2243
- const n = e.querySelector(this.selectors[t]);
2244
- if (n && n.parentElement !== e)
2245
- return;
2246
- i && (this._dom[t] = n);
2247
- }
2248
- } else
2249
- throw new Error(
2250
- `Graupl Carousel: "${t}" is not a valid element type within the carousel.`
2251
- );
2252
- }
2253
- /**
2254
- * Resets DOM elements within the menu.
2255
- *
2256
- * The carousel element _cannot_ be reset through this method.
2257
- *
2258
- * @protected
2259
- *
2260
- * @param {string} elementType - The type of element to clear.
2261
- */
2262
- _resetDOMElementType(t) {
2263
- if (typeof this.selectors[t] == "string") {
2264
- if (t === "carousel")
2265
- throw new Error(
2266
- `Graupl Carousel: "${t}" element cannot be reset through _resetDOMElementType.`
2267
- );
2268
- Array.isArray(this._dom[t]) ? this._dom[t] = [] : this._dom[t] = null;
2269
- } else
2270
- throw new Error(
2271
- `Graupl Carousel: "${t}" is not a valid element type within the carousel.`
2272
- );
2273
- }
2274
- /**
2275
- * Sets all DOM elements within the carousel.
2276
- *
2277
- * Utilizes _setDOMElementType and _resetDOMElementType.
2278
- *
2279
- * @protected
2280
- */
2281
- _setDOMElements() {
2282
- this._setDOMElementType("carouselItemContainer"), this._setDOMElementType("carouselControlContainer"), this._setDOMElementType("carouselTabContainer"), this.dom.carouselItemContainer && this._setDOMElementType("carouselItems", this.dom.carouselItemContainer), this.dom.carouselControlContainer && (this._setDOMElementType(
2283
- "carouselControls",
2284
- this.dom.carouselControlContainer
2285
- ), this._setDOMElementType("autoplay", this.dom.carouselControlContainer), this._setDOMElementType("next", this.dom.carouselControlContainer), this._setDOMElementType("previous", this.dom.carouselControlContainer)), this._dom.carouselTabContainer && this._setDOMElementType("carouselTabs", this.dom.carouselTabContainer);
2286
- }
2287
- /**
2288
- * Generates a key for the carousel.
2289
- *
2290
- * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
2291
- */
2292
- _generateKey(t = !1) {
2293
- (this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
2294
- }
2295
- /**
2296
- * Sets the IDs of the carousel and it's children if they do not already exist.
2297
- *
2298
- * The generated IDs use the key and follow the format:
2299
- * - carousel: `carousel-${key}`
2300
- * - carousel items: `carousel-item-${key}-${index}`
2301
- * - carousel tabs: `carousel-tab-${key}-${index}`
2302
- */
2303
- _setIds() {
2304
- this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`, this.dom.carouselItems.forEach((t, e) => {
2305
- t.id = t.id || `carousel-item-${this.key}-${e}`;
2306
- }), this.dom.carouselTabs.forEach((t, e) => {
2307
- t.id = t.id || `carousel-tab-${this.key}-${e}`;
2308
- });
2309
- }
2310
- /**
2311
- * Sets the aria attributes for the carousel.
2312
- */
2313
- _setAriaAttributes() {
2314
- !y("section", { carousel: this.dom.carousel }) && !this.dom.carousel.getAttribute("role") !== "region" && this.dom.carousel.setAttribute("role", "group"), this._dom.carousel.setAttribute("aria-roledescription", "carousel"), this.dom.carouselTabContainer && this.dom.carouselTabContainer.setAttribute("role", "tablist"), this.dom.carouselTabs.forEach((t, e) => {
2315
- y("button", { tab: t }) || t.setAttribute("role", "button"), t.setAttribute("aria-selected", e === 0), t.setAttribute("aria-controls", this.dom.carouselItems[e].id);
2316
- });
2317
- }
2318
- /**
2319
- * Sets the interval for autoplaying the carousel.
2320
- *
2321
- * @protected
2322
- */
2323
- _setInterval() {
2324
- this._clearInterval(), this._autoplayInterval = setInterval(() => {
2325
- this.activateNextItem();
2326
- }, this.transitionDelay);
2327
- }
2328
- /**
2329
- * Clears the interval for autoplaying the carousel.
2330
- *
2331
- * @protected
2332
- */
2333
- _clearInterval() {
2334
- clearInterval(this._autoplayInterval);
2335
- }
2336
- /**
2337
- * Handles the autoplay functionality of the carousel.
2338
- *
2339
- * - Adds the appropriate class to the autoplay button.
2340
- * - Removes the appropriate class from the autoplay button.
2341
- * - Sets the appropriate aria-label for the autoplay button.
2342
- * - Sets the appropriate aria-live for the carousel.
2343
- * - Sets/clears the interval for autoplaying the carousel.
2344
- *
2345
- * @protected
2346
- */
2347
- _handleAutoplay() {
2348
- this.autoplay ? (u(this.pauseClass, this.dom.autoplay), d(this.playClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.pauseText), this.dom.carousel.setAttribute("aria-live", "off"), this._setInterval()) : (u(this.playClass, this.dom.autoplay), d(this.pauseClass, this.dom.autoplay), this.dom.autoplay.setAttribute("aria-label", this.playText), this.dom.carousel.setAttribute("aria-live", "polite"), this._clearInterval());
2349
- }
2350
- /**
2351
- * Handles the focus events throughout the carousel for proper use.
2352
- *
2353
- * - Adds a `focusin` listener to the carousel element to pause autoplay.
2354
- * - Adds a `focusout` listener to the carousel element to resume autoplay.
2355
- */
2356
- _handleFocus() {
2357
- this.dom.carousel.addEventListener("focusin", () => {
2358
- this.autoplay && this._clearInterval();
2359
- }), this.dom.carousel.addEventListener("focusout", () => {
2360
- this.autoplay && this._setInterval();
2361
- });
2362
- }
2363
- /**
2364
- * Handles the click events throughout the carousel.
2365
- *
2366
- * - Adds a `pointerup` listener to the next control to activate the next item.
2367
- * - Adds a `pointerup` listener to the previous control to activate the previous item.
2368
- * - Adds a `pointerup` listener to the autoplay control to toggle autoplay.
2369
- * - Adds a `pointerup` listener to each tab control to activate the corresponding item.
2370
- */
2371
- _handleClick() {
2372
- this.dom.next.addEventListener("pointerup", () => {
2373
- this.activateNextItem();
2374
- }), this.dom.previous.addEventListener("pointerup", () => {
2375
- this.activatePreviousItem();
2376
- }), this.dom.autoplay.addEventListener("pointerup", () => {
2377
- this.toggleAutoplay();
2378
- }), this.dom.carouselTabs.forEach((t, e) => {
2379
- t.addEventListener("pointerup", () => {
2380
- this.currentItem > e ? this._currentAction = "previous" : this._currentAction = "next", this.activateItem(e);
2381
- });
2382
- });
2383
- }
2384
- /**
2385
- * Handles the hover events throughout the carousel for proper use.
2386
- *
2387
- * - Adds a `pointerover` listener to the carousel to pause autoplay.
2388
- * - Adds a `pointerleave` listener to the carousel to resume autoplay.
2389
- */
2390
- _handleHover() {
2391
- this.dom.carousel.addEventListener("pointerover", () => {
2392
- this.autoplay && this._clearInterval();
2393
- }), this.dom.carousel.addEventListener("pointerleave", () => {
2394
- this.autoplay && this._setInterval();
2395
- });
2396
- }
2397
- /**
2398
- * Handles keydown events throughout the carousel item for proper use.
2399
- *
2400
- * - Adds a `keydown` listener to all control elements.
2401
- * - Prevents Space and Enter key events.
2402
- * - Adds a `keydown` listener to all tab elements.
2403
- * - Prevents Space and Enter key events.
2404
- */
2405
- _handleKeydown() {
2406
- this.dom.carouselControls.forEach((t) => {
2407
- t.addEventListener("keydown", (e) => {
2408
- switch (f(e)) {
2409
- case "Space":
2410
- case "Enter":
2411
- p(e);
2412
- break;
2413
- }
2414
- });
2415
- }), this.dom.carouselTabs.forEach((t) => {
2416
- t.addEventListener("keydown", (e) => {
2417
- switch (f(e)) {
2418
- case "Space":
2419
- case "Enter":
2420
- p(e);
2421
- break;
2422
- }
2423
- });
2424
- });
2425
- }
2426
- /**
2427
- * Handles keyup events throughout the carousel item for proper use.
2428
- *
2429
- * - Adds a `keyup` listener to all control elements.
2430
- * - Activates the next/previous item depending on which control is pressed.
2431
- * - Toggles autoplay if the autoplay control is pressed.
2432
- *
2433
- */
2434
- _handleKeyup() {
2435
- this.dom.next.addEventListener("keyup", (t) => {
2436
- switch (f(t)) {
2437
- case "Space":
2438
- case "Enter":
2439
- this.activateNextItem(), p(t);
2440
- break;
2441
- }
2442
- }), this.dom.previous.addEventListener("keyup", (t) => {
2443
- switch (f(t)) {
2444
- case "Space":
2445
- case "Enter":
2446
- this.activatePreviousItem(), p(t);
2447
- break;
2448
- }
2449
- }), this.dom.autoplay.addEventListener("keyup", (t) => {
2450
- switch (f(t)) {
2451
- case "Space":
2452
- case "Enter":
2453
- this.toggleAutoplay(), p(t);
2454
- break;
2455
- }
2456
- }), this.dom.carouselTabs.forEach((t, e) => {
2457
- t.addEventListener("keyup", (i) => {
2458
- switch (f(i)) {
2459
- case "Space":
2460
- case "Enter":
2461
- this.activateItem(e), p(i);
2462
- break;
2463
- }
2464
- });
2465
- });
2466
- }
2467
- /**
2468
- * Sets the transition duration for the carousel as a CSS custom property.
2469
- *
2470
- * The custom property is set as `--graupl-carousel-transition-duration`.
2471
- *
2472
- * @protected
2473
- */
2474
- _setTransitionDuration() {
2475
- this.dom.carousel.style.setProperty(
2476
- `--${this.prefix}carousel-transition-duration`,
2477
- `${this.transitionDuration}ms`
2478
- );
2479
- }
2480
- /**
2481
- * Activates the current carousel item.
2482
- *
2483
- * @public
2484
- */
2485
- activateCurrentItem() {
2486
- u(this.activeClass, this.currentCarouselItem), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !0), u(this.activeClass, this.currentCarouselTab));
2487
- }
2488
- /**
2489
- * Deactivates the current carousel item.
2490
- *
2491
- * @public
2492
- */
2493
- deactivateCurrentItem() {
2494
- d(this.activeClass, this.currentCarouselItem), this.currentCarouselTab && (this.currentCarouselTab.setAttribute("aria-selected", !1), d(this.activeClass, this.currentCarouselTab));
2495
- }
2496
- /**
2497
- * Activates the carousel item at a given index.
2498
- *
2499
- * @public
2500
- *
2501
- * @param {number} index - The index of the carousel item to activate.
2502
- */
2503
- activateItem(t) {
2504
- const e = this.currentItem;
2505
- this.dom.carousel.dataset.grauplAction = this._currentAction, this.autoplay && this._clearInterval(), u(this.previousClass, this.currentCarouselItem), u(this.nextClass, this.dom.carouselItems[t]), requestAnimationFrame(() => {
2506
- this.deactivateCurrentItem(), this.currentItem = t, this.activateCurrentItem(), requestAnimationFrame(() => {
2507
- setTimeout(() => {
2508
- d(this.previousClass, this.dom.carouselItems[e]), d(this.nextClass, this.currentCarouselItem);
2509
- }, this.transitionDuration);
2510
- });
2511
- }), this.autoplay && this._setInterval();
2512
- }
2513
- /**
2514
- * Activates the first carousel item.
2515
- *
2516
- * @public
2517
- */
2518
- activateFirstItem() {
2519
- this.activateItem(0);
2520
- }
2521
- /**
2522
- * Activates the last carousel item.
2523
- *
2524
- * @public
2525
- */
2526
- activateLastItem() {
2527
- this.activateItem(this.dom.carouselItems.length - 1);
2528
- }
2529
- /**
2530
- * Activates the next carousel item.
2531
- *
2532
- * @public
2533
- */
2534
- activateNextItem() {
2535
- this._currentAction = "next", this.currentItem + 1 >= this.dom.carouselItems.length ? this.activateFirstItem() : this.activateItem(this.currentItem + 1);
2536
- }
2537
- /**
2538
- * Activates the previous carousel item.
2539
- *
2540
- * @public
2541
- */
2542
- activatePreviousItem() {
2543
- this._currentAction = "previous", this.currentItem - 1 < 0 ? this.activateLastItem() : this.activateItem(this.currentItem - 1);
2544
- }
2545
- /**
2546
- * Toggles autoplay on the carousel.
2547
- *
2548
- * @public
2549
- */
2550
- toggleAutoplay() {
2551
- this.autoplay = !this.autoplay, this._handleAutoplay();
2552
- }
2553
- }
2554
- const J = {
2555
- Accordion: R,
2556
- Alert: B,
2557
- Carousel: U
2558
- };
2559
- export {
2560
- J as default
2561
- };