@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.10
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.
- package/.devcontainer/devcontainer.json +221 -0
- package/.env +3 -0
- package/.github/workflows/docs.yml +13 -6
- package/.github/workflows/prerelease.yml +125 -0
- package/.github/workflows/release.yml +111 -0
- package/.github/workflows/test.yml +54 -3
- package/.versionrc.cjs +12 -0
- package/.vscode/settings.json +10 -0
- package/CHANGELOG.md +203 -1
- package/build.js +4 -2
- package/combine-at-rules.cjs +61 -0
- package/container/.env +26 -0
- package/container/build/app.dockerfile +41 -0
- package/container/docker-compose.yml +27 -0
- package/dist/css/base/button.css +1 -1
- package/dist/css/base/button.css.map +1 -1
- package/dist/css/base/form.css +1 -1
- package/dist/css/base/form.css.map +1 -1
- package/dist/css/base/link.css +1 -1
- package/dist/css/base/link.css.map +1 -1
- package/dist/css/base/table.css +1 -1
- package/dist/css/base/table.css.map +1 -1
- package/dist/css/base.css +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/accordion.css +4 -1
- package/dist/css/component/accordion.css.map +1 -1
- package/dist/css/component/alert.css +1 -1
- package/dist/css/component/alert.css.map +1 -1
- package/dist/css/component/card.css +1 -1
- package/dist/css/component/card.css.map +1 -1
- package/dist/css/component/carousel.css +1 -1
- package/dist/css/component/carousel.css.map +1 -1
- package/dist/css/component/input-group.css +1 -1
- package/dist/css/component/input-group.css.map +1 -1
- package/dist/css/component/list.css +2 -0
- package/dist/css/component/list.css.map +1 -0
- package/dist/css/component/menu.css +1 -1
- package/dist/css/component/menu.css.map +1 -1
- package/dist/css/component/navigation.css +1 -1
- package/dist/css/component/navigation.css.map +1 -1
- package/dist/css/component.css +4 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +4 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/init.css.map +1 -1
- package/dist/css/layout/columns.css +1 -1
- package/dist/css/layout/columns.css.map +1 -1
- package/dist/css/layout/container.css +1 -1
- package/dist/css/layout/container.css.map +1 -1
- package/dist/css/layout/flex-columns.css +1 -1
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +4 -1
- package/dist/css/layout.css.map +1 -1
- package/dist/css/normalize.css.map +1 -1
- package/dist/css/state/focus.css +1 -1
- package/dist/css/state/focus.css.map +1 -1
- package/dist/css/state.css +1 -1
- package/dist/css/state.css.map +1 -1
- package/dist/css/theme/color.css.map +1 -1
- package/dist/css/theme/typography.css +1 -1
- package/dist/css/theme/typography.css.map +1 -1
- package/dist/css/theme.css +1 -1
- package/dist/css/theme.css.map +1 -1
- package/dist/css/utilities/alignment.css.map +1 -1
- package/dist/css/utilities/background.css +2 -0
- package/dist/css/utilities/background.css.map +1 -0
- package/dist/css/utilities/border.css +2 -0
- package/dist/css/utilities/border.css.map +1 -0
- package/dist/css/utilities/color.css +1 -1
- package/dist/css/utilities/color.css.map +1 -1
- package/dist/css/utilities/container.css +2 -0
- package/dist/css/utilities/container.css.map +1 -0
- package/dist/css/utilities/display.css +1 -1
- package/dist/css/utilities/display.css.map +1 -1
- package/dist/css/utilities/flex.css +1 -1
- package/dist/css/utilities/flex.css.map +1 -1
- package/dist/css/utilities/gradient.css +2 -0
- package/dist/css/utilities/gradient.css.map +1 -0
- package/dist/css/utilities/height.css +1 -1
- package/dist/css/utilities/height.css.map +1 -1
- package/dist/css/utilities/inset.css +1 -1
- package/dist/css/utilities/inset.css.map +1 -1
- package/dist/css/utilities/justification.css.map +1 -1
- package/dist/css/utilities/list.css.map +1 -1
- package/dist/css/utilities/order.css.map +1 -1
- package/dist/css/utilities/position.css +2 -0
- package/dist/css/utilities/position.css.map +1 -0
- package/dist/css/utilities/ratio.css +1 -1
- package/dist/css/utilities/ratio.css.map +1 -1
- package/dist/css/utilities/spacing.css +1 -1
- package/dist/css/utilities/spacing.css.map +1 -1
- package/dist/css/utilities/typography.css +1 -1
- package/dist/css/utilities/typography.css.map +1 -1
- package/dist/css/utilities/visibility.css +1 -1
- package/dist/css/utilities/visibility.css.map +1 -1
- package/dist/css/utilities/visually-hidden.css +2 -0
- package/dist/css/utilities/visually-hidden.css.map +1 -0
- package/dist/css/utilities/width.css +1 -1
- package/dist/css/utilities/width.css.map +1 -1
- package/dist/css/utilities/z-index.css +2 -0
- package/dist/css/utilities/z-index.css.map +1 -0
- package/dist/css/utilities.css +1 -1
- package/dist/css/utilities.css.map +1 -1
- package/dist/js/graupl.cjs.js +5 -3
- package/dist/js/graupl.esm.js +1305 -206
- package/dist/js/graupl.iife.js +5 -3
- package/docs/.vitepress/config.js +31 -1
- package/docs/.vitepress/theme/custom.scss +16 -16
- package/docs/compiling-graupl.md +6 -5
- package/docs/components/alert.md +28 -28
- package/docs/components/button.md +36 -36
- package/docs/components/card.md +39 -39
- package/docs/components/inputgroup.md +12 -12
- package/docs/components/menu.md +112 -112
- package/docs/components/navigation.md +52 -52
- package/docs/content.md +86 -86
- package/docs/defaults.md +10 -10
- package/docs/forms.md +34 -34
- package/docs/layout.md +21 -21
- package/docs/state.md +8 -8
- package/docs/theme.md +58 -58
- package/docs/utilities/alignment.md +411 -0
- package/docs/utilities/background.md +192 -0
- package/docs/utilities/border.md +268 -0
- package/docs/utilities/color.md +348 -0
- package/docs/utilities/container.md +3 -0
- package/docs/utilities/display.md +3 -0
- package/docs/utilities/flex.md +3 -0
- package/docs/utilities/gradient.md +3 -0
- package/docs/utilities/height.md +3 -0
- package/docs/utilities/inset.md +3 -0
- package/docs/utilities/justification.md +3 -0
- package/docs/utilities/list.md +3 -0
- package/docs/utilities/order.md +3 -0
- package/docs/utilities/position.md +3 -0
- package/docs/utilities/ratio.md +3 -0
- package/docs/utilities/responsive-classes.md +3 -0
- package/docs/utilities/spacing.md +3 -0
- package/docs/utilities/typography.md +3 -0
- package/docs/utilities/visibility.md +3 -0
- package/docs/utilities/visually-hidden.md +3 -0
- package/docs/utilities/width.md +3 -0
- package/docs/utilities/z-index.md +3 -0
- package/docs/utilities.md +1 -1
- package/favicon.ico +0 -0
- package/index.html +418 -55
- package/logo.svg +296 -0
- package/package.json +33 -37
- package/packages/core/build.js +9 -0
- package/packages/core/dist/css/base/button.css +2 -0
- package/packages/core/dist/css/base/button.css.map +1 -0
- package/packages/core/dist/css/base/form.css +2 -0
- package/packages/core/dist/css/base/form.css.map +1 -0
- package/packages/core/dist/css/base/link.css +2 -0
- package/packages/core/dist/css/base/link.css.map +1 -0
- package/packages/core/dist/css/base/table.css +2 -0
- package/packages/core/dist/css/base/table.css.map +1 -0
- package/packages/core/dist/css/base.css +2 -0
- package/packages/core/dist/css/base.css.map +1 -0
- package/packages/core/dist/css/component/accordion.css +5 -0
- package/packages/core/dist/css/component/accordion.css.map +1 -0
- package/packages/core/dist/css/component/alert.css +2 -0
- package/packages/core/dist/css/component/alert.css.map +1 -0
- package/packages/core/dist/css/component/card.css +2 -0
- package/packages/core/dist/css/component/card.css.map +1 -0
- package/packages/core/dist/css/component/carousel.css +2 -0
- package/packages/core/dist/css/component/carousel.css.map +1 -0
- package/packages/core/dist/css/component/input-group.css +2 -0
- package/packages/core/dist/css/component/input-group.css.map +1 -0
- package/packages/core/dist/css/component/list.css +2 -0
- package/packages/core/dist/css/component/list.css.map +1 -0
- package/packages/core/dist/css/component/menu.css +2 -0
- package/packages/core/dist/css/component/menu.css.map +1 -0
- package/packages/core/dist/css/component/navigation.css +2 -0
- package/packages/core/dist/css/component/navigation.css.map +1 -0
- package/packages/core/dist/css/component.css +5 -0
- package/packages/core/dist/css/component.css.map +1 -0
- package/packages/core/dist/css/graupl.css +5 -0
- package/packages/core/dist/css/graupl.css.map +1 -0
- package/{src/scss/_init.scss → packages/core/dist/css/init.css} +1 -2
- package/packages/core/dist/css/init.css.map +1 -0
- package/packages/core/dist/css/layout/columns.css +2 -0
- package/packages/core/dist/css/layout/columns.css.map +1 -0
- package/packages/core/dist/css/layout/container.css +2 -0
- package/packages/core/dist/css/layout/container.css.map +1 -0
- package/packages/core/dist/css/layout/flex-columns.css +2 -0
- package/packages/core/dist/css/layout/flex-columns.css.map +1 -0
- package/packages/core/dist/css/layout.css +5 -0
- package/packages/core/dist/css/layout.css.map +1 -0
- package/packages/core/dist/css/normalize.css +2 -0
- package/packages/core/dist/css/normalize.css.map +1 -0
- package/packages/core/dist/css/state/focus.css +2 -0
- package/packages/core/dist/css/state/focus.css.map +1 -0
- package/packages/core/dist/css/state.css +2 -0
- package/packages/core/dist/css/state.css.map +1 -0
- package/packages/core/dist/css/theme/color.css +2 -0
- package/packages/core/dist/css/theme/color.css.map +1 -0
- package/packages/core/dist/css/theme/typography.css +2 -0
- package/packages/core/dist/css/theme/typography.css.map +1 -0
- package/packages/core/dist/css/theme.css +2 -0
- package/packages/core/dist/css/theme.css.map +1 -0
- package/packages/core/dist/css/utilities/alignment.css +2 -0
- package/packages/core/dist/css/utilities/alignment.css.map +1 -0
- package/packages/core/dist/css/utilities/background.css +2 -0
- package/packages/core/dist/css/utilities/background.css.map +1 -0
- package/packages/core/dist/css/utilities/border.css +2 -0
- package/packages/core/dist/css/utilities/border.css.map +1 -0
- package/packages/core/dist/css/utilities/color.css +2 -0
- package/packages/core/dist/css/utilities/color.css.map +1 -0
- package/packages/core/dist/css/utilities/container.css +2 -0
- package/packages/core/dist/css/utilities/container.css.map +1 -0
- package/packages/core/dist/css/utilities/display.css +2 -0
- package/packages/core/dist/css/utilities/display.css.map +1 -0
- package/packages/core/dist/css/utilities/flex.css +2 -0
- package/packages/core/dist/css/utilities/flex.css.map +1 -0
- package/packages/core/dist/css/utilities/gradient.css +2 -0
- package/packages/core/dist/css/utilities/gradient.css.map +1 -0
- package/packages/core/dist/css/utilities/height.css +2 -0
- package/packages/core/dist/css/utilities/height.css.map +1 -0
- package/packages/core/dist/css/utilities/inset.css +2 -0
- package/packages/core/dist/css/utilities/inset.css.map +1 -0
- package/packages/core/dist/css/utilities/justification.css +2 -0
- package/packages/core/dist/css/utilities/justification.css.map +1 -0
- package/packages/core/dist/css/utilities/list.css +2 -0
- package/packages/core/dist/css/utilities/list.css.map +1 -0
- package/packages/core/dist/css/utilities/order.css +2 -0
- package/packages/core/dist/css/utilities/order.css.map +1 -0
- package/packages/core/dist/css/utilities/position.css +2 -0
- package/packages/core/dist/css/utilities/position.css.map +1 -0
- package/packages/core/dist/css/utilities/ratio.css +2 -0
- package/packages/core/dist/css/utilities/ratio.css.map +1 -0
- package/packages/core/dist/css/utilities/spacing.css +2 -0
- package/packages/core/dist/css/utilities/spacing.css.map +1 -0
- package/packages/core/dist/css/utilities/typography.css +2 -0
- package/packages/core/dist/css/utilities/typography.css.map +1 -0
- package/packages/core/dist/css/utilities/visibility.css +2 -0
- package/packages/core/dist/css/utilities/visibility.css.map +1 -0
- package/packages/core/dist/css/utilities/visually-hidden.css +2 -0
- package/packages/core/dist/css/utilities/visually-hidden.css.map +1 -0
- package/packages/core/dist/css/utilities/width.css +2 -0
- package/packages/core/dist/css/utilities/width.css.map +1 -0
- package/packages/core/dist/css/utilities/z-index.css +2 -0
- package/packages/core/dist/css/utilities/z-index.css.map +1 -0
- package/packages/core/dist/css/utilities.css +2 -0
- package/packages/core/dist/css/utilities.css.map +1 -0
- package/packages/core/package.json +58 -0
- package/packages/core/scss/base/button.scss +3 -0
- package/packages/core/scss/base/form.scss +3 -0
- package/packages/core/scss/base/link.scss +3 -0
- package/packages/core/scss/base/table.scss +3 -0
- package/packages/core/scss/base.scss +3 -0
- package/packages/core/scss/component/accordion.scss +3 -0
- package/packages/core/scss/component/alert.scss +3 -0
- package/packages/core/scss/component/card.scss +3 -0
- package/packages/core/scss/component/carousel.scss +3 -0
- package/packages/core/scss/component/input-group.scss +3 -0
- package/packages/core/scss/component/list.scss +3 -0
- package/packages/core/scss/component/menu.scss +3 -0
- package/packages/core/scss/component/navigation.scss +3 -0
- package/packages/core/scss/component.scss +3 -0
- package/packages/core/scss/graupl.scss +3 -0
- package/packages/core/scss/init.scss +3 -0
- package/packages/core/scss/layout/columns.scss +3 -0
- package/packages/core/scss/layout/container.scss +3 -0
- package/packages/core/scss/layout/flex-columns.scss +3 -0
- package/packages/core/scss/layout.scss +3 -0
- package/packages/core/scss/normalize.scss +3 -0
- package/packages/core/scss/state/focus.scss +3 -0
- package/packages/core/scss/state.scss +3 -0
- package/packages/core/scss/theme/color.scss +3 -0
- package/packages/core/scss/theme/typography.scss +3 -0
- package/packages/core/scss/theme.scss +3 -0
- package/packages/core/scss/utilities/alignment.scss +3 -0
- package/packages/core/scss/utilities/background.scss +3 -0
- package/packages/core/scss/utilities/border.scss +3 -0
- package/packages/core/scss/utilities/color.scss +3 -0
- package/packages/core/scss/utilities/container.scss +3 -0
- package/packages/core/scss/utilities/display.scss +3 -0
- package/packages/core/scss/utilities/flex.scss +3 -0
- package/packages/core/scss/utilities/gradient.scss +3 -0
- package/packages/core/scss/utilities/height.scss +3 -0
- package/packages/core/scss/utilities/inset.scss +3 -0
- package/packages/core/scss/utilities/justification.scss +3 -0
- package/packages/core/scss/utilities/list.scss +3 -0
- package/packages/core/scss/utilities/order.scss +3 -0
- package/{scss/utilities/postion.scss → packages/core/scss/utilities/position.scss} +1 -1
- package/packages/core/scss/utilities/ratio.scss +3 -0
- package/packages/core/scss/utilities/spacing.scss +3 -0
- package/packages/core/scss/utilities/typography.scss +3 -0
- package/packages/core/scss/utilities/visibility.scss +3 -0
- package/packages/core/scss/utilities/visually-hidden.scss +3 -0
- package/packages/core/scss/utilities/width.scss +3 -0
- package/packages/core/scss/utilities/z-index.scss +3 -0
- package/packages/core/scss/utilities.scss +3 -0
- package/{src → packages/core/src}/scss/_defaults.scss +59 -11
- package/{src → packages/core/src}/scss/_index.scss +1 -1
- package/packages/core/src/scss/_init.scss +6 -0
- package/{src → packages/core/src}/scss/_normalize.scss +1 -1
- package/packages/core/src/scss/_variables.scss +95 -0
- package/{src → packages/core/src}/scss/base/_index.scss +1 -1
- package/{src → packages/core/src}/scss/base/button/_defaults.scss +13 -24
- package/packages/core/src/scss/base/button/_index.scss +206 -0
- package/packages/core/src/scss/base/button/_mixins.scss +104 -0
- package/packages/core/src/scss/base/button/_variables.scss +252 -0
- package/{src → packages/core/src}/scss/base/form/_defaults.scss +8 -1
- package/packages/core/src/scss/base/form/_index.scss +227 -0
- package/packages/core/src/scss/base/form/_variables.scss +245 -0
- package/packages/core/src/scss/base/link/_defaults.scss +35 -0
- package/packages/core/src/scss/base/link/_index.scss +245 -0
- package/packages/core/src/scss/base/link/_variables.scss +370 -0
- package/packages/core/src/scss/base/table/_defaults.scss +68 -0
- package/packages/core/src/scss/base/table/_index.scss +314 -0
- package/packages/core/src/scss/base/table/_variables.scss +309 -0
- package/{src → packages/core/src}/scss/component/_index.scss +2 -1
- package/{src → packages/core/src}/scss/component/accordion/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/component/accordion/_index.scss +78 -60
- package/{src → packages/core/src}/scss/component/accordion/_variables.scss +127 -87
- package/{src → packages/core/src}/scss/component/alert/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/component/alert/_index.scss +51 -50
- package/packages/core/src/scss/component/alert/_variables.scss +200 -0
- package/{src → packages/core/src}/scss/component/card/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/component/card/_index.scss +53 -19
- package/packages/core/src/scss/component/card/_variables.scss +216 -0
- package/{src → packages/core/src}/scss/component/carousel/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/component/carousel/_index.scss +32 -28
- package/{src → packages/core/src}/scss/component/carousel/_variables.scss +22 -22
- package/{src → packages/core/src}/scss/component/input-group/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/component/input-group/_index.scss +2 -2
- package/{src → packages/core/src}/scss/component/input-group/_variables.scss +13 -13
- package/{src/scss/utilities/order → packages/core/src/scss/component/list}/_defaults.scss +7 -14
- package/packages/core/src/scss/component/list/_index.scss +52 -0
- package/packages/core/src/scss/component/list/_variables.scss +236 -0
- package/{src → packages/core/src}/scss/component/menu/_defaults.scss +11 -20
- package/packages/core/src/scss/component/menu/_index.scss +308 -0
- package/packages/core/src/scss/component/menu/_variables.scss +642 -0
- package/packages/core/src/scss/component/navigation/_defaults.scss +23 -0
- package/packages/core/src/scss/component/navigation/_index.scss +190 -0
- package/packages/core/src/scss/component/navigation/_variables.scss +290 -0
- package/packages/core/src/scss/functions/_container.scss +38 -0
- package/packages/core/src/scss/functions/_important.scss +36 -0
- package/{src → packages/core/src}/scss/functions/_screen.scss +9 -1
- package/{src → packages/core/src}/scss/functions/_theme.scss +2 -2
- package/packages/core/src/scss/functions/_utility.scss +28 -0
- package/{src → packages/core/src}/scss/layout/_index.scss +1 -1
- package/{src → packages/core/src}/scss/layout/columns/_defaults.scss +9 -4
- package/packages/core/src/scss/layout/columns/_index.scss +137 -0
- package/{src → packages/core/src}/scss/layout/columns/_variables.scss +13 -9
- package/packages/core/src/scss/layout/container/_defaults.scss +35 -0
- package/packages/core/src/scss/layout/container/_index.scss +628 -0
- package/packages/core/src/scss/layout/container/_variables.scss +114 -0
- package/packages/core/src/scss/layout/flex-columns/_defaults.scss +28 -0
- package/packages/core/src/scss/layout/flex-columns/_index.scss +184 -0
- package/{src → packages/core/src}/scss/layout/flex-columns/_variables.scss +9 -5
- package/{src → packages/core/src}/scss/mixins/_animation.scss +1 -1
- package/packages/core/src/scss/mixins/_container.scss +80 -0
- package/{src → packages/core/src}/scss/mixins/_layer.scss +6 -2
- package/{src → packages/core/src}/scss/mixins/_screen.scss +25 -4
- package/packages/core/src/scss/mixins/_state.scss +18 -0
- package/packages/core/src/scss/mixins/_theme.scss +15 -0
- package/packages/core/src/scss/mixins/_utility.scss +185 -0
- package/packages/core/src/scss/mixins/_visually-hidden.scss +30 -0
- package/packages/core/src/scss/state/_index.scss +3 -0
- package/{src → packages/core/src}/scss/state/focus/_defaults.scss +1 -2
- package/packages/core/src/scss/state/focus/_index.scss +42 -0
- package/packages/core/src/scss/state/focus/_mixins.scss +13 -0
- package/packages/core/src/scss/state/focus/_variables.scss +50 -0
- package/{src → packages/core/src}/scss/theme/_index.scss +1 -1
- package/{src → packages/core/src}/scss/theme/color/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/theme/color/_index.scss +8 -8
- package/{src → packages/core/src}/scss/theme/color/_variables.scss +12 -8
- package/{src → packages/core/src}/scss/theme/typography/_defaults.scss +1 -1
- package/{src → packages/core/src}/scss/theme/typography/_index.scss +10 -1
- package/packages/core/src/scss/theme/typography/_variables.scss +248 -0
- package/{src → packages/core/src}/scss/utilities/_index.scss +7 -1
- package/packages/core/src/scss/utilities/_template/_defaults.scss +41 -0
- package/packages/core/src/scss/utilities/_template/_index.scss +171 -0
- package/{src/scss/utilities/alignment → packages/core/src/scss/utilities/_template}/_variables.scss +1 -1
- package/{src → packages/core/src}/scss/utilities/alignment/_defaults.scss +21 -7
- package/packages/core/src/scss/utilities/alignment/_index.scss +336 -0
- package/{src/scss/utilities/display → packages/core/src/scss/utilities/alignment}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/background/_defaults.scss +122 -0
- package/packages/core/src/scss/utilities/background/_index.scss +634 -0
- package/packages/core/src/scss/utilities/background/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/border/_defaults.scss +73 -0
- package/packages/core/src/scss/utilities/border/_index.scss +558 -0
- package/{src/scss/utilities/list → packages/core/src/scss/utilities/border}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/color/_defaults.scss +49 -0
- package/packages/core/src/scss/utilities/color/_index.scss +469 -0
- package/{src/scss/utilities/flex → packages/core/src/scss/utilities/color}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/container/_defaults.scss +40 -0
- package/packages/core/src/scss/utilities/container/_index.scss +174 -0
- package/packages/core/src/scss/utilities/container/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/display/_defaults.scss +47 -0
- package/packages/core/src/scss/utilities/display/_index.scss +184 -0
- package/{src/scss/utilities/inset → packages/core/src/scss/utilities/display}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/flex/_defaults.scss +99 -0
- package/packages/core/src/scss/utilities/flex/_index.scss +486 -0
- package/{src/scss/utilities/color → packages/core/src/scss/utilities/flex}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/gradient/_defaults.scss +70 -0
- package/packages/core/src/scss/utilities/gradient/_index.scss +696 -0
- package/packages/core/src/scss/utilities/gradient/_variables.scss +29 -0
- package/packages/core/src/scss/utilities/height/_defaults.scss +54 -0
- package/packages/core/src/scss/utilities/height/_index.scss +525 -0
- package/packages/core/src/scss/utilities/height/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/inset/_defaults.scss +55 -0
- package/packages/core/src/scss/utilities/inset/_index.scss +258 -0
- package/packages/core/src/scss/utilities/inset/_variables.scss +6 -0
- package/{src → packages/core/src}/scss/utilities/justification/_defaults.scss +21 -7
- package/packages/core/src/scss/utilities/justification/_index.scss +333 -0
- package/packages/core/src/scss/utilities/justification/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/list/_defaults.scss +53 -0
- package/packages/core/src/scss/utilities/list/_index.scss +253 -0
- package/packages/core/src/scss/utilities/list/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/order/_defaults.scss +36 -0
- package/packages/core/src/scss/utilities/order/_index.scss +246 -0
- package/packages/core/src/scss/utilities/order/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/position/_defaults.scss +41 -0
- package/packages/core/src/scss/utilities/position/_index.scss +178 -0
- package/{src/scss/utilities/height → packages/core/src/scss/utilities/position}/_variables.scss +1 -1
- package/packages/core/src/scss/utilities/ratio/_defaults.scss +42 -0
- package/packages/core/src/scss/utilities/ratio/_index.scss +188 -0
- package/{src → packages/core/src}/scss/utilities/ratio/_variables.scss +2 -2
- package/{src → packages/core/src}/scss/utilities/spacing/_defaults.scss +19 -4
- package/packages/core/src/scss/utilities/spacing/_index.scss +970 -0
- package/packages/core/src/scss/utilities/spacing/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/typography/_defaults.scss +58 -0
- package/packages/core/src/scss/utilities/typography/_index.scss +1089 -0
- package/packages/core/src/scss/utilities/typography/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/visibility/_defaults.scss +39 -0
- package/packages/core/src/scss/utilities/visibility/_index.scss +173 -0
- package/packages/core/src/scss/utilities/visibility/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/visually-hidden/_defaults.scss +29 -0
- package/packages/core/src/scss/utilities/visually-hidden/_index.scss +189 -0
- package/packages/core/src/scss/utilities/visually-hidden/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/width/_defaults.scss +54 -0
- package/packages/core/src/scss/utilities/width/_index.scss +525 -0
- package/packages/core/src/scss/utilities/width/_variables.scss +6 -0
- package/packages/core/src/scss/utilities/z-index/_defaults.scss +40 -0
- package/packages/core/src/scss/utilities/z-index/_index.scss +173 -0
- package/packages/core/src/scss/utilities/z-index/_variables.scss +6 -0
- package/packages/core/vite.config.js +28 -0
- package/packages/icons/dist/css/base/button.css +2 -0
- package/packages/icons/dist/css/base/button.css.map +1 -0
- package/packages/icons/dist/css/base/link.css +2 -0
- package/packages/icons/dist/css/base/link.css.map +1 -0
- package/packages/icons/dist/css/base.css +2 -0
- package/packages/icons/dist/css/base.css.map +1 -0
- package/packages/icons/dist/css/component/icon.css +2 -0
- package/packages/icons/dist/css/component/icon.css.map +1 -0
- package/packages/icons/dist/css/component.css +2 -0
- package/packages/icons/dist/css/component.css.map +1 -0
- package/packages/icons/dist/css/icon.css +2 -0
- package/packages/icons/dist/css/icon.css.map +1 -0
- package/packages/icons/package.json +48 -0
- package/packages/icons/scss/base/button.scss +3 -0
- package/packages/icons/scss/base/link.scss +3 -0
- package/packages/icons/scss/base.scss +3 -0
- package/packages/icons/scss/component/icon.scss +3 -0
- package/packages/icons/scss/component.scss +3 -0
- package/packages/icons/scss/icon.scss +3 -0
- package/packages/icons/src/scss/_index.scss +4 -0
- package/packages/icons/src/scss/base/_index.scss +4 -0
- package/packages/icons/src/scss/base/button/_defaults.scss +7 -0
- package/packages/icons/src/scss/base/button/_index.scss +58 -0
- package/packages/icons/src/scss/base/button/_variables.scss +7 -0
- package/packages/icons/src/scss/base/link/_defaults.scss +7 -0
- package/packages/icons/src/scss/base/link/_index.scss +58 -0
- package/packages/icons/src/scss/base/link/_variables.scss +7 -0
- package/packages/icons/src/scss/component/_index.scss +3 -0
- package/packages/icons/src/scss/component/icon/_defaults.scss +30 -0
- package/packages/icons/src/scss/component/icon/_index.scss +60 -0
- package/packages/icons/src/scss/component/icon/_mixins.scss +62 -0
- package/packages/icons/src/scss/component/icon/_variables.scss +24 -0
- package/postcss.config.cjs +2 -3
- package/scss/base/button.scss +1 -1
- package/scss/base/form.scss +1 -1
- package/scss/base/link.scss +1 -1
- package/scss/base/table.scss +1 -1
- package/scss/base.scss +1 -1
- package/scss/component/accordion.scss +1 -1
- package/scss/component/alert.scss +1 -1
- package/scss/component/card.scss +1 -1
- package/scss/component/carousel.scss +1 -1
- package/scss/component/input-group.scss +1 -1
- package/scss/component/list.scss +3 -0
- package/scss/component/menu.scss +1 -1
- package/scss/component/navigation.scss +1 -1
- package/scss/component.scss +1 -1
- package/scss/graupl.scss +1 -1
- package/scss/init.scss +1 -1
- package/scss/layout/columns.scss +1 -1
- package/scss/layout/container.scss +1 -1
- package/scss/layout/flex-columns.scss +1 -1
- package/scss/layout.scss +1 -1
- package/scss/normalize.scss +1 -1
- package/scss/state/focus.scss +1 -1
- package/scss/state.scss +1 -1
- package/scss/theme/color.scss +1 -1
- package/scss/theme/typography.scss +1 -1
- package/scss/theme.scss +1 -1
- package/scss/utilities/alignment.scss +1 -1
- package/scss/utilities/background.scss +3 -0
- package/scss/utilities/border.scss +3 -0
- package/scss/utilities/color.scss +1 -1
- package/scss/utilities/container.scss +3 -0
- package/scss/utilities/display.scss +1 -1
- package/scss/utilities/flex.scss +1 -1
- package/scss/utilities/gradient.scss +3 -0
- package/scss/utilities/height.scss +1 -1
- package/scss/utilities/inset.scss +1 -1
- package/scss/utilities/justification.scss +1 -1
- package/scss/utilities/list.scss +1 -1
- package/scss/utilities/order.scss +1 -1
- package/scss/utilities/position.scss +3 -0
- package/scss/utilities/ratio.scss +1 -1
- package/scss/utilities/spacing.scss +1 -1
- package/scss/utilities/typography.scss +1 -1
- package/scss/utilities/visibility.scss +1 -1
- package/scss/utilities/visually-hidden.scss +3 -0
- package/scss/utilities/width.scss +1 -1
- package/scss/utilities/z-index.scss +3 -0
- package/scss/utilities.scss +1 -1
- package/stylelint.config.js +1 -0
- package/vite.config.js +6 -35
- package/dist/css/utilities/postion.css +0 -2
- package/dist/css/utilities/postion.css.map +0 -1
- package/dist/js/component/accordion.cjs.js +0 -3
- package/dist/js/component/accordion.esm.js +0 -1289
- package/dist/js/component/accordion.iife.js +0 -3
- package/dist/js/component/alert.cjs.js +0 -3
- package/dist/js/component/alert.esm.js +0 -529
- package/dist/js/component/alert.iife.js +0 -3
- package/dist/js/component/carousel.cjs.js +0 -3
- package/dist/js/component/carousel.esm.js +0 -1110
- package/dist/js/component/carousel.iife.js +0 -3
- package/src/scss/_variables.scss +0 -53
- package/src/scss/base/button/_index.scss +0 -107
- package/src/scss/base/button/_mixins.scss +0 -166
- package/src/scss/base/button/_variables.scss +0 -176
- package/src/scss/base/form/_index.scss +0 -93
- package/src/scss/base/form/_variables.scss +0 -156
- package/src/scss/base/link/_defaults.scss +0 -50
- package/src/scss/base/link/_index.scss +0 -134
- package/src/scss/base/link/_variables.scss +0 -262
- package/src/scss/base/table/_defaults.scss +0 -53
- package/src/scss/base/table/_index.scss +0 -121
- package/src/scss/base/table/_variables.scss +0 -135
- package/src/scss/component/alert/_variables.scss +0 -173
- package/src/scss/component/card/_variables.scss +0 -186
- package/src/scss/component/menu/_index.scss +0 -305
- package/src/scss/component/menu/_variables.scss +0 -500
- package/src/scss/component/navigation/_defaults.scss +0 -29
- package/src/scss/component/navigation/_index.scss +0 -189
- package/src/scss/component/navigation/_variables.scss +0 -237
- package/src/scss/functions/_important.scss +0 -13
- package/src/scss/layout/columns/_index.scss +0 -58
- package/src/scss/layout/container/_defaults.scss +0 -17
- package/src/scss/layout/container/_index.scss +0 -41
- package/src/scss/layout/container/_variables.scss +0 -50
- package/src/scss/layout/flex-columns/_defaults.scss +0 -18
- package/src/scss/layout/flex-columns/_index.scss +0 -80
- package/src/scss/mixins/_utility.scss +0 -30
- package/src/scss/mixins/_visually-hidden.scss +0 -20
- package/src/scss/state/_index.scss +0 -3
- package/src/scss/state/focus/_index.scss +0 -13
- package/src/scss/state/focus/_mixins.scss +0 -15
- package/src/scss/state/focus/_variables.scss +0 -44
- package/src/scss/theme/typography/_variables.scss +0 -231
- package/src/scss/utilities/alignment/_index.scss +0 -75
- package/src/scss/utilities/color/_defaults.scss +0 -35
- package/src/scss/utilities/color/_index.scss +0 -91
- package/src/scss/utilities/display/_defaults.scss +0 -32
- package/src/scss/utilities/display/_index.scss +0 -61
- package/src/scss/utilities/flex/_defaults.scss +0 -63
- package/src/scss/utilities/flex/_index.scss +0 -71
- package/src/scss/utilities/height/_defaults.scss +0 -41
- package/src/scss/utilities/height/_index.scss +0 -98
- package/src/scss/utilities/inset/_defaults.scss +0 -41
- package/src/scss/utilities/inset/_index.scss +0 -37
- package/src/scss/utilities/justification/_index.scss +0 -75
- package/src/scss/utilities/justification/_variables.scss +0 -6
- package/src/scss/utilities/list/_defaults.scss +0 -39
- package/src/scss/utilities/list/_index.scss +0 -56
- package/src/scss/utilities/order/_index.scss +0 -63
- package/src/scss/utilities/order/_variables.scss +0 -6
- package/src/scss/utilities/position/_defaults.scss +0 -26
- package/src/scss/utilities/position/_index.scss +0 -37
- package/src/scss/utilities/position/_variables.scss +0 -6
- package/src/scss/utilities/ratio/_defaults.scss +0 -28
- package/src/scss/utilities/ratio/_index.scss +0 -52
- package/src/scss/utilities/spacing/_index.scss +0 -169
- package/src/scss/utilities/spacing/_variables.scss +0 -6
- package/src/scss/utilities/typography/_defaults.scss +0 -30
- package/src/scss/utilities/typography/_index.scss +0 -224
- package/src/scss/utilities/typography/_variables.scss +0 -6
- package/src/scss/utilities/visibility/_defaults.scss +0 -25
- package/src/scss/utilities/visibility/_index.scss +0 -36
- package/src/scss/utilities/visibility/_variables.scss +0 -6
- package/src/scss/utilities/width/_defaults.scss +0 -41
- package/src/scss/utilities/width/_index.scss +0 -98
- package/src/scss/utilities/width/_variables.scss +0 -6
- /package/{src → packages/core/src}/js/accordion/Accordion.js +0 -0
- /package/{src → packages/core/src}/js/accordion/AccordionItem.js +0 -0
- /package/{src → packages/core/src}/js/accordion/index.js +0 -0
- /package/{src → packages/core/src}/js/alert/Alert.js +0 -0
- /package/{src → packages/core/src}/js/alert/index.js +0 -0
- /package/{src → packages/core/src}/js/carousel/Carousel.js +0 -0
- /package/{src → packages/core/src}/js/carousel/index.js +0 -0
- /package/{src → packages/core/src}/js/domHelpers.js +0 -0
- /package/{src → packages/core/src}/js/eventHandlers.js +0 -0
- /package/{src → packages/core/src}/js/navigation/index.js +0 -0
- /package/{src → packages/core/src}/js/storage.js +0 -0
- /package/{src → packages/core/src}/js/validate.js +0 -0
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
var Accordion=function(){"use strict";var F=Object.defineProperty;var q=(h,s,d)=>s in h?F(h,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):h[s]=d;var r=(h,s,d)=>q(h,typeof s!="symbol"?s+"":s,d);function h(e,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${i}" given.`)}for(const i in t)if(!(t[i]instanceof e)){const o=typeof t[i];throw new TypeError(`${i} must be an instance of ${e.name}. "${o}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function s(e,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${i}" given.`)}for(const i in t){const o=typeof t[i];if(o!==e)throw new TypeError(`${i} must be a ${e}. "${o}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function d(e){try{if(typeof e!="object"){const t=typeof e;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${t}" given.`)}for(const t in e)try{if(e[t]===null)throw new Error;document.querySelector(e[t])}catch{throw new TypeError(`${t} must be a valid query selector. "${e[t]}" given.`)}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function m(e){try{if(typeof e!="object"||Array.isArray(e)){const t=typeof e;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${t}" given.`)}for(const t in e){const i=typeof e[t];if(i!=="string")if(Array.isArray(e[t]))e[t].forEach(o=>{if(typeof o!="string")throw new TypeError(`${t} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${t} must be a string or an array of strings. "${i}" given.`);else{const o={};o[t]=e[t],d(o)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function C(e,t){if(s("string",{tagName:e}).status&&h(HTMLElement,t).status){const i=e.toLowerCase();let o=!0;for(const n in t)t[n].tagName.toLowerCase()!==i&&(o=!1);return o}else return!1}function p(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.add(e):t.classList.add(...e))}function f(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.remove(e):t.classList.remove(...e))}class w{constructor({accordionItemElement:t,accordionItemToggleElement:i,accordionItemHeaderElement:o,accordionItemContentElement:n,parentAccordion:a=null}){r(this,"_dom",{item:null,toggle:null,header:null,content:null});r(this,"_elements",{parentAccordion:null});r(this,"_open",!1);r(this,"_locked",!1);r(this,"_expandEvent",new CustomEvent("grauplAccordionItemExpand",{bubbles:!0,detail:{item:this}}));r(this,"_collapseEvent",new CustomEvent("grauplAccordionItemCollapse",{bubbles:!0,detail:{item:this}}));this._dom.item=t,this._dom.toggle=i,this._dom.header=o,this._dom.content=n,this._elements.parentAccordion=a}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-expanded")==="true"?this.show(!1,!1):this.hide(!1,!1)}get dom(){return this._dom}get elements(){return this._elements}get isOpen(){return this._open}get isLocked(){return this._locked}set isOpen(t){s("boolean",{value:t}),this._open!==t&&(this._open=t)}_setIds(){const{key:t}=this.elements.parentAccordion,i=this.elements.parentAccordion.dom.accordionItems.indexOf(this.dom.item);this.dom.item.id=this.dom.item.id||`accordion-item-${t}-${i}`,this.dom.toggle.id=this.dom.toggle.id||`accordion-item-toggle-${t}-${i}`,this.dom.header.id=this.dom.header.id||`accordion-item-header-${t}-${i}`,this.dom.content.id=this.dom.content.id||`accordion-item-content-${t}-${i}`}_setAriaAttributes(){C("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),C("section",{content:this.dom.content})||this.dom.content.setAttribute("role","region"),this.dom.content.setAttribute("aria-labelledby",this.dom.toggle.id)}show(t=!0,i=!0){if(this._open)return;const{closeClass:o,openClass:n,transitionClass:a,openDuration:l}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","true"),i&&a!==""?(p(a,this.dom.item),requestAnimationFrame(()=>{f(o,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{p(n,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height+this.dom.content.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{setTimeout(()=>{f(a,this.dom.item),this.dom.item.style.height=""},l)})})})):(p(n,this.dom.item),f(o,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)}hide(t=!0,i=!0){if(!this._open||!this.elements.parentAccordion.allowNoExpand&&this.elements.parentAccordion.openAccordionItems.length<=1)return;const{closeClass:o,openClass:n,transitionClass:a,closeDuration:l}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","false"),i&&a!==""?(p(a,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{f(n,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{p(o,this.dom.item),requestAnimationFrame(()=>{setTimeout(()=>{f(a,this.dom.item),this.dom.item.style.height=""},l)})})})):(p(o,this.dom.item),f(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)}toggle(){this.isOpen?this.hide():this.show()}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}lock(){this._locked=!0,this.dom.toggle.setAttribute("disabled","true")}unlock(){this._locked=!1,this.dom.toggle.removeAttribute("disabled")}closeSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.hide()})}unlockSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.unlock()})}}function y(e){try{const t=e.key||e.keyCode,i={Enter:t==="Enter"||t===13,Space:t===" "||t==="Spacebar"||t===32,Escape:t==="Escape"||t==="Esc"||t===27,ArrowUp:t==="ArrowUp"||t==="Up"||t===38,ArrowRight:t==="ArrowRight"||t==="Right"||t===39,ArrowDown:t==="ArrowDown"||t==="Down"||t===40,ArrowLeft:t==="ArrowLeft"||t==="Left"||t===37,Home:t==="Home"||t===36,End:t==="End"||t===35,Tab:t==="Tab"||t===9};return Object.keys(i).find(o=>i[o]===!0)||""}catch{return""}}function u(e){e.preventDefault(),e.stopPropagation()}function b(e=null){window.Graupl=window.Graupl||{},s("string",{type:e})&&(window.Graupl[e]=window.Graupl[e]||{})}function A(e=null){return s("string",{type:e})?window.Graupl[e]:window.Graupl}function I(e,t={}){s("string",{type:e})&&s("object",{data:t})&&(window.Graupl[e]=t)}function k(e){s("string",{type:e})&&(window.Graupl[e]={})}function D(e,t,i){s("string",{type:e,key:t})&&(window.Graupl[e][t]=i)}function x(e,t){return s("string",{type:e,key:t})?window.Graupl[e][t]:null}function $(e,t){s("string",{type:e,key:t})&&delete window.Graupl[e][t]}const E={initializeStorage:b,getStorage:A,setStorage:I,clearStorage:k,pushToStorage:D,getFromStorage:x,removeFromStorage:$};class T{constructor({accordionElement:t,accordionItemSelector:i=".accordion-item",accordionItemToggleSelector:o=".accordion-item-toggle",accordionItemHeaderSelector:n=".accordion-item-header",accordionItemContentSelector:a=".accordion-item-content",openClass:l="show",closeClass:g="hide",transitionClass:_="transitioning",transitionDuration:c=300,openDuration:S=-1,closeDuration:M=-1,optionalKeySupport:L=!1,allowMultipleExpand:K=!0,allowNoExpand:O=!0,prefix:G="am-",key:H=null,initialize:j=!1}){r(this,"_dom",{accordion:null,accordionItems:[],accordionItemToggles:[],accordionItemHeaders:[],accordionItemContents:[]});r(this,"_domLock",["accordion"]);r(this,"_selectors",{accordionItems:"",accordionItemToggles:"",accordionItemHeaders:"",accordionItemContents:""});r(this,"_elements",{accordionItems:[]});r(this,"_openClass","show");r(this,"_closeClass","hide");r(this,"_transitionClass","transitioning");r(this,"_transitionDuration",300);r(this,"_openDuration",-1);r(this,"_closeDuration",-1);r(this,"_optionalKeySupport",!0);r(this,"_allowMultipleExpand",!0);r(this,"_allowNoExpand",!0);r(this,"_currentChild",0);r(this,"_prefix","graupl-");r(this,"_key","");r(this,"_errors",[]);this._dom.accordion=t,this._selectors.accordionItems=i,this._selectors.accordionItemToggles=o,this._selectors.accordionItemHeaders=n,this._selectors.accordionItemContents=a,this._openClass=l||"",this._closeClass=g||"",this._transitionClass=_||"",this._transitionDuration=c,this._openDuration=S,this._closeDuration=M,this._optionalKeySupport=L,this._allowMultipleExpand=K,this._allowNoExpand=O,this._prefix=G||"",this._key=H||"",j&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Accordion: cannot initialize accordion. The following errors have been found:
|
|
2
|
-
- ${this.errors.join(`
|
|
3
|
-
- `)}`);this._generateKey(),this._setDOMElements(),this._setIds(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDurations(),E.initializeStorage("accordions"),E.pushToStorage("accordions",this.dom.accordion.id,this)}catch(t){console.error(t)}}get openClass(){return this._openClass}get closeClass(){return this._closeClass}get transitionClass(){return this._transitionClass}get transitionDuration(){return this._transitionDuration}get openDuration(){return this._openDuration===-1?this.transitionDuration:this._openDuration}get closeDuration(){return this._closeDuration===-1?this.transitionDuration:this._closeDuration}get currentChild(){return this._currentChild}get dom(){return this._dom}get elements(){return this._elements}get selectors(){return this._selectors}get optionalKeySupport(){return this._optionalKeySupport}get currentAccordionItem(){return this.elements.accordionItems[this.currentChild]}get openAccordionItems(){return this.elements.accordionItems.filter(t=>t.isOpen)}get allowMultipleExpand(){return this._allowMultipleExpand}get allowNoExpand(){return this._allowNoExpand}get prefix(){return this._prefix}get key(){return this._key}get errors(){return this._errors}set openClass(t){m({openClass:t}),this._openClass!==t&&(this._openClass=t)}set closeClass(t){m({closeClass:t}),this._closeClass!==t&&(this._closeClass=t)}set transitionClass(t){m({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionDuration(t){s("number",{value:t}),this._transitionDuration!==t&&(this._transitionDuration=t,this._setTransitionDurations())}set openDuration(t){s("number",{value:t}),this._openDuration!==t&&(this._openDuration=t,this._setTransitionDurations())}set closeDuration(t){s("number",{value:t}),this._closeDuration!==t&&(this._closeDuration=t,this._setTransitionDurations())}set currentChild(t){s("number",{value:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}set accordionItems(t){s("object",{value:t}),t!=null&&t.isArray()&&t.every(i=>i instanceof w)&&(this._accordionItems=t)}set allowMultipleExpand(t){s("boolean",{value:t}),this._allowMultipleExpand!==t&&(this._allowMultipleExpand=t)}set allowNoExpand(t){s("boolean",{value:t}),this._allowNoExpand!==t&&(this._allowNoExpand=t)}set prefix(t){s("string",{value:t}),this._prefix!==t&&(this._prefix=t)}set key(t){s("string",{value:t}),this._key!==t&&(this._key=t)}_setDOMElementType(t,i=this.dom.accordion,o=!0,n=!1){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be set through _setDOMElementType.`);i!==this.dom.accordion&&h(HTMLElement,{base:i});const l=Array.from(i.querySelectorAll(this.selectors[t])).filter(g=>n?g.parentElement===i:!0);o?this._dom[t]=l:this._dom[t]=[...this._dom[t],...l]}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_resetDOMElementType(t){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be reset through _resetDOMElementType.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_setDOMElements(){this._setDOMElementType("accordionItems"),this._resetDOMElementType("accordionItemToggles"),this.dom.accordionItems.forEach(t=>{this._setDOMElementType("accordionItemToggles",t,!1),this._setDOMElementType("accordionItemHeaders",t,!1),this._setDOMElementType("accordionItemContents",t,!1)})}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.accordion.id=this.dom.accordion.id||`accordion-${this.key}`}_createChildElements(){this.dom.accordionItems.forEach((t,i)=>{const o=new w({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[i],accordionItemHeaderElement:this.dom.accordionItemHeaders[i],accordionItemContentElement:this.dom.accordionItemContents[i],parentAccordion:this});o.initialize(),this.elements.accordionItems.push(o)})}_validate(){let t=!0;const i=h(HTMLElement,{accordionElement:this.dom.accordion});i||(this._errors.push(i.message),t=!1);const o=d({accordionItemSelector:this._selectors.accordionItems,accordionItemToggleSelector:this._selectors.accordionItemToggles,accordionItemHeaderSelector:this._selectors.accordionItemHeaders,accordionItemContentSelector:this._selectors.accordionItemContents});if(o||(this._errors.push(o.message),t=!1),this._openClass!==""){const c=m({openClass:this._openClass});c.status||(this._errors.push(c.error.message),t=!1)}if(this._closeClass!==""){const c=m({closeClass:this._closeClass});c.status||(this._errors.push(c.error.message),t=!1)}if(this._transitionClass!==""){const c=m({transitionClass:this._transitionClass});c.status||(this._errors.push(c.error.message),t=!1)}const n=s("number",{transitionDuration:this._transitionDuration});n.status||(this._errors.push(n.error.message),t=!1);const a=s("number",{openDuration:this._openDuration});a.status||(this._errors.push(a.error.message),t=!1);const l=s("number",{closeDuration:this._closeDuration});l.status||(this._errors.push(l.error.message),t=!1);const g=s("boolean",{optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});if(g.status||(this._errors.push(g.error.message),t=!1),this._key!==""){const c=s("string",{key:this._key});c.status||(this._errors.push(c.error.message),t=!1)}const _=s("string",{prefix:this._prefix});return _.status||(this._errors.push(_.error.message),t=!1),t}_handleFocus(){this.elements.accordionItems.forEach((t,i)=>{t.dom.toggle.addEventListener("focus",()=>{this.currentChild=i})})}_handleClick(){this.elements.accordionItems.forEach((t,i)=>{t.dom.toggle.addEventListener("pointerup",()=>{this.currentChild=i,t.toggle()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keydown",i=>{const o=y(i);(["Space","Enter"].includes(o)||this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(o))&&u(i)})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keyup",i=>{const o=y(i);switch(o){case"Space":case"Enter":u(i),this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(o){case"Home":u(i),this.focusFirstChild();break;case"End":u(i),this.focusLastChild();break;case"ArrowDown":u(i),this.focusNextChild();break;case"ArrowUp":u(i),this.focusPreviousChild();break}})})}_setTransitionDurations(){this.dom.accordion.style.setProperty(`--${this.prefix}accordion-transition-duration`,`${this.transitionDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-open-transition-duration`,`${this.openDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-close-transition-duration`,`${this.closeDuration}ms`)}focusCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.focus()}focusChild(t){this.blurCurrentChild(),this.currentChild=t,this.focusCurrentChild()}focusFirstChild(){this.focusChild(0)}focusLastChild(){this.focusChild(this.elements.accordionItems.length-1)}focusNextChild(){this.currentChild<this.elements.accordionItems.length-1?this.focusChild(this.currentChild+1):this.focusCurrentChild()}focusPreviousChild(){this.currentChild>0?this.focusChild(this.currentChild-1):this.focusCurrentChild()}blurCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.blur()}openChildren(){this.elements.accordionItems.forEach(t=>t.show())}closeChildren(){this.elements.accordionItems.forEach(t=>t.hide())}}return T}();
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
"use strict";var _=Object.defineProperty;var y=(s,t,i)=>t in s?_(s,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[t]=i;var n=(s,t,i)=>y(s,typeof t!="symbol"?t+"":t,i);function f(s,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${i}" given.`)}for(const i in t)if(!(t[i]instanceof s)){const e=typeof t[i];throw new TypeError(`${i} must be an instance of ${s.name}. "${e}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function r(s,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${i}" given.`)}for(const i in t){const e=typeof t[i];if(e!==s)throw new TypeError(`${i} must be a ${s}. "${e}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function p(s){try{if(typeof s!="object"){const t=typeof s;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${t}" given.`)}for(const t in s)try{if(s[t]===null)throw new Error;document.querySelector(s[t])}catch{throw new TypeError(`${t} must be a valid query selector. "${s[t]}" given.`)}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function l(s){try{if(typeof s!="object"||Array.isArray(s)){const t=typeof s;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${t}" given.`)}for(const t in s){const i=typeof s[t];if(i!=="string")if(Array.isArray(s[t]))s[t].forEach(e=>{if(typeof e!="string")throw new TypeError(`${t} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${t} must be a string or an array of strings. "${i}" given.`);else{const e={};e[t]=s[t],p(e)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function a(s,t){s===""||s.length===0||(typeof s=="string"?t.classList.add(s):t.classList.add(...s))}function h(s,t){s===""||s.length===0||(typeof s=="string"?t.classList.remove(s):t.classList.remove(...s))}function u(s){try{const t=s.key||s.keyCode,i={Enter:t==="Enter"||t===13,Space:t===" "||t==="Spacebar"||t===32,Escape:t==="Escape"||t==="Esc"||t===27,ArrowUp:t==="ArrowUp"||t==="Up"||t===38,ArrowRight:t==="ArrowRight"||t==="Right"||t===39,ArrowDown:t==="ArrowDown"||t==="Down"||t===40,ArrowLeft:t==="ArrowLeft"||t==="Left"||t===37,Home:t==="Home"||t===36,End:t==="End"||t===35,Tab:t==="Tab"||t===9};return Object.keys(i).find(e=>i[e]===!0)||""}catch{return""}}function E(s){s.preventDefault(),s.stopPropagation()}function T(s=null){window.Graupl=window.Graupl||{},r("string",{type:s})&&(window.Graupl[s]=window.Graupl[s]||{})}function b(s=null){return r("string",{type:s})?window.Graupl[s]:window.Graupl}function k(s,t={}){r("string",{type:s})&&r("object",{data:t})&&(window.Graupl[s]=t)}function A(s){r("string",{type:s})&&(window.Graupl[s]={})}function S(s,t,i){r("string",{type:s,key:t})&&(window.Graupl[s][t]=i)}function $(s,t){return r("string",{type:s,key:t})?window.Graupl[s][t]:null}function L(s,t){r("string",{type:s,key:t})&&delete window.Graupl[s][t]}const c={initializeStorage:T,getStorage:b,setStorage:k,clearStorage:A,pushToStorage:S,getFromStorage:$,removeFromStorage:L};class j{constructor({alertElement:t,controllerElement:i=null,showClass:e="show",hideClass:d="hide",transitionClass:o="transitioning",transitionTimer:m=150,isHidden:w=!1,key:C=null,initialize:g=!1}){n(this,"_dom",{alert:null,controller:null});n(this,"_hidden",!1);n(this,"_showClass","");n(this,"_hideClass","");n(this,"_transitionClass","");n(this,"_transitionTimer",150);n(this,"_key","");n(this,"_errors",[]);n(this,"_showEvent",new CustomEvent("grauplAlertShow",{bubbles:!0,detail:{alert:this}}));n(this,"_hideEvent",new CustomEvent("grauplAlertHide",{bubbles:!0,detail:{alert:this}}));this._dom.alert=t,this._dom.controller=i,this._showClass=e||"",this._hideClass=d||"",this._transitionClass=o||"",this._transitionTimer=m,this._hidden=w,this._key=C||"",g&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Alert: cannot initialize alert. The following errors have been found:
|
|
2
|
-
- ${this.errors.join(`
|
|
3
|
-
- `)}`);this._generateKey(),this._setIds(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),c.initializeStorage("alerts"),c.pushToStorage("alerts",this.dom.alert.id,this)}catch(t){console.error(t)}}get dom(){return this._dom}get showClass(){return this._showClass}get hideClass(){return this._hideClass}get transitionClass(){return this._transitionClass}get transitionTimer(){return this._transitionTimer}get key(){return this._key}set showClass(t){l({showClass:t}),this._showClass!==t&&(this._showClass=t)}set hideClass(t){l({hideClass:t}),this._hideClass!==t&&(this._hideClass=t)}set transitionClass(t){l({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionTimer(t){r("number",{transitionTimer:t}),this._transitionTimer!==t&&(this._transitionTimer=t)}set key(t){r("string",{value:t}),this._key!==t&&(this._key=t)}_validate(){let t=!0,i;if(this._dom.controller!==null?i=f(HTMLElement,{alertElement:this._dom.alert,controllerElement:this._dom.controller}):i=f(HTMLElement,{alertElement:this._dom.alert}),i.status||(this._errors.push(i.message),t=!1),this._showClass!==""){const o=l({showClass:this._showClass});o.status||(this._errors.push(o.message),t=!1)}if(this._hideClass!==""){const o=l({hideClass:this._hideClass});o.status||(this._errors.push(o.message),t=!1)}if(this._transitionClass!==""){const o=l({transitionClass:this._transitionClass});o.status||(this._errors.push(o.message),t=!1)}const e=r("number",{transitionTimer:this._transitionTimer});e.status||(this._errors.push(e.message),t=!1);const d=r("boolean",{isHidden:this._hidden});return d.status||(this._errors.push(d.message),t=!1),t}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.alert.id=this.dom.alert.id||`alert-${this.key}`,this.dom.controller.id=this.dom.controller.id||`alert-controller-${this.key}`}show(t=!0){this._hidden&&(this.transitionClass!==""?(a(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.hideClass!==""&&h(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&a(this.showClass,this.dom.alert),requestAnimationFrame(()=>{h(this.transitionClass,this.dom.alert)})})})):(this.showClass!==""&&a(this.showClass,this.dom.alert),this.hideClass!==""&&h(this.hideClass,this.dom.alert)),this._hidden=!1,t&&this.dom.alert.dispatchEvent(this._hideEvent))}hide(t=!0){this._hidden||(this.transitionClass!==""?(a(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&h(this.showClass,this.dom.alert),requestAnimationFrame(()=>{this.transitionTimer>0?setTimeout(()=>{this.hideClass!==""&&a(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{h(this.transitionClass,this.dom.alert)})},this.transitionTimer):(this.hideClass!==""&&a(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{h(this.transitionClass,this.dom.alert)}))})})):(this.hideClass!==""&&a(this.hideClass,this.dom.alert),this.showClass!==""&&h(this.showClass,this.dom.alert)),this._hidden=!0,t&&this.dom.alert.dispatchEvent(this._hideEvent))}_handleClick(){this.dom.controller!==null&&this.dom.controller.addEventListener("pointerup",()=>this.hide())}_handleKeydown(){this.dom.controller!==null&&this.dom.controller.addEventListener("keydown",t=>{const i=u(t);(i==="Space"||i==="Enter")&&E(t)})}_handleKeyup(){this.dom.controller!==null&&this.dom.controller.addEventListener("keyup",t=>{const i=u(t);(i==="Space"||i==="Enter")&&this.hide()})}}module.exports=j;
|
|
@@ -1,529 +0,0 @@
|
|
|
1
|
-
var _ = Object.defineProperty;
|
|
2
|
-
var y = (s, t, i) => t in s ? _(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
|
|
3
|
-
var n = (s, t, i) => y(s, typeof t != "symbol" ? t + "" : t, i);
|
|
4
|
-
function f(s, t) {
|
|
5
|
-
try {
|
|
6
|
-
if (typeof t != "object") {
|
|
7
|
-
const i = typeof t;
|
|
8
|
-
throw new TypeError(
|
|
9
|
-
`Elements given to isValidInstance() must be inside of an object. "${i}" given.`
|
|
10
|
-
);
|
|
11
|
-
}
|
|
12
|
-
for (const i in t)
|
|
13
|
-
if (!(t[i] instanceof s)) {
|
|
14
|
-
const e = typeof t[i];
|
|
15
|
-
throw new TypeError(
|
|
16
|
-
`${i} must be an instance of ${s.name}. "${e}" given.`
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
return {
|
|
20
|
-
status: !0,
|
|
21
|
-
error: null
|
|
22
|
-
};
|
|
23
|
-
} catch (i) {
|
|
24
|
-
return {
|
|
25
|
-
status: !1,
|
|
26
|
-
error: i
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
function r(s, t) {
|
|
31
|
-
try {
|
|
32
|
-
if (typeof t != "object") {
|
|
33
|
-
const i = typeof t;
|
|
34
|
-
throw new TypeError(
|
|
35
|
-
`Values given to isValidType() must be inside of an object. "${i}" given.`
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
for (const i in t) {
|
|
39
|
-
const e = typeof t[i];
|
|
40
|
-
if (e !== s)
|
|
41
|
-
throw new TypeError(`${i} must be a ${s}. "${e}" given.`);
|
|
42
|
-
}
|
|
43
|
-
return {
|
|
44
|
-
status: !0,
|
|
45
|
-
error: null
|
|
46
|
-
};
|
|
47
|
-
} catch (i) {
|
|
48
|
-
return {
|
|
49
|
-
status: !1,
|
|
50
|
-
error: i
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
function p(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 l(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 i = typeof s[t];
|
|
93
|
-
if (i !== "string")
|
|
94
|
-
if (Array.isArray(s[t]))
|
|
95
|
-
s[t].forEach((e) => {
|
|
96
|
-
if (typeof e != "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. "${i}" given.`
|
|
104
|
-
);
|
|
105
|
-
else {
|
|
106
|
-
const e = {};
|
|
107
|
-
e[t] = s[t], p(e);
|
|
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 a(s, t) {
|
|
122
|
-
s === "" || s.length === 0 || (typeof s == "string" ? t.classList.add(s) : t.classList.add(...s));
|
|
123
|
-
}
|
|
124
|
-
function h(s, t) {
|
|
125
|
-
s === "" || s.length === 0 || (typeof s == "string" ? t.classList.remove(s) : t.classList.remove(...s));
|
|
126
|
-
}
|
|
127
|
-
function u(s) {
|
|
128
|
-
try {
|
|
129
|
-
const t = s.key || s.keyCode, i = {
|
|
130
|
-
Enter: t === "Enter" || t === 13,
|
|
131
|
-
Space: t === " " || t === "Spacebar" || t === 32,
|
|
132
|
-
Escape: t === "Escape" || t === "Esc" || t === 27,
|
|
133
|
-
ArrowUp: t === "ArrowUp" || t === "Up" || t === 38,
|
|
134
|
-
ArrowRight: t === "ArrowRight" || t === "Right" || t === 39,
|
|
135
|
-
ArrowDown: t === "ArrowDown" || t === "Down" || t === 40,
|
|
136
|
-
ArrowLeft: t === "ArrowLeft" || t === "Left" || t === 37,
|
|
137
|
-
Home: t === "Home" || t === 36,
|
|
138
|
-
End: t === "End" || t === 35,
|
|
139
|
-
Tab: t === "Tab" || t === 9
|
|
140
|
-
};
|
|
141
|
-
return Object.keys(i).find((e) => i[e] === !0) || "";
|
|
142
|
-
} catch {
|
|
143
|
-
return "";
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
function E(s) {
|
|
147
|
-
s.preventDefault(), s.stopPropagation();
|
|
148
|
-
}
|
|
149
|
-
function T(s = null) {
|
|
150
|
-
window.Graupl = window.Graupl || {}, r("string", { type: s }) && (window.Graupl[s] = window.Graupl[s] || {});
|
|
151
|
-
}
|
|
152
|
-
function b(s = null) {
|
|
153
|
-
return r("string", { type: s }) ? window.Graupl[s] : window.Graupl;
|
|
154
|
-
}
|
|
155
|
-
function k(s, t = {}) {
|
|
156
|
-
r("string", { type: s }) && r("object", { data: t }) && (window.Graupl[s] = t);
|
|
157
|
-
}
|
|
158
|
-
function A(s) {
|
|
159
|
-
r("string", { type: s }) && (window.Graupl[s] = {});
|
|
160
|
-
}
|
|
161
|
-
function S(s, t, i) {
|
|
162
|
-
r("string", { type: s, key: t }) && (window.Graupl[s][t] = i);
|
|
163
|
-
}
|
|
164
|
-
function $(s, t) {
|
|
165
|
-
return r("string", { type: s, key: t }) ? window.Graupl[s][t] : null;
|
|
166
|
-
}
|
|
167
|
-
function L(s, t) {
|
|
168
|
-
r("string", { type: s, key: t }) && delete window.Graupl[s][t];
|
|
169
|
-
}
|
|
170
|
-
const c = {
|
|
171
|
-
initializeStorage: T,
|
|
172
|
-
getStorage: b,
|
|
173
|
-
setStorage: k,
|
|
174
|
-
clearStorage: A,
|
|
175
|
-
pushToStorage: S,
|
|
176
|
-
getFromStorage: $,
|
|
177
|
-
removeFromStorage: L
|
|
178
|
-
};
|
|
179
|
-
class G {
|
|
180
|
-
/**
|
|
181
|
-
* Constructs a new `Alert`.
|
|
182
|
-
*
|
|
183
|
-
* @param {object} options - The options object.
|
|
184
|
-
* @param {HTMLElement} options.alertElement - The alert element.
|
|
185
|
-
* @param {?HTMLElement} [options.controllerElement = null] - The controller element.
|
|
186
|
-
* @param {string|string[]|null} [options.showClass = show] - The class to add when the alert is shown.
|
|
187
|
-
* @param {string|string[]|null} [options.hideClass = hide] - The class to add when
|
|
188
|
-
* @param {string|string[]|null} [options.transitionClass = transitioning] - The class to add when the alert is transitioning between shown and hidden.
|
|
189
|
-
* @param {number} [options.transitionTimer = 150] - The time in milliseconds the transition will take.
|
|
190
|
-
* @param {boolean} [options.isHidden = false] - A flag to determine the initial state of the alert.
|
|
191
|
-
* @param {?string} [options.key = null] - The key used to generate IDs throughout the alert.
|
|
192
|
-
* @param {boolean} [options.initialize = false] - AA flag to initialize the alert immediately upon creation.
|
|
193
|
-
*/
|
|
194
|
-
constructor({
|
|
195
|
-
alertElement: t,
|
|
196
|
-
controllerElement: i = null,
|
|
197
|
-
showClass: e = "show",
|
|
198
|
-
hideClass: d = "hide",
|
|
199
|
-
transitionClass: o = "transitioning",
|
|
200
|
-
transitionTimer: m = 150,
|
|
201
|
-
isHidden: w = !1,
|
|
202
|
-
key: C = null,
|
|
203
|
-
initialize: g = !1
|
|
204
|
-
}) {
|
|
205
|
-
/**
|
|
206
|
-
* The HTML elements for the alert in the DOM.
|
|
207
|
-
*
|
|
208
|
-
* @protected
|
|
209
|
-
*
|
|
210
|
-
* @type {Object<HTMLElement>}
|
|
211
|
-
*/
|
|
212
|
-
n(this, "_dom", {
|
|
213
|
-
alert: null,
|
|
214
|
-
controller: null
|
|
215
|
-
});
|
|
216
|
-
/**
|
|
217
|
-
* A flag to determine if the alert is hidden.
|
|
218
|
-
*
|
|
219
|
-
* @protected
|
|
220
|
-
*
|
|
221
|
-
* @type {boolean}
|
|
222
|
-
*/
|
|
223
|
-
n(this, "_hidden", !1);
|
|
224
|
-
/**
|
|
225
|
-
* The class to use to show the alert.
|
|
226
|
-
*
|
|
227
|
-
* @protected
|
|
228
|
-
*
|
|
229
|
-
* @type {string|string[]}
|
|
230
|
-
*/
|
|
231
|
-
n(this, "_showClass", "");
|
|
232
|
-
/**
|
|
233
|
-
* The class to use to hide the alert.
|
|
234
|
-
*
|
|
235
|
-
* @protected
|
|
236
|
-
*
|
|
237
|
-
* @type {string|string[]}
|
|
238
|
-
*/
|
|
239
|
-
n(this, "_hideClass", "");
|
|
240
|
-
/**
|
|
241
|
-
* The class to use when transitioning the alert.
|
|
242
|
-
*
|
|
243
|
-
* @protected
|
|
244
|
-
*
|
|
245
|
-
* @type {string|string[]}
|
|
246
|
-
*/
|
|
247
|
-
n(this, "_transitionClass", "");
|
|
248
|
-
/**
|
|
249
|
-
* The time in milliseconds the transition will take.
|
|
250
|
-
*
|
|
251
|
-
* @protected
|
|
252
|
-
*
|
|
253
|
-
* @type {number}
|
|
254
|
-
*/
|
|
255
|
-
n(this, "_transitionTimer", 150);
|
|
256
|
-
/**
|
|
257
|
-
* The key used to generate IDs throughout the carousel.
|
|
258
|
-
*
|
|
259
|
-
* @protected
|
|
260
|
-
*
|
|
261
|
-
* @type {string}
|
|
262
|
-
*/
|
|
263
|
-
n(this, "_key", "");
|
|
264
|
-
/**
|
|
265
|
-
* An array of error messages generated by the alert.
|
|
266
|
-
*
|
|
267
|
-
* @protected
|
|
268
|
-
*
|
|
269
|
-
* @type {string[]}
|
|
270
|
-
*/
|
|
271
|
-
n(this, "_errors", []);
|
|
272
|
-
/**
|
|
273
|
-
* The event that is triggered when the alert is shown.
|
|
274
|
-
*
|
|
275
|
-
* @protected
|
|
276
|
-
*
|
|
277
|
-
* @event grauplAlertShow
|
|
278
|
-
*
|
|
279
|
-
* @type {CustomEvent}
|
|
280
|
-
*
|
|
281
|
-
* @property {boolean} bubbles - A flag to bubble the event.
|
|
282
|
-
* @property {Object<Alert>} detail - The details object container the Alert itself.
|
|
283
|
-
*/
|
|
284
|
-
n(this, "_showEvent", new CustomEvent("grauplAlertShow", {
|
|
285
|
-
bubbles: !0,
|
|
286
|
-
detail: { alert: this }
|
|
287
|
-
}));
|
|
288
|
-
/**
|
|
289
|
-
* The event that is triggered when the alert is hidden.
|
|
290
|
-
*
|
|
291
|
-
* @protected
|
|
292
|
-
*
|
|
293
|
-
* @event grauplAlertHide
|
|
294
|
-
*
|
|
295
|
-
* @type {CustomEvent}
|
|
296
|
-
*
|
|
297
|
-
* @property {boolean} bubbles - A flag to bubble the event.
|
|
298
|
-
* @property {Object<Alert>} detail - The details object containing the Alert itself.
|
|
299
|
-
*/
|
|
300
|
-
n(this, "_hideEvent", new CustomEvent("grauplAlertHide", {
|
|
301
|
-
bubbles: !0,
|
|
302
|
-
detail: { alert: this }
|
|
303
|
-
}));
|
|
304
|
-
this._dom.alert = t, this._dom.controller = i, this._showClass = e || "", this._hideClass = d || "", this._transitionClass = o || "", this._transitionTimer = m, this._hidden = w, this._key = C || "", g && this.initialize();
|
|
305
|
-
}
|
|
306
|
-
/**
|
|
307
|
-
* Initializes the alert.
|
|
308
|
-
*/
|
|
309
|
-
initialize() {
|
|
310
|
-
try {
|
|
311
|
-
if (!this._validate())
|
|
312
|
-
throw new Error(
|
|
313
|
-
`Graupl Alert: cannot initialize alert. The following errors have been found:
|
|
314
|
-
- ${this.errors.join(
|
|
315
|
-
`
|
|
316
|
-
- `
|
|
317
|
-
)}`
|
|
318
|
-
);
|
|
319
|
-
this._generateKey(), this._setIds(), this._handleClick(), this._handleKeydown(), this._handleKeyup(), c.initializeStorage("alerts"), c.pushToStorage("alerts", this.dom.alert.id, this);
|
|
320
|
-
} catch (t) {
|
|
321
|
-
console.error(t);
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
/**
|
|
325
|
-
* The HTML elements for the alert in the DOM.
|
|
326
|
-
*
|
|
327
|
-
* @readonly
|
|
328
|
-
*
|
|
329
|
-
* @see _dom
|
|
330
|
-
*
|
|
331
|
-
* @type {object}
|
|
332
|
-
*/
|
|
333
|
-
get dom() {
|
|
334
|
-
return this._dom;
|
|
335
|
-
}
|
|
336
|
-
/**
|
|
337
|
-
* The class to use the show the alert.
|
|
338
|
-
*
|
|
339
|
-
* @type {string|string[]}
|
|
340
|
-
*
|
|
341
|
-
* @see _showClass
|
|
342
|
-
*/
|
|
343
|
-
get showClass() {
|
|
344
|
-
return this._showClass;
|
|
345
|
-
}
|
|
346
|
-
/**
|
|
347
|
-
* The class to use to hide the alert.
|
|
348
|
-
*
|
|
349
|
-
* @type {string|string[]}
|
|
350
|
-
*
|
|
351
|
-
* @see _hideClass
|
|
352
|
-
*/
|
|
353
|
-
get hideClass() {
|
|
354
|
-
return this._hideClass;
|
|
355
|
-
}
|
|
356
|
-
/**
|
|
357
|
-
* The class to use when transitioning the alert.
|
|
358
|
-
*
|
|
359
|
-
* @type {string|string[]}
|
|
360
|
-
*
|
|
361
|
-
* @see _transitionClass
|
|
362
|
-
*/
|
|
363
|
-
get transitionClass() {
|
|
364
|
-
return this._transitionClass;
|
|
365
|
-
}
|
|
366
|
-
/**
|
|
367
|
-
* The time in milliseconds the transition will take.
|
|
368
|
-
*
|
|
369
|
-
* @type {number}
|
|
370
|
-
*
|
|
371
|
-
* @see _transitionTimer
|
|
372
|
-
*/
|
|
373
|
-
get transitionTimer() {
|
|
374
|
-
return this._transitionTimer;
|
|
375
|
-
}
|
|
376
|
-
/**
|
|
377
|
-
* The key used to generate IDs throughout the accordion.
|
|
378
|
-
*
|
|
379
|
-
* @type {string}
|
|
380
|
-
*
|
|
381
|
-
* @see _key
|
|
382
|
-
*/
|
|
383
|
-
get key() {
|
|
384
|
-
return this._key;
|
|
385
|
-
}
|
|
386
|
-
set showClass(t) {
|
|
387
|
-
l({ showClass: t }), this._showClass !== t && (this._showClass = t);
|
|
388
|
-
}
|
|
389
|
-
set hideClass(t) {
|
|
390
|
-
l({ hideClass: t }), this._hideClass !== t && (this._hideClass = t);
|
|
391
|
-
}
|
|
392
|
-
set transitionClass(t) {
|
|
393
|
-
l({ transitionClass: t }), this._transitionClass !== t && (this._transitionClass = t);
|
|
394
|
-
}
|
|
395
|
-
set transitionTimer(t) {
|
|
396
|
-
r("number", { transitionTimer: t }), this._transitionTimer !== t && (this._transitionTimer = t);
|
|
397
|
-
}
|
|
398
|
-
set key(t) {
|
|
399
|
-
r("string", { value: t }), this._key !== t && (this._key = t);
|
|
400
|
-
}
|
|
401
|
-
/**
|
|
402
|
-
* Validates all aspects of the alert to ensure proper functionality.
|
|
403
|
-
*
|
|
404
|
-
* @protected
|
|
405
|
-
*
|
|
406
|
-
* @return {boolean} - The result of the validation.
|
|
407
|
-
*/
|
|
408
|
-
_validate() {
|
|
409
|
-
let t = !0, i;
|
|
410
|
-
if (this._dom.controller !== null ? i = f(HTMLElement, {
|
|
411
|
-
alertElement: this._dom.alert,
|
|
412
|
-
controllerElement: this._dom.controller
|
|
413
|
-
}) : i = f(HTMLElement, {
|
|
414
|
-
alertElement: this._dom.alert
|
|
415
|
-
}), i.status || (this._errors.push(i.message), t = !1), this._showClass !== "") {
|
|
416
|
-
const o = l({ showClass: this._showClass });
|
|
417
|
-
o.status || (this._errors.push(o.message), t = !1);
|
|
418
|
-
}
|
|
419
|
-
if (this._hideClass !== "") {
|
|
420
|
-
const o = l({ hideClass: this._hideClass });
|
|
421
|
-
o.status || (this._errors.push(o.message), t = !1);
|
|
422
|
-
}
|
|
423
|
-
if (this._transitionClass !== "") {
|
|
424
|
-
const o = l({
|
|
425
|
-
transitionClass: this._transitionClass
|
|
426
|
-
});
|
|
427
|
-
o.status || (this._errors.push(o.message), t = !1);
|
|
428
|
-
}
|
|
429
|
-
const e = r("number", {
|
|
430
|
-
transitionTimer: this._transitionTimer
|
|
431
|
-
});
|
|
432
|
-
e.status || (this._errors.push(e.message), t = !1);
|
|
433
|
-
const d = r("boolean", { isHidden: this._hidden });
|
|
434
|
-
return d.status || (this._errors.push(d.message), t = !1), t;
|
|
435
|
-
}
|
|
436
|
-
/**
|
|
437
|
-
* Generates a key for the alert.
|
|
438
|
-
*
|
|
439
|
-
* @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
|
|
440
|
-
*/
|
|
441
|
-
_generateKey(t = !1) {
|
|
442
|
-
(this.key === "" || t) && (this.key = Math.random().toString(36).replace(/[^a-z]+/g, "").substring(0, 10));
|
|
443
|
-
}
|
|
444
|
-
/**
|
|
445
|
-
* Sets the IDs of the alert and it's children if they do not already exist.
|
|
446
|
-
*
|
|
447
|
-
* The generated IDs use the key and follow the format:
|
|
448
|
-
* - alert: `alert-${key}`
|
|
449
|
-
* - controller: `alert-controller-${key}`
|
|
450
|
-
*/
|
|
451
|
-
_setIds() {
|
|
452
|
-
this.dom.alert.id = this.dom.alert.id || `alert-${this.key}`, this.dom.controller.id = this.dom.controller.id || `alert-controller-${this.key}`;
|
|
453
|
-
}
|
|
454
|
-
/**
|
|
455
|
-
* Shows the alert.
|
|
456
|
-
*
|
|
457
|
-
* @fires grauplAlertShow
|
|
458
|
-
*
|
|
459
|
-
* @param {boolean} [emit = true] - A toggle to emit the show event once shown.
|
|
460
|
-
*/
|
|
461
|
-
show(t = !0) {
|
|
462
|
-
this._hidden && (this.transitionClass !== "" ? (a(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
|
|
463
|
-
this.hideClass !== "" && h(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
|
|
464
|
-
this.showClass !== "" && a(this.showClass, this.dom.alert), requestAnimationFrame(() => {
|
|
465
|
-
h(this.transitionClass, this.dom.alert);
|
|
466
|
-
});
|
|
467
|
-
});
|
|
468
|
-
})) : (this.showClass !== "" && a(this.showClass, this.dom.alert), this.hideClass !== "" && h(this.hideClass, this.dom.alert)), this._hidden = !1, t && this.dom.alert.dispatchEvent(this._hideEvent));
|
|
469
|
-
}
|
|
470
|
-
/**
|
|
471
|
-
* Hides the alert.
|
|
472
|
-
*
|
|
473
|
-
* @fires grauplAlertHide
|
|
474
|
-
*
|
|
475
|
-
* @param {boolean} [emit = true] - A toggle to emit the hide event once shown.
|
|
476
|
-
*/
|
|
477
|
-
hide(t = !0) {
|
|
478
|
-
this._hidden || (this.transitionClass !== "" ? (a(this.transitionClass, this.dom.alert), requestAnimationFrame(() => {
|
|
479
|
-
this.showClass !== "" && h(this.showClass, this.dom.alert), requestAnimationFrame(() => {
|
|
480
|
-
this.transitionTimer > 0 ? setTimeout(() => {
|
|
481
|
-
this.hideClass !== "" && a(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
|
|
482
|
-
h(this.transitionClass, this.dom.alert);
|
|
483
|
-
});
|
|
484
|
-
}, this.transitionTimer) : (this.hideClass !== "" && a(this.hideClass, this.dom.alert), requestAnimationFrame(() => {
|
|
485
|
-
h(this.transitionClass, this.dom.alert);
|
|
486
|
-
}));
|
|
487
|
-
});
|
|
488
|
-
})) : (this.hideClass !== "" && a(this.hideClass, this.dom.alert), this.showClass !== "" && h(this.showClass, this.dom.alert)), this._hidden = !0, t && this.dom.alert.dispatchEvent(this._hideEvent));
|
|
489
|
-
}
|
|
490
|
-
/**
|
|
491
|
-
* Handles click events throughout the alert for proper use.
|
|
492
|
-
*
|
|
493
|
-
* - Adds a `pointerup` listener to the controller that will hide the alert.
|
|
494
|
-
*
|
|
495
|
-
* @protected
|
|
496
|
-
*/
|
|
497
|
-
_handleClick() {
|
|
498
|
-
this.dom.controller !== null && this.dom.controller.addEventListener("pointerup", () => this.hide());
|
|
499
|
-
}
|
|
500
|
-
/**
|
|
501
|
-
* Handles keydown events throughout the alert for proper use.
|
|
502
|
-
*
|
|
503
|
-
* This method exists to assist the _handleKeyup method.
|
|
504
|
-
*
|
|
505
|
-
* - Adds a `keydown` listener to the controller (if it exists).
|
|
506
|
-
* - Blocks propagation on "Space" and "Enter" keys.
|
|
507
|
-
*/
|
|
508
|
-
_handleKeydown() {
|
|
509
|
-
this.dom.controller !== null && this.dom.controller.addEventListener("keydown", (t) => {
|
|
510
|
-
const i = u(t);
|
|
511
|
-
(i === "Space" || i === "Enter") && E(t);
|
|
512
|
-
});
|
|
513
|
-
}
|
|
514
|
-
/**
|
|
515
|
-
* Handles keyup events throughout the alert for proper use.
|
|
516
|
-
*
|
|
517
|
-
* - Adds a `keyup` listener to the controller (if it exists).
|
|
518
|
-
* - Hides the alert when the user hits "Space" or "Enter".
|
|
519
|
-
*/
|
|
520
|
-
_handleKeyup() {
|
|
521
|
-
this.dom.controller !== null && this.dom.controller.addEventListener("keyup", (t) => {
|
|
522
|
-
const i = u(t);
|
|
523
|
-
(i === "Space" || i === "Enter") && this.hide();
|
|
524
|
-
});
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
export {
|
|
528
|
-
G as default
|
|
529
|
-
};
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
var Alert=function(){"use strict";var L=Object.defineProperty;var j=(a,e,d)=>e in a?L(a,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[e]=d;var n=(a,e,d)=>j(a,typeof e!="symbol"?e+"":e,d);function a(s,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${i}" given.`)}for(const i in t)if(!(t[i]instanceof s)){const r=typeof t[i];throw new TypeError(`${i} must be an instance of ${s.name}. "${r}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function e(s,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${i}" given.`)}for(const i in t){const r=typeof t[i];if(r!==s)throw new TypeError(`${i} must be a ${s}. "${r}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function d(s){try{if(typeof s!="object"){const t=typeof s;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${t}" given.`)}for(const t in s)try{if(s[t]===null)throw new Error;document.querySelector(s[t])}catch{throw new TypeError(`${t} must be a valid query selector. "${s[t]}" given.`)}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function f(s){try{if(typeof s!="object"||Array.isArray(s)){const t=typeof s;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${t}" given.`)}for(const t in s){const i=typeof s[t];if(i!=="string")if(Array.isArray(s[t]))s[t].forEach(r=>{if(typeof r!="string")throw new TypeError(`${t} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${t} must be a string or an array of strings. "${i}" given.`);else{const r={};r[t]=s[t],d(r)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function h(s,t){s===""||s.length===0||(typeof s=="string"?t.classList.add(s):t.classList.add(...s))}function l(s,t){s===""||s.length===0||(typeof s=="string"?t.classList.remove(s):t.classList.remove(...s))}function c(s){try{const t=s.key||s.keyCode,i={Enter:t==="Enter"||t===13,Space:t===" "||t==="Spacebar"||t===32,Escape:t==="Escape"||t==="Esc"||t===27,ArrowUp:t==="ArrowUp"||t==="Up"||t===38,ArrowRight:t==="ArrowRight"||t==="Right"||t===39,ArrowDown:t==="ArrowDown"||t==="Down"||t===40,ArrowLeft:t==="ArrowLeft"||t==="Left"||t===37,Home:t==="Home"||t===36,End:t==="End"||t===35,Tab:t==="Tab"||t===9};return Object.keys(i).find(r=>i[r]===!0)||""}catch{return""}}function w(s){s.preventDefault(),s.stopPropagation()}function C(s=null){window.Graupl=window.Graupl||{},e("string",{type:s})&&(window.Graupl[s]=window.Graupl[s]||{})}function g(s=null){return e("string",{type:s})?window.Graupl[s]:window.Graupl}function _(s,t={}){e("string",{type:s})&&e("object",{data:t})&&(window.Graupl[s]=t)}function y(s){e("string",{type:s})&&(window.Graupl[s]={})}function p(s,t,i){e("string",{type:s,key:t})&&(window.Graupl[s][t]=i)}function E(s,t){return e("string",{type:s,key:t})?window.Graupl[s][t]:null}function T(s,t){e("string",{type:s,key:t})&&delete window.Graupl[s][t]}const m={initializeStorage:C,getStorage:g,setStorage:_,clearStorage:y,pushToStorage:p,getFromStorage:E,removeFromStorage:T};class b{constructor({alertElement:t,controllerElement:i=null,showClass:r="show",hideClass:u="hide",transitionClass:o="transitioning",transitionTimer:k=150,isHidden:A=!1,key:S=null,initialize:$=!1}){n(this,"_dom",{alert:null,controller:null});n(this,"_hidden",!1);n(this,"_showClass","");n(this,"_hideClass","");n(this,"_transitionClass","");n(this,"_transitionTimer",150);n(this,"_key","");n(this,"_errors",[]);n(this,"_showEvent",new CustomEvent("grauplAlertShow",{bubbles:!0,detail:{alert:this}}));n(this,"_hideEvent",new CustomEvent("grauplAlertHide",{bubbles:!0,detail:{alert:this}}));this._dom.alert=t,this._dom.controller=i,this._showClass=r||"",this._hideClass=u||"",this._transitionClass=o||"",this._transitionTimer=k,this._hidden=A,this._key=S||"",$&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Alert: cannot initialize alert. The following errors have been found:
|
|
2
|
-
- ${this.errors.join(`
|
|
3
|
-
- `)}`);this._generateKey(),this._setIds(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),m.initializeStorage("alerts"),m.pushToStorage("alerts",this.dom.alert.id,this)}catch(t){console.error(t)}}get dom(){return this._dom}get showClass(){return this._showClass}get hideClass(){return this._hideClass}get transitionClass(){return this._transitionClass}get transitionTimer(){return this._transitionTimer}get key(){return this._key}set showClass(t){f({showClass:t}),this._showClass!==t&&(this._showClass=t)}set hideClass(t){f({hideClass:t}),this._hideClass!==t&&(this._hideClass=t)}set transitionClass(t){f({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionTimer(t){e("number",{transitionTimer:t}),this._transitionTimer!==t&&(this._transitionTimer=t)}set key(t){e("string",{value:t}),this._key!==t&&(this._key=t)}_validate(){let t=!0,i;if(this._dom.controller!==null?i=a(HTMLElement,{alertElement:this._dom.alert,controllerElement:this._dom.controller}):i=a(HTMLElement,{alertElement:this._dom.alert}),i.status||(this._errors.push(i.message),t=!1),this._showClass!==""){const o=f({showClass:this._showClass});o.status||(this._errors.push(o.message),t=!1)}if(this._hideClass!==""){const o=f({hideClass:this._hideClass});o.status||(this._errors.push(o.message),t=!1)}if(this._transitionClass!==""){const o=f({transitionClass:this._transitionClass});o.status||(this._errors.push(o.message),t=!1)}const r=e("number",{transitionTimer:this._transitionTimer});r.status||(this._errors.push(r.message),t=!1);const u=e("boolean",{isHidden:this._hidden});return u.status||(this._errors.push(u.message),t=!1),t}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.alert.id=this.dom.alert.id||`alert-${this.key}`,this.dom.controller.id=this.dom.controller.id||`alert-controller-${this.key}`}show(t=!0){this._hidden&&(this.transitionClass!==""?(h(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.hideClass!==""&&l(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&h(this.showClass,this.dom.alert),requestAnimationFrame(()=>{l(this.transitionClass,this.dom.alert)})})})):(this.showClass!==""&&h(this.showClass,this.dom.alert),this.hideClass!==""&&l(this.hideClass,this.dom.alert)),this._hidden=!1,t&&this.dom.alert.dispatchEvent(this._hideEvent))}hide(t=!0){this._hidden||(this.transitionClass!==""?(h(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&l(this.showClass,this.dom.alert),requestAnimationFrame(()=>{this.transitionTimer>0?setTimeout(()=>{this.hideClass!==""&&h(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{l(this.transitionClass,this.dom.alert)})},this.transitionTimer):(this.hideClass!==""&&h(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{l(this.transitionClass,this.dom.alert)}))})})):(this.hideClass!==""&&h(this.hideClass,this.dom.alert),this.showClass!==""&&l(this.showClass,this.dom.alert)),this._hidden=!0,t&&this.dom.alert.dispatchEvent(this._hideEvent))}_handleClick(){this.dom.controller!==null&&this.dom.controller.addEventListener("pointerup",()=>this.hide())}_handleKeydown(){this.dom.controller!==null&&this.dom.controller.addEventListener("keydown",t=>{const i=c(t);(i==="Space"||i==="Enter")&&w(t)})}_handleKeyup(){this.dom.controller!==null&&this.dom.controller.addEventListener("keyup",t=>{const i=c(t);(i==="Space"||i==="Enter")&&this.hide()})}}return b}();
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
"use strict";var O=Object.defineProperty;var j=(e,t,s)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var o=(e,t,s)=>j(e,typeof t!="symbol"?t+"":t,s);function h(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.add(e):t.classList.add(...e))}function p(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.remove(e):t.classList.remove(...e))}function m(e){try{const t=e.key||e.keyCode,s={Enter:t==="Enter"||t===13,Space:t===" "||t==="Spacebar"||t===32,Escape:t==="Escape"||t==="Esc"||t===27,ArrowUp:t==="ArrowUp"||t==="Up"||t===38,ArrowRight:t==="ArrowRight"||t==="Right"||t===39,ArrowDown:t==="ArrowDown"||t==="Down"||t===40,ArrowLeft:t==="ArrowLeft"||t==="Left"||t===37,Home:t==="Home"||t===36,End:t==="End"||t===35,Tab:t==="Tab"||t===9};return Object.keys(s).find(r=>s[r]===!0)||""}catch{return""}}function f(e){e.preventDefault(),e.stopPropagation()}function y(e,t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${s}" given.`)}for(const s in t)if(!(t[s]instanceof e)){const r=typeof t[s];throw new TypeError(`${s} must be an instance of ${e.name}. "${r}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function i(e,t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${s}" given.`)}for(const s in t){const r=typeof t[s];if(r!==e)throw new TypeError(`${s} must be a ${e}. "${r}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function g(e){try{if(typeof e!="object"){const t=typeof e;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${t}" given.`)}for(const t in e)try{if(e[t]===null)throw new Error;document.querySelector(e[t])}catch{throw new TypeError(`${t} must be a valid query selector. "${e[t]}" given.`)}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function l(e){try{if(typeof e!="object"||Array.isArray(e)){const t=typeof e;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${t}" given.`)}for(const t in e){const s=typeof e[t];if(s!=="string")if(Array.isArray(e[t]))e[t].forEach(r=>{if(typeof r!="string")throw new TypeError(`${t} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${t} must be a string or an array of strings. "${s}" given.`);else{const r={};r[t]=e[t],g(r)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function d(e,t){if(i("string",{tagName:e}).status&&y(HTMLElement,t).status){const s=e.toLowerCase();let r=!0;for(const n in t)t[n].tagName.toLowerCase()!==s&&(r=!1);return r}else return!1}function P(e=null){window.Graupl=window.Graupl||{},i("string",{type:e})&&(window.Graupl[e]=window.Graupl[e]||{})}function F(e=null){return i("string",{type:e})?window.Graupl[e]:window.Graupl}function V(e,t={}){i("string",{type:e})&&i("object",{data:t})&&(window.Graupl[e]=t)}function q(e){i("string",{type:e})&&(window.Graupl[e]={})}function H(e,t,s){i("string",{type:e,key:t})&&(window.Graupl[e][t]=s)}function z(e,t){return i("string",{type:e,key:t})?window.Graupl[e][t]:null}function K(e,t){i("string",{type:e,key:t})&&delete window.Graupl[e][t]}const C={initializeStorage:P,getStorage:F,setStorage:V,clearStorage:q,pushToStorage:H,getFromStorage:z,removeFromStorage:K};class R{constructor({carouselElement:t,carouselItemSelector:s=".carousel-item",carouselItemContainerSelector:r=".carousel-item-container",carouselControlSelector:n=".carousel-control",carouselControlContainerSelector:u=".carousel-control-container",carouselTabSelector:c=".carousel-tab",carouselTabContainerSelector:_=".carousel-tab-container",autoplaySelector:a=".autoplay",nextSelector:I=".next",previousSelector:b=".previous",activeClass:v="active",previousClass:T="previous",nextClass:E="next",playClass:w="play",pauseClass:x="pause",autoplay:k=!0,transitionDelay:A=1e4,transitionDuration:D=500,playText:S="Play",pauseText:L="Pause",prefix:$="graupl-",key:M=null,initialize:G=!1}){o(this,"_dom",{carousel:null,carouselItems:[],carouselItemContainer:null,carouselControls:[],carouselControlContainer:null,carouselTabs:[],carouselTabContainer:null,autoplay:null,next:null,previous:null});o(this,"_selectors",{carouselItems:"",carouselItemContainer:"",carouselControls:"",carouselControlContainer:"",carouselTabs:"",carouselTabContainer:"",autoplay:"",next:"",previous:""});o(this,"_activeClass","active");o(this,"_previousClass","previous");o(this,"_nextClass","next");o(this,"_playClass","play");o(this,"_pauseClass","pause");o(this,"_currentItem",0);o(this,"_autoplay",!0);o(this,"_transitionDelay",1e4);o(this,"_transitionDuration",500);o(this,"_playText","Play");o(this,"_pauseText","Pause");o(this,"_currentAction","next");o(this,"_autoplayInterval",null);o(this,"_prefix","graupl-");o(this,"_key","");o(this,"_errors",[]);this._dom.carousel=t,this._selectors.carouselItems=s,this._selectors.carouselItemContainer=r,this._selectors.carouselControls=n,this._selectors.carouselControlContainer=u,this._selectors.carouselTabs=c,this._selectors.carouselTabContainer=_,this._selectors.autoplay=a,this._selectors.next=I,this._selectors.previous=b,this._activeClass=v||"",this._previousClass=T||"",this._nextClass=E||"",this._playClass=w||"",this._pauseClass=x||"",this._autoplay=k,this._transitionDelay=A,this._transitionDuration=D,this._playText=S||"",this._pauseText=L||"",this._prefix=$||"",this._key=M||"",G&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Carousel: cannot initialize carousel. The following errors have been found:
|
|
2
|
-
- ${this.errors.join(`
|
|
3
|
-
- `)}`);this._generateKey(),this._setDOMElements(),this._setIds(),this._setAriaAttributes(),this.activateFirstItem(),this._handleAutoplay(),this._handleFocus(),this._handleClick(),this._handleHover(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDuration(),C.initializeStorage("carousels"),C.pushToStorage("carousels",this.dom.carousel.id,this)}catch(t){console.error(t)}}get dom(){return this._dom}get selectors(){return this._selectors}get activeClass(){return this._activeClass}get previousClass(){return this._previousClass}get nextClass(){return this._nextClass}get playClass(){return this._playClass}get pauseClass(){return this._pauseClass}get currentItem(){return this._currentItem}get currentCarouselItem(){return this.dom.carouselItems[this.currentItem]}get currentCarouselTab(){return this.dom.carouselTabs[this.currentItem]}get autoplay(){return this._autoplay}get transitionDelay(){return this._transitionDelay}get transitionDuration(){return this._transitionDuration}get playText(){return this._playText}get pauseText(){return this._pauseText}get prefix(){return this._prefix}get key(){return this._key}get currentAction(){return this._currentAction}get errors(){return this._errors}set currentItem(t){if(i("number",{value:t}),t===this.currentItem)return;t<0?this._currentItem=0:t>=this.dom.carouselItems.length?this._currentItem=this.dom.carouselItems.length-1:this._currentItem=t,this._dom.carousel.querySelectorAll(this.selectors.carouselTab)&&this.dom.carouselItems.forEach((r,n)=>{r.setAttribute("aria-selected",n===this._currentItem)})}set autoplay(t){i("boolean",{value:t}),this._autoplay!==t&&(this._autoplay=t)}set activeClass(t){l({activeClass:t}),this._activeClass!==t&&(this._activeClass=t)}set previousClass(t){l({previousClass:t}),this._previousClass!==t&&(this._previousClass=t)}set nextClass(t){l({nextClass:t}),this._nextClass!==t&&(this._nextClass=t)}set playClass(t){l({playClass:t}),this._playClass!==t&&(this._playClass=t)}set pauseClass(t){l({pauseClass:t}),this._pauseClass!==t&&(this._pauseClass=t)}set transitionDelay(t){i("number",{value:t}),t!==this.transitionDelay&&t>=0&&(this._currentItem=t)}set transitionDuration(t){i("number",{value:t}),this._transitionDuration!==t&&t>=0&&(this._transitionDuration=t,this._setTransitionDuration())}set playText(t){i("string",{value:t}),this._playText!==t&&(this._playText=t)}set pauseText(t){i("string",{value:t}),this._pauseText!==t&&(this._pauseText=t)}set prefix(t){i("string",{value:t}),this._prefix!==t&&(this._prefix=t)}set key(t){i("string",{value:t}),this._key!==t&&(this._key=t)}_validate(){let t=!0;const s=y(HTMLElement,{carousel:this.dom.carousel});s||(this._errors.push(s.message),t=!1);const r=g({carouselItemsSelector:this._selectors.carouselItems,carouselItemContainerSelector:this._selectors.carouselItemContainer,carouselControlsSelector:this._selectors.carouselControls,carouselControlContainerSelector:this._selectors.carouselControlContainer,carouselTabsSelector:this._selectors.carouselTabs,carouselTabContainerSelector:this._selectors.carouselTabContainer,autoplaySelector:this._selectors.autoplay,nextSelector:this._selectors.next,previousSelector:this._selectors.previous});r||(this._errors.push(r.message),t=!1);const n=i("boolean",{autoplay:this.autoplay});n||(this._errors.push(n.message),t=!1);const u=i("number",{transitionDelay:this._transitionDelay});u||(this._errors.push(u.message),t=!1);const c=i("number",{transitionDuration:this._transitionDuration});if(c||(this._errors.push(c.message),t=!1),this._activeClass!==""){const a=l({activeClass:this._activeClass});a||(this._errors.push(a.message),t=!1)}if(this._previousClass!==""){const a=l({previousClass:this._previousClass});a||(this._errors.push(a.message),t=!1)}if(this._nextClass!==""){const a=l({nextClass:this._nextClass});a||(this._errors.push(a.message),t=!1)}if(this._playClass!==""){const a=l({playClass:this._playClass});a||(this._errors.push(a.message),t=!1)}if(this._pauseClass!==""){const a=l({pauseClass:this._pauseClass});a||(this._errors.push(a.message),t=!1)}if(this._playText!==""){const a=i("string",{playText:this._playText});a||(this._errors.push(a.message),t=!1)}if(this._pauseText!==""){const a=i("string",{pauseText:this._pauseText});a||(this._errors.push(a.message),t=!1)}const _=i("string",{prefix:this._prefix});return _||(this._errors.push(_.message),t=!1),t}_setDOMElementType(t,s=this.dom.carousel,r=!0){if(typeof this.selectors[t]=="string"){if(t==="carousel")throw new Error(`Graupl Carousel: "${t}" element cannot be set through _setDOMElementType.`);if(s!==this.dom.carousel&&y(HTMLElement,{base:s}),Array.isArray(this._dom[t])){const u=Array.from(s.querySelectorAll(this.selectors[t])).filter(c=>c.parentElement===s);r?this._dom[t]=u:this._dom[t]=[...this._dom[t],...u]}else{const n=s.querySelector(this.selectors[t]);if(n&&n.parentElement!==s)return;r&&(this._dom[t]=n)}}else throw new Error(`Graupl Carousel: "${t}" is not a valid element type within the carousel.`)}_resetDOMElementType(t){if(typeof this.selectors[t]=="string"){if(t==="carousel")throw new Error(`Graupl Carousel: "${t}" element cannot be reset through _resetDOMElementType.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}else throw new Error(`Graupl Carousel: "${t}" is not a valid element type within the carousel.`)}_setDOMElements(){this._setDOMElementType("carouselItemContainer"),this._setDOMElementType("carouselControlContainer"),this._setDOMElementType("carouselTabContainer"),this.dom.carouselItemContainer&&this._setDOMElementType("carouselItems",this.dom.carouselItemContainer),this.dom.carouselControlContainer&&(this._setDOMElementType("carouselControls",this.dom.carouselControlContainer),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)}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.carousel.id=this.dom.carousel.id||`carousel-${this.key}`,this.dom.carouselItems.forEach((t,s)=>{t.id=t.id||`carousel-item-${this.key}-${s}`}),this.dom.carouselTabs.forEach((t,s)=>{t.id=t.id||`carousel-tab-${this.key}-${s}`})}_setAriaAttributes(){!d("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,s)=>{d("button",{tab:t})||t.setAttribute("role","button"),t.setAttribute("aria-selected",s===0),t.setAttribute("aria-controls",this.dom.carouselItems[s].id)})}_setInterval(){this._clearInterval(),this._autoplayInterval=setInterval(()=>{this.activateNextItem()},this.transitionDelay)}_clearInterval(){clearInterval(this._autoplayInterval)}_handleAutoplay(){this.autoplay?(h(this.pauseClass,this.dom.autoplay),p(this.playClass,this.dom.autoplay),this.dom.autoplay.setAttribute("aria-label",this.pauseText),this.dom.carousel.setAttribute("aria-live","off"),this._setInterval()):(h(this.playClass,this.dom.autoplay),p(this.pauseClass,this.dom.autoplay),this.dom.autoplay.setAttribute("aria-label",this.playText),this.dom.carousel.setAttribute("aria-live","polite"),this._clearInterval())}_handleFocus(){this.dom.carousel.addEventListener("focusin",()=>{this.autoplay&&this._clearInterval()}),this.dom.carousel.addEventListener("focusout",()=>{this.autoplay&&this._setInterval()})}_handleClick(){this.dom.next.addEventListener("pointerup",()=>{this.activateNextItem()}),this.dom.previous.addEventListener("pointerup",()=>{this.activatePreviousItem()}),this.dom.autoplay.addEventListener("pointerup",()=>{this.toggleAutoplay()}),this.dom.carouselTabs.forEach((t,s)=>{t.addEventListener("pointerup",()=>{this.currentItem>s?this._currentAction="previous":this._currentAction="next",this.activateItem(s)})})}_handleHover(){this.dom.carousel.addEventListener("pointerover",()=>{this.autoplay&&this._clearInterval()}),this.dom.carousel.addEventListener("pointerleave",()=>{this.autoplay&&this._setInterval()})}_handleKeydown(){this.dom.carouselControls.forEach(t=>{t.addEventListener("keydown",s=>{switch(m(s)){case"Space":case"Enter":f(s);break}})}),this.dom.carouselTabs.forEach(t=>{t.addEventListener("keydown",s=>{switch(m(s)){case"Space":case"Enter":f(s);break}})})}_handleKeyup(){this.dom.next.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.activateNextItem(),f(t);break}}),this.dom.previous.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.activatePreviousItem(),f(t);break}}),this.dom.autoplay.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.toggleAutoplay(),f(t);break}}),this.dom.carouselTabs.forEach((t,s)=>{t.addEventListener("keyup",r=>{switch(m(r)){case"Space":case"Enter":this.activateItem(s),f(r);break}})})}_setTransitionDuration(){this.dom.carousel.style.setProperty(`--${this.prefix}carousel-transition-duration`,`${this.transitionDuration}ms`)}activateCurrentItem(){h(this.activeClass,this.currentCarouselItem),this.currentCarouselTab&&(this.currentCarouselTab.setAttribute("aria-selected",!0),h(this.activeClass,this.currentCarouselTab))}deactivateCurrentItem(){p(this.activeClass,this.currentCarouselItem),this.currentCarouselTab&&(this.currentCarouselTab.setAttribute("aria-selected",!1),p(this.activeClass,this.currentCarouselTab))}activateItem(t){const s=this.currentItem;this.dom.carousel.dataset.grauplAction=this._currentAction,this.autoplay&&this._clearInterval(),h(this.previousClass,this.currentCarouselItem),h(this.nextClass,this.dom.carouselItems[t]),requestAnimationFrame(()=>{this.deactivateCurrentItem(),this.currentItem=t,this.activateCurrentItem(),requestAnimationFrame(()=>{setTimeout(()=>{p(this.previousClass,this.dom.carouselItems[s]),p(this.nextClass,this.currentCarouselItem)},this.transitionDuration)})}),this.autoplay&&this._setInterval()}activateFirstItem(){this.activateItem(0)}activateLastItem(){this.activateItem(this.dom.carouselItems.length-1)}activateNextItem(){this._currentAction="next",this.currentItem+1>=this.dom.carouselItems.length?this.activateFirstItem():this.activateItem(this.currentItem+1)}activatePreviousItem(){this._currentAction="previous",this.currentItem-1<0?this.activateLastItem():this.activateItem(this.currentItem-1)}toggleAutoplay(){this.autoplay=!this.autoplay,this._handleAutoplay()}}module.exports=R;
|