@dbcdk/react-components 0.0.5 → 0.0.7
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/dist/assets/logo.js +2 -85
- package/dist/components/__stories__/_data/table.d.ts +15 -0
- package/dist/components/__stories__/_data/table.js +49 -0
- package/dist/components/__stories__/story-components/Colors.d.ts +2 -1
- package/dist/components/__stories__/story-components/Colors.js +87 -142
- package/dist/components/__stories__/story-components/Spacing.d.ts +1 -0
- package/dist/components/__stories__/story-components/Spacing.js +58 -166
- package/dist/components/app-header/AppHeader.d.ts +4 -3
- package/dist/components/app-header/AppHeader.js +3 -6
- package/dist/components/attribute-chip/AttributeChip.d.ts +1 -0
- package/dist/components/attribute-chip/AttributeChip.js +3 -14
- package/dist/components/avatar/Avatar.d.ts +2 -2
- package/dist/components/avatar/Avatar.js +37 -71
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +4 -4
- package/dist/components/breadcrumbs/Breadcrumbs.js +4 -13
- package/dist/components/button/Button.d.ts +3 -2
- package/dist/components/button/Button.js +54 -56
- package/dist/components/button/Button.module.css +1 -1
- package/dist/components/card/Card.d.ts +8 -7
- package/dist/components/card/Card.js +19 -60
- package/dist/components/card-container/CardContainer.d.ts +3 -3
- package/dist/components/card-container/CardContainer.js +4 -16
- package/dist/components/chip/Chip.d.ts +6 -5
- package/dist/components/chip/Chip.js +14 -38
- package/dist/components/chip/Chip.module.css +9 -1
- package/dist/components/circle/Circle.d.ts +3 -2
- package/dist/components/circle/Circle.js +3 -10
- package/dist/components/clear-button/ClearButton.d.ts +2 -1
- package/dist/components/clear-button/ClearButton.js +6 -17
- package/dist/components/code-block/CodeBlock.d.ts +1 -0
- package/dist/components/code-block/CodeBlock.js +4 -10
- package/dist/components/copy-button/CopyButton.d.ts +4 -3
- package/dist/components/copy-button/CopyButton.js +19 -26
- package/dist/components/datetime-picker/DateTimePicker.d.ts +8 -5
- package/dist/components/datetime-picker/DateTimePicker.js +262 -475
- package/dist/components/datetime-picker/dateTimeHelpers.d.ts +13 -0
- package/dist/components/datetime-picker/dateTimeHelpers.js +119 -0
- package/dist/components/filter-field/FilterField.d.ts +5 -2
- package/dist/components/filter-field/FilterField.js +130 -173
- package/dist/components/filter-field/FilterField.module.css +21 -5
- package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts +36 -0
- package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js +53 -0
- package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css +60 -0
- package/dist/components/forms/checkbox/Checkbox.d.ts +31 -0
- package/dist/components/forms/checkbox/Checkbox.js +27 -0
- package/dist/components/{checkbox → forms/checkbox}/Checkbox.module.css +0 -1
- package/dist/components/forms/checkbox-group/CheckboxGroup.d.ts +47 -0
- package/dist/components/forms/checkbox-group/CheckboxGroup.js +75 -0
- package/dist/components/forms/checkbox-group/CheckboxGroup.module.css +115 -0
- package/dist/components/{input → forms/input}/Input.d.ts +9 -5
- package/dist/components/forms/input/Input.js +70 -0
- package/dist/components/{input → forms/input}/Input.module.css +1 -0
- package/dist/components/forms/input-container/InputContainer.d.ts +15 -0
- package/dist/components/forms/input-container/InputContainer.js +15 -0
- package/dist/components/forms/input-container/InputContainer.module.css +34 -0
- package/dist/components/forms/multi-select/MultiSelect.d.ts +20 -0
- package/dist/components/forms/multi-select/MultiSelect.js +19 -0
- package/dist/components/forms/select/Select.d.ts +21 -0
- package/dist/components/forms/select/Select.js +94 -0
- package/dist/components/forms/text-area/Textarea.d.ts +17 -0
- package/dist/components/forms/text-area/Textarea.js +33 -0
- package/dist/components/forms/text-area/Textarea.module.css +26 -0
- package/dist/components/headline/Headline.js +18 -43
- package/dist/components/{link/Link.d.ts → hyperlink/Hyperlink.d.ts} +2 -2
- package/dist/components/hyperlink/Hyperlink.js +11 -0
- package/dist/components/{link/Link.module.css → hyperlink/Hyperlink.module.css} +5 -14
- package/dist/components/icon/Icon.d.ts +4 -3
- package/dist/components/icon/Icon.js +11 -17
- package/dist/components/interval-select/IntervalSelect.d.ts +30 -0
- package/dist/components/interval-select/IntervalSelect.js +82 -0
- package/dist/components/menu/Menu.js +25 -67
- package/dist/components/meta-bar/MetaBar.d.ts +4 -4
- package/dist/components/meta-bar/MetaBar.js +7 -20
- package/dist/components/nav-bar/NavBar.d.ts +5 -5
- package/dist/components/nav-bar/NavBar.js +15 -45
- package/dist/components/{modal → overlay/modal}/Modal.d.ts +4 -2
- package/dist/components/overlay/modal/Modal.js +92 -0
- package/dist/components/{modal → overlay/modal}/provider/ModalProvider.d.ts +0 -1
- package/dist/components/overlay/modal/provider/ModalProvider.js +70 -0
- package/dist/components/overlay/side-panel/SidePanel.d.ts +16 -0
- package/dist/components/overlay/side-panel/SidePanel.js +10 -0
- package/dist/components/overlay/side-panel/SidePanel.module.css +56 -0
- package/dist/components/overlay/side-panel/useSidePanel.d.ts +5 -0
- package/dist/components/overlay/side-panel/useSidePanel.js +11 -0
- package/dist/components/overlay/tooltip/Tooltip.d.ts +13 -0
- package/dist/components/overlay/tooltip/Tooltip.js +17 -0
- package/dist/components/overlay/tooltip/Tooltip.module.css +106 -0
- package/dist/components/overlay/tooltip/TooltipProvider.d.ts +20 -0
- package/dist/components/overlay/tooltip/TooltipProvider.js +244 -0
- package/dist/components/overlay/tooltip/useTooltipTrigger.d.ts +24 -0
- package/dist/components/overlay/tooltip/useTooltipTrigger.js +108 -0
- package/dist/components/page/Page.d.ts +7 -6
- package/dist/components/page/Page.js +4 -21
- package/dist/components/page-layout/PageLayout.d.ts +11 -12
- package/dist/components/page-layout/PageLayout.js +35 -71
- package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.js +4 -22
- package/dist/components/pagination/Pagination.d.ts +2 -1
- package/dist/components/pagination/Pagination.js +38 -121
- package/dist/components/panel/Panel.d.ts +4 -3
- package/dist/components/panel/Panel.js +5 -10
- package/dist/components/popover/Popover.d.ts +1 -0
- package/dist/components/popover/Popover.js +116 -141
- package/dist/components/search-box/SearchBox.d.ts +2 -2
- package/dist/components/search-box/SearchBox.js +112 -162
- package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts +1 -1
- package/dist/components/segmented-progress-bar/SegmentedProgressBar.js +47 -94
- package/dist/components/sidebar/Sidebar.d.ts +1 -0
- package/dist/components/sidebar/Sidebar.js +5 -7
- package/dist/components/sidebar/components/SidebarItem.js +6 -14
- package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts +1 -1
- package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js +48 -88
- package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts +3 -2
- package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js +11 -41
- package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts +1 -0
- package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js +4 -25
- package/dist/components/sidebar/components/sidebar-items/SidebarItems.js +9 -23
- package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js +19 -40
- package/dist/components/sidebar/providers/SidebarProvider.d.ts +2 -1
- package/dist/components/sidebar/providers/SidebarProvider.js +182 -165
- package/dist/components/skeleton-loader/SkeletonLoader.js +68 -266
- package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js +11 -34
- package/dist/components/split-button/SplitButton.d.ts +7 -5
- package/dist/components/split-button/SplitButton.js +4 -27
- package/dist/components/split-pane/SplitPane.js +69 -105
- package/dist/components/split-pane/provider/SplitPaneContext.js +77 -71
- package/dist/components/table/Table.d.ts +9 -7
- package/dist/components/table/Table.js +115 -238
- package/dist/components/table/Table.module.css +5 -1
- package/dist/components/table/components/column-resizer/ColumnResizer.js +4 -15
- package/dist/components/table/components/empty-state/EmptyState.d.ts +6 -5
- package/dist/components/table/components/empty-state/EmptyState.js +22 -41
- package/dist/components/table/components/table-settings/TableSettings.d.ts +2 -1
- package/dist/components/table/components/table-settings/TableSettings.js +9 -27
- package/dist/components/table/tanstack.d.ts +1 -1
- package/dist/components/table/tanstack.js +154 -160
- package/dist/components/tabs/Tabs.d.ts +1 -0
- package/dist/components/tabs/Tabs.js +32 -81
- package/dist/components/toast/Toast.d.ts +1 -1
- package/dist/components/toast/Toast.js +4 -37
- package/dist/components/toast/Toast.module.css +1 -0
- package/dist/components/toast/provider/ToastProvider.d.ts +1 -1
- package/dist/components/toast/provider/ToastProvider.js +60 -87
- package/dist/components/user-display/UserDisplay.d.ts +2 -1
- package/dist/components/user-display/UserDisplay.js +4 -20
- package/dist/constants/severity.d.ts +1 -1
- package/dist/constants/severity.js +14 -16
- package/dist/constants/severity.types.d.ts +1 -1
- package/dist/constants/severity.types.js +1 -1
- package/dist/constants/sizes.js +6 -8
- package/dist/hooks/usePagination.d.ts +1 -1
- package/dist/hooks/usePagination.js +75 -82
- package/dist/hooks/useSorting.js +112 -110
- package/dist/hooks/useTableData.d.ts +1 -1
- package/dist/hooks/useTableData.js +42 -47
- package/dist/hooks/useTableSelection.js +121 -121
- package/dist/hooks/useTableSettings.js +23 -25
- package/dist/hooks/useTheme.d.ts +3 -7
- package/dist/hooks/useTheme.js +52 -47
- package/dist/hooks/useTimeDuration.d.ts +2 -2
- package/dist/hooks/useTimeDuration.js +33 -34
- package/dist/hooks/useViewportFill.d.ts +3 -2
- package/dist/hooks/useViewportFill.js +55 -48
- package/dist/index.d.ts +17 -8
- package/dist/index.js +18 -8
- package/dist/src/styles/styles.css +3 -3
- package/dist/styles/css-helper-classes/flex.css +4 -0
- package/dist/styles/styles.css +3 -3
- package/dist/styles/themes/dbc/dark.css +1 -1
- package/dist/styles/themes/dbc/light.css +2 -1
- package/dist/styles/themes/forfatterweb/light.css +1 -1
- package/dist/styles/themes/types.js +1 -1
- package/dist/types/a11y-props.types.d.ts +5 -5
- package/dist/types/a11y-props.types.js +1 -1
- package/dist/types/sizes.types.js +1 -1
- package/dist/utils/arrays/nested-filtering.js +43 -33
- package/dist/utils/date/formatDate.js +25 -16
- package/package.json +18 -9
- package/dist/assets/logo.cjs +0 -87
- package/dist/components/__stories__/story-components/Colors.cjs +0 -159
- package/dist/components/__stories__/story-components/Spacing.cjs +0 -190
- package/dist/components/app-header/AppHeader.cjs +0 -14
- package/dist/components/attribute-chip/AttributeChip.cjs +0 -22
- package/dist/components/avatar/Avatar.cjs +0 -101
- package/dist/components/breadcrumbs/Breadcrumbs.cjs +0 -22
- package/dist/components/button/Button.cjs +0 -87
- package/dist/components/card/Card.cjs +0 -69
- package/dist/components/card-container/CardContainer.cjs +0 -24
- package/dist/components/checkbox/Checkbox.cjs +0 -42
- package/dist/components/checkbox/Checkbox.d.ts +0 -12
- package/dist/components/checkbox/Checkbox.js +0 -36
- package/dist/components/chip/Chip.cjs +0 -50
- package/dist/components/circle/Circle.cjs +0 -18
- package/dist/components/clear-button/ClearButton.cjs +0 -26
- package/dist/components/code-block/CodeBlock.cjs +0 -18
- package/dist/components/copy-button/CopyButton.cjs +0 -35
- package/dist/components/datetime-picker/DateTimePicker.cjs +0 -504
- package/dist/components/filter-field/FilterField.cjs +0 -189
- package/dist/components/headline/Headline.cjs +0 -53
- package/dist/components/icon/Icon.cjs +0 -27
- package/dist/components/input/Input.cjs +0 -89
- package/dist/components/input/Input.js +0 -83
- package/dist/components/link/Link.cjs +0 -46
- package/dist/components/link/Link.js +0 -21
- package/dist/components/menu/Menu.cjs +0 -96
- package/dist/components/meta-bar/MetaBar.cjs +0 -29
- package/dist/components/modal/Modal.cjs +0 -134
- package/dist/components/modal/Modal.js +0 -128
- package/dist/components/modal/provider/ModalProvider.cjs +0 -80
- package/dist/components/modal/provider/ModalProvider.js +0 -77
- package/dist/components/multi-select/MultiSelect.cjs +0 -59
- package/dist/components/multi-select/MultiSelect.d.ts +0 -18
- package/dist/components/multi-select/MultiSelect.js +0 -57
- package/dist/components/nav-bar/NavBar.cjs +0 -55
- package/dist/components/page/Page.cjs +0 -30
- package/dist/components/page-layout/PageLayout.cjs +0 -84
- package/dist/components/page-layout/components/page-layout-hero/PageLayoutHero.cjs +0 -32
- package/dist/components/pagination/Pagination.cjs +0 -133
- package/dist/components/panel/Panel.cjs +0 -18
- package/dist/components/popover/Popover.cjs +0 -149
- package/dist/components/search-box/SearchBox.cjs +0 -175
- package/dist/components/segmented-progress-bar/SegmentedProgressBar.cjs +0 -103
- package/dist/components/select/Select.cjs +0 -121
- package/dist/components/select/Select.d.ts +0 -12
- package/dist/components/select/Select.js +0 -119
- package/dist/components/sidebar/Sidebar.cjs +0 -11
- package/dist/components/sidebar/components/SidebarItem.cjs +0 -18
- package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs +0 -100
- package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs +0 -50
- package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs +0 -34
- package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs +0 -29
- package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs +0 -52
- package/dist/components/sidebar/providers/SidebarProvider.cjs +0 -179
- package/dist/components/skeleton-loader/SkeletonLoader.cjs +0 -270
- package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs +0 -42
- package/dist/components/split-button/SplitButton.cjs +0 -37
- package/dist/components/split-pane/SplitPane.cjs +0 -123
- package/dist/components/split-pane/provider/SplitPaneContext.cjs +0 -87
- package/dist/components/table/Table.cjs +0 -249
- package/dist/components/table/components/column-resizer/ColumnResizer.cjs +0 -22
- package/dist/components/table/components/empty-state/EmptyState.cjs +0 -52
- package/dist/components/table/components/table-settings/TableSettings.cjs +0 -32
- package/dist/components/table/tanstack.cjs +0 -193
- package/dist/components/tabs/Tabs.cjs +0 -90
- package/dist/components/text-area/Textarea.cjs +0 -62
- package/dist/components/text-area/Textarea.d.ts +0 -14
- package/dist/components/text-area/Textarea.js +0 -56
- package/dist/components/text-area/Textarea.module.css +0 -3
- package/dist/components/toast/Toast.cjs +0 -47
- package/dist/components/toast/provider/ToastProvider.cjs +0 -98
- package/dist/components/tooltip/Tooltip.cjs +0 -183
- package/dist/components/tooltip/Tooltip.d.ts +0 -11
- package/dist/components/tooltip/Tooltip.js +0 -177
- package/dist/components/tooltip/Tooltip.module.css +0 -66
- package/dist/components/user-display/UserDisplay.cjs +0 -28
- package/dist/constants/severity.cjs +0 -21
- package/dist/constants/severity.types.cjs +0 -2
- package/dist/constants/sizes.cjs +0 -11
- package/dist/hooks/usePagination.cjs +0 -88
- package/dist/hooks/useSorting.cjs +0 -118
- package/dist/hooks/useTableData.cjs +0 -52
- package/dist/hooks/useTableSelection.cjs +0 -130
- package/dist/hooks/useTableSettings.cjs +0 -28
- package/dist/hooks/useTheme.cjs +0 -58
- package/dist/hooks/useTimeDuration.cjs +0 -39
- package/dist/hooks/useViewportFill.cjs +0 -52
- package/dist/index.cjs +0 -383
- package/dist/styles/themes/types.cjs +0 -2
- package/dist/types/a11y-props.types.cjs +0 -2
- package/dist/types/assets.d.cjs +0 -2
- package/dist/types/assets.d.js +0 -1
- package/dist/types/css.d.cjs +0 -2
- package/dist/types/css.d.js +0 -1
- package/dist/types/sizes.types.cjs +0 -2
- package/dist/utils/arrays/nested-filtering.cjs +0 -40
- package/dist/utils/date/formatDate.cjs +0 -19
- /package/dist/components/{modal → overlay/modal}/Modal.module.css +0 -0
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useId, useRef, useEffect } from 'react';
|
|
3
|
-
import styles from './Modal.module.css';
|
|
4
|
-
import { Headline } from '../headline/Headline';
|
|
5
|
-
import { Button } from '../button/Button';
|
|
6
|
-
import { X } from 'lucide-react';
|
|
7
|
-
|
|
8
|
-
function Modal({
|
|
9
|
-
isOpen,
|
|
10
|
-
onRequestClose,
|
|
11
|
-
header,
|
|
12
|
-
content,
|
|
13
|
-
primaryAction,
|
|
14
|
-
secondaryAction,
|
|
15
|
-
closeOnOverlayClick = true,
|
|
16
|
-
severity,
|
|
17
|
-
disableContentSpacing = false,
|
|
18
|
-
isLoading
|
|
19
|
-
}) {
|
|
20
|
-
const titleId = useId();
|
|
21
|
-
const dialogRef = useRef(null);
|
|
22
|
-
const lastActiveElementRef = useRef(null);
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
if (!isOpen) return;
|
|
25
|
-
lastActiveElementRef.current = document.activeElement;
|
|
26
|
-
const dialog = dialogRef.current;
|
|
27
|
-
if (dialog) {
|
|
28
|
-
const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
29
|
-
const focusable = dialog.querySelectorAll(focusableSelectors);
|
|
30
|
-
if (focusable.length > 0) {
|
|
31
|
-
focusable[0].focus();
|
|
32
|
-
} else {
|
|
33
|
-
dialog.focus();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
const handleKeyDown = (event) => {
|
|
37
|
-
if (event.key === "Escape") {
|
|
38
|
-
onRequestClose();
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (event.key === "Tab" && dialogRef.current) {
|
|
42
|
-
const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
43
|
-
const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
|
|
44
|
-
if (focusable.length === 0) return;
|
|
45
|
-
const first = focusable[0];
|
|
46
|
-
const last = focusable[focusable.length - 1];
|
|
47
|
-
if (event.shiftKey) {
|
|
48
|
-
if (document.activeElement === first) {
|
|
49
|
-
event.preventDefault();
|
|
50
|
-
last.focus();
|
|
51
|
-
}
|
|
52
|
-
} else {
|
|
53
|
-
if (document.activeElement === last) {
|
|
54
|
-
event.preventDefault();
|
|
55
|
-
first.focus();
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
61
|
-
return () => {
|
|
62
|
-
document.removeEventListener("keydown", handleKeyDown);
|
|
63
|
-
if (lastActiveElementRef.current) {
|
|
64
|
-
lastActiveElementRef.current.focus();
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
}, [isOpen, onRequestClose]);
|
|
68
|
-
if (!isOpen) return null;
|
|
69
|
-
const handleOverlayClick = () => {
|
|
70
|
-
if (closeOnOverlayClick) {
|
|
71
|
-
onRequestClose();
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
const stopPropagation = (e) => {
|
|
75
|
-
e.stopPropagation();
|
|
76
|
-
};
|
|
77
|
-
const resolvedSecondaryAction = secondaryAction != null ? secondaryAction : primaryAction ? { label: "Luk", onClick: onRequestClose } : void 0;
|
|
78
|
-
const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
|
|
79
|
-
return /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
ref: dialogRef,
|
|
83
|
-
className: `${styles.modal} ${disableContentSpacing ? "" : styles.contentSpacing}`,
|
|
84
|
-
onClick: stopPropagation,
|
|
85
|
-
role: "dialog",
|
|
86
|
-
"aria-modal": "true",
|
|
87
|
-
"aria-labelledby": header ? titleId : void 0,
|
|
88
|
-
children: [
|
|
89
|
-
/* @__PURE__ */ jsxs("div", { className: styles.header, children: [
|
|
90
|
-
header && /* @__PURE__ */ jsx(Headline, { severity, size: 3, disableMargin: true, children: header }),
|
|
91
|
-
/* @__PURE__ */ jsx(Button, { type: "button", variant: "inline", onClick: onRequestClose, "aria-label": "Luk", children: /* @__PURE__ */ jsx(X, {}) })
|
|
92
|
-
] }),
|
|
93
|
-
/* @__PURE__ */ jsx("div", { className: styles.body, children: content }),
|
|
94
|
-
shouldRenderFooter && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
|
|
95
|
-
resolvedSecondaryAction && /* @__PURE__ */ jsxs(
|
|
96
|
-
Button,
|
|
97
|
-
{
|
|
98
|
-
type: "button",
|
|
99
|
-
variant: "outlined",
|
|
100
|
-
onClick: resolvedSecondaryAction.onClick,
|
|
101
|
-
disabled: isLoading,
|
|
102
|
-
children: [
|
|
103
|
-
resolvedSecondaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon }),
|
|
104
|
-
/* @__PURE__ */ jsx("span", { children: resolvedSecondaryAction.label })
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
),
|
|
108
|
-
primaryAction && /* @__PURE__ */ jsxs(
|
|
109
|
-
Button,
|
|
110
|
-
{
|
|
111
|
-
type: "button",
|
|
112
|
-
variant: "primary",
|
|
113
|
-
onClick: primaryAction.onClick,
|
|
114
|
-
disabled: primaryAction.disabled || isLoading,
|
|
115
|
-
loading: isLoading,
|
|
116
|
-
children: [
|
|
117
|
-
primaryAction.icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: primaryAction.icon }),
|
|
118
|
-
/* @__PURE__ */ jsx("span", { children: primaryAction.label })
|
|
119
|
-
]
|
|
120
|
-
}
|
|
121
|
-
)
|
|
122
|
-
] })
|
|
123
|
-
]
|
|
124
|
-
}
|
|
125
|
-
) });
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export { Modal };
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var Modal = require('../Modal');
|
|
6
|
-
|
|
7
|
-
const ModalContext = react.createContext(void 0);
|
|
8
|
-
function ModalProvider({ children }) {
|
|
9
|
-
const [isOpen, setIsOpen] = react.useState(false);
|
|
10
|
-
const [config, setConfig] = react.useState(null);
|
|
11
|
-
const pendingResolverRef = react.useRef(null);
|
|
12
|
-
const resolvePending = react.useCallback((value) => {
|
|
13
|
-
if (pendingResolverRef.current) {
|
|
14
|
-
pendingResolverRef.current(value);
|
|
15
|
-
pendingResolverRef.current = null;
|
|
16
|
-
}
|
|
17
|
-
}, []);
|
|
18
|
-
const closeModal = react.useCallback(() => {
|
|
19
|
-
setIsOpen(false);
|
|
20
|
-
}, []);
|
|
21
|
-
const openModal = react.useCallback(
|
|
22
|
-
(newConfig) => {
|
|
23
|
-
resolvePending(false);
|
|
24
|
-
setConfig(newConfig);
|
|
25
|
-
setIsOpen(true);
|
|
26
|
-
},
|
|
27
|
-
[resolvePending]
|
|
28
|
-
);
|
|
29
|
-
const handleRequestClose = react.useCallback(() => {
|
|
30
|
-
if (config == null ? void 0 : config.onRequestClose) {
|
|
31
|
-
config.onRequestClose();
|
|
32
|
-
}
|
|
33
|
-
resolvePending(false);
|
|
34
|
-
closeModal();
|
|
35
|
-
}, [config, closeModal, resolvePending]);
|
|
36
|
-
const confirm = react.useCallback(
|
|
37
|
-
(confirmConfig) => {
|
|
38
|
-
return new Promise((resolve) => {
|
|
39
|
-
resolvePending(false);
|
|
40
|
-
pendingResolverRef.current = resolve;
|
|
41
|
-
const { confirmLabel = "OK", cancelLabel = "Annuller", ...rest } = confirmConfig;
|
|
42
|
-
const primaryAction = {
|
|
43
|
-
label: confirmLabel,
|
|
44
|
-
onClick: () => {
|
|
45
|
-
resolvePending(true);
|
|
46
|
-
closeModal();
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const secondaryAction = {
|
|
50
|
-
label: cancelLabel,
|
|
51
|
-
onClick: () => {
|
|
52
|
-
resolvePending(false);
|
|
53
|
-
closeModal();
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
setConfig({
|
|
57
|
-
...rest,
|
|
58
|
-
primaryAction,
|
|
59
|
-
secondaryAction
|
|
60
|
-
});
|
|
61
|
-
setIsOpen(true);
|
|
62
|
-
});
|
|
63
|
-
},
|
|
64
|
-
[closeModal, resolvePending]
|
|
65
|
-
);
|
|
66
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [
|
|
67
|
-
children,
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx(Modal.Modal, { ...config != null ? config : {}, isOpen, onRequestClose: handleRequestClose })
|
|
69
|
-
] });
|
|
70
|
-
}
|
|
71
|
-
function useModal() {
|
|
72
|
-
const ctx = react.useContext(ModalContext);
|
|
73
|
-
if (!ctx) {
|
|
74
|
-
throw new Error("useModal must be used within a ModalProvider");
|
|
75
|
-
}
|
|
76
|
-
return ctx;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
exports.ModalProvider = ModalProvider;
|
|
80
|
-
exports.useModal = useModal;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useState, useRef, useCallback, useContext } from 'react';
|
|
3
|
-
import { Modal } from '../Modal';
|
|
4
|
-
|
|
5
|
-
const ModalContext = createContext(void 0);
|
|
6
|
-
function ModalProvider({ children }) {
|
|
7
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
8
|
-
const [config, setConfig] = useState(null);
|
|
9
|
-
const pendingResolverRef = useRef(null);
|
|
10
|
-
const resolvePending = useCallback((value) => {
|
|
11
|
-
if (pendingResolverRef.current) {
|
|
12
|
-
pendingResolverRef.current(value);
|
|
13
|
-
pendingResolverRef.current = null;
|
|
14
|
-
}
|
|
15
|
-
}, []);
|
|
16
|
-
const closeModal = useCallback(() => {
|
|
17
|
-
setIsOpen(false);
|
|
18
|
-
}, []);
|
|
19
|
-
const openModal = useCallback(
|
|
20
|
-
(newConfig) => {
|
|
21
|
-
resolvePending(false);
|
|
22
|
-
setConfig(newConfig);
|
|
23
|
-
setIsOpen(true);
|
|
24
|
-
},
|
|
25
|
-
[resolvePending]
|
|
26
|
-
);
|
|
27
|
-
const handleRequestClose = useCallback(() => {
|
|
28
|
-
if (config == null ? void 0 : config.onRequestClose) {
|
|
29
|
-
config.onRequestClose();
|
|
30
|
-
}
|
|
31
|
-
resolvePending(false);
|
|
32
|
-
closeModal();
|
|
33
|
-
}, [config, closeModal, resolvePending]);
|
|
34
|
-
const confirm = useCallback(
|
|
35
|
-
(confirmConfig) => {
|
|
36
|
-
return new Promise((resolve) => {
|
|
37
|
-
resolvePending(false);
|
|
38
|
-
pendingResolverRef.current = resolve;
|
|
39
|
-
const { confirmLabel = "OK", cancelLabel = "Annuller", ...rest } = confirmConfig;
|
|
40
|
-
const primaryAction = {
|
|
41
|
-
label: confirmLabel,
|
|
42
|
-
onClick: () => {
|
|
43
|
-
resolvePending(true);
|
|
44
|
-
closeModal();
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const secondaryAction = {
|
|
48
|
-
label: cancelLabel,
|
|
49
|
-
onClick: () => {
|
|
50
|
-
resolvePending(false);
|
|
51
|
-
closeModal();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
setConfig({
|
|
55
|
-
...rest,
|
|
56
|
-
primaryAction,
|
|
57
|
-
secondaryAction
|
|
58
|
-
});
|
|
59
|
-
setIsOpen(true);
|
|
60
|
-
});
|
|
61
|
-
},
|
|
62
|
-
[closeModal, resolvePending]
|
|
63
|
-
);
|
|
64
|
-
return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [
|
|
65
|
-
children,
|
|
66
|
-
/* @__PURE__ */ jsx(Modal, { ...config != null ? config : {}, isOpen, onRequestClose: handleRequestClose })
|
|
67
|
-
] });
|
|
68
|
-
}
|
|
69
|
-
function useModal() {
|
|
70
|
-
const ctx = useContext(ModalContext);
|
|
71
|
-
if (!ctx) {
|
|
72
|
-
throw new Error("useModal must be used within a ModalProvider");
|
|
73
|
-
}
|
|
74
|
-
return ctx;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export { ModalProvider, useModal };
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var lucideReact = require('lucide-react');
|
|
5
|
-
var Button = require('../button/Button');
|
|
6
|
-
var Menu = require('../menu/Menu');
|
|
7
|
-
var Popover = require('../popover/Popover');
|
|
8
|
-
var Chip = require('../chip/Chip');
|
|
9
|
-
var ClearButton = require('../clear-button/ClearButton');
|
|
10
|
-
|
|
11
|
-
function MultiSelect({
|
|
12
|
-
options,
|
|
13
|
-
selectedValues = [],
|
|
14
|
-
onChange,
|
|
15
|
-
children,
|
|
16
|
-
variant = "outlined",
|
|
17
|
-
size = "md",
|
|
18
|
-
onClear
|
|
19
|
-
}) {
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
Popover.Popover,
|
|
22
|
-
{
|
|
23
|
-
trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
25
|
-
children || "V\xE6lg",
|
|
26
|
-
" ",
|
|
27
|
-
selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
|
|
28
|
-
] }),
|
|
29
|
-
onClear && selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
|
|
30
|
-
icon
|
|
31
|
-
] }),
|
|
32
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
33
|
-
"button",
|
|
34
|
-
{
|
|
35
|
-
onClick: () => {
|
|
36
|
-
onChange(option.value);
|
|
37
|
-
},
|
|
38
|
-
children: [
|
|
39
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
40
|
-
"span",
|
|
41
|
-
{
|
|
42
|
-
style: {
|
|
43
|
-
pointerEvents: "none",
|
|
44
|
-
display: "flex",
|
|
45
|
-
alignItems: "center",
|
|
46
|
-
color: !(selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? "var(--color-border-strong)" : "inherit"
|
|
47
|
-
},
|
|
48
|
-
children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {})
|
|
49
|
-
}
|
|
50
|
-
),
|
|
51
|
-
option.label
|
|
52
|
-
]
|
|
53
|
-
}
|
|
54
|
-
) }, option.value)) })
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
exports.MultiSelect = MultiSelect;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ButtonVariant } from '../button/Button';
|
|
2
|
-
interface MultiselectOption {
|
|
3
|
-
label: string;
|
|
4
|
-
value: string;
|
|
5
|
-
icon?: React.ReactNode;
|
|
6
|
-
}
|
|
7
|
-
interface MultiSelectProps {
|
|
8
|
-
options: MultiselectOption[];
|
|
9
|
-
selectedValues: string[];
|
|
10
|
-
onChange: (selectedValue: string) => void;
|
|
11
|
-
placeholder?: string;
|
|
12
|
-
children?: React.ReactNode;
|
|
13
|
-
variant?: ButtonVariant;
|
|
14
|
-
size?: 'sm' | 'md' | 'lg';
|
|
15
|
-
onClear?: () => void;
|
|
16
|
-
}
|
|
17
|
-
export declare function MultiSelect({ options, selectedValues, onChange, children, variant, size, onClear, }: MultiSelectProps): React.ReactNode;
|
|
18
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Check, Square } from 'lucide-react';
|
|
3
|
-
import { Button } from '../button/Button';
|
|
4
|
-
import { Menu } from '../menu/Menu';
|
|
5
|
-
import { Popover } from '../popover/Popover';
|
|
6
|
-
import { Chip } from '../chip/Chip';
|
|
7
|
-
import { ClearButton } from '../clear-button/ClearButton';
|
|
8
|
-
|
|
9
|
-
function MultiSelect({
|
|
10
|
-
options,
|
|
11
|
-
selectedValues = [],
|
|
12
|
-
onChange,
|
|
13
|
-
children,
|
|
14
|
-
variant = "outlined",
|
|
15
|
-
size = "md",
|
|
16
|
-
onClear
|
|
17
|
-
}) {
|
|
18
|
-
return /* @__PURE__ */ jsx(
|
|
19
|
-
Popover,
|
|
20
|
-
{
|
|
21
|
-
trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
|
|
22
|
-
/* @__PURE__ */ jsxs("span", { children: [
|
|
23
|
-
children || "V\xE6lg",
|
|
24
|
-
" ",
|
|
25
|
-
selectedValues.length > 0 ? /* @__PURE__ */ jsx(Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
|
|
26
|
-
] }),
|
|
27
|
-
onClear && selectedValues.length > 0 && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
|
|
28
|
-
icon
|
|
29
|
-
] }),
|
|
30
|
-
children: /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxs(
|
|
31
|
-
"button",
|
|
32
|
-
{
|
|
33
|
-
onClick: () => {
|
|
34
|
-
onChange(option.value);
|
|
35
|
-
},
|
|
36
|
-
children: [
|
|
37
|
-
/* @__PURE__ */ jsx(
|
|
38
|
-
"span",
|
|
39
|
-
{
|
|
40
|
-
style: {
|
|
41
|
-
pointerEvents: "none",
|
|
42
|
-
display: "flex",
|
|
43
|
-
alignItems: "center",
|
|
44
|
-
color: !(selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? "var(--color-border-strong)" : "inherit"
|
|
45
|
-
},
|
|
46
|
-
children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Square, {})
|
|
47
|
-
}
|
|
48
|
-
),
|
|
49
|
-
option.label
|
|
50
|
-
]
|
|
51
|
-
}
|
|
52
|
-
) }, option.value)) })
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { MultiSelect };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('./NavBar.module.css');
|
|
5
|
-
var logo = require('../../assets/logo');
|
|
6
|
-
var Headline = require('../headline/Headline');
|
|
7
|
-
var AppHeader = require('../app-header/AppHeader');
|
|
8
|
-
|
|
9
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
12
|
-
|
|
13
|
-
function NavBar({ logo: logo$1, items, productName, addition }) {
|
|
14
|
-
return /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
15
|
-
"nav",
|
|
16
|
-
{
|
|
17
|
-
className: styles__default.default.container,
|
|
18
|
-
"aria-label": productName ? `${productName} navigation` : "Main navigation",
|
|
19
|
-
children: [
|
|
20
|
-
logo$1,
|
|
21
|
-
productName && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
22
|
-
"span",
|
|
23
|
-
{
|
|
24
|
-
className: styles__default.default.productName,
|
|
25
|
-
style: { display: "flex", alignItems: "center", gap: 16 },
|
|
26
|
-
children: [
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
|
|
28
|
-
/* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
),
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
|
|
33
|
-
const { component: Component, label, icon, href, active, external } = item;
|
|
34
|
-
const linkClass = [styles__default.default.link, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
|
|
35
|
-
const commonProps = {
|
|
36
|
-
className: linkClass,
|
|
37
|
-
href,
|
|
38
|
-
...active ? { "aria-current": "page" } : {},
|
|
39
|
-
...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
|
|
40
|
-
};
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...commonProps, children: [
|
|
42
|
-
icon,
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
|
|
44
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { ...commonProps, children: [
|
|
45
|
-
icon,
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
|
|
47
|
-
] }) }, id);
|
|
48
|
-
}) }),
|
|
49
|
-
addition
|
|
50
|
-
]
|
|
51
|
-
}
|
|
52
|
-
) });
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
exports.NavBar = NavBar;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var Headline = require('../headline/Headline');
|
|
5
|
-
var styles = require('./Page.module.css');
|
|
6
|
-
var Breadcrumbs = require('../breadcrumbs/Breadcrumbs');
|
|
7
|
-
|
|
8
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
11
|
-
|
|
12
|
-
function Page({
|
|
13
|
-
header,
|
|
14
|
-
severity,
|
|
15
|
-
headerIcon,
|
|
16
|
-
headerAddition,
|
|
17
|
-
breadcrumbs,
|
|
18
|
-
disableContentBox,
|
|
19
|
-
children
|
|
20
|
-
}) {
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
|
|
23
|
-
breadcrumbs ? /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, { items: breadcrumbs }) : /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, severity, icon: headerIcon, children: header }),
|
|
24
|
-
headerAddition
|
|
25
|
-
] }),
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.content} ${disableContentBox ? styles__default.default.disableContentBox : ""}`, children })
|
|
27
|
-
] });
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
exports.Page = Page;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var styles = require('./PageLayout.module.css');
|
|
5
|
-
var PageLayoutHero = require('./components/page-layout-hero/PageLayoutHero');
|
|
6
|
-
|
|
7
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
10
|
-
|
|
11
|
-
const PageLayoutBase = ({
|
|
12
|
-
children,
|
|
13
|
-
sidebar,
|
|
14
|
-
header,
|
|
15
|
-
containScrolling = false,
|
|
16
|
-
orientation = "vertical"
|
|
17
|
-
}) => {
|
|
18
|
-
if (orientation === "vertical") {
|
|
19
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
20
|
-
"div",
|
|
21
|
-
{
|
|
22
|
-
className: `${styles__default.default.container} ${styles__default.default.vertical} ${containScrolling ? styles__default.default.containScrolling : ""}`,
|
|
23
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", height: "100%", maxWidth: "100%" }, children: [
|
|
24
|
-
sidebar,
|
|
25
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
26
|
-
"div",
|
|
27
|
-
{
|
|
28
|
-
style: {
|
|
29
|
-
flex: 1,
|
|
30
|
-
display: "flex",
|
|
31
|
-
flexDirection: "column",
|
|
32
|
-
height: "100%",
|
|
33
|
-
maxHeight: "100vh",
|
|
34
|
-
overflow: "auto"
|
|
35
|
-
},
|
|
36
|
-
children: [
|
|
37
|
-
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: header }),
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
style: {
|
|
42
|
-
flex: 1,
|
|
43
|
-
display: "flex",
|
|
44
|
-
flexDirection: "column",
|
|
45
|
-
padding: "var(--spacing-md)",
|
|
46
|
-
gap: "var(--spacing-md)",
|
|
47
|
-
backgroundColor: "var(--color-bg-surface)",
|
|
48
|
-
overflow: "auto"
|
|
49
|
-
},
|
|
50
|
-
children
|
|
51
|
-
}
|
|
52
|
-
)
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
] })
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.container} ${containScrolling ? styles__default.default.containScrolling : ""}`, children });
|
|
61
|
-
};
|
|
62
|
-
const PageLayoutHeader = ({
|
|
63
|
-
maxWidth = true,
|
|
64
|
-
children
|
|
65
|
-
}) => {
|
|
66
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerContainer, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.headerContent} ${maxWidth ? styles__default.default.maxWidth : ""}`, children }) });
|
|
67
|
-
};
|
|
68
|
-
const PageLayoutContent = ({
|
|
69
|
-
maxWidth = true,
|
|
70
|
-
children
|
|
71
|
-
}) => {
|
|
72
|
-
return /* @__PURE__ */ jsxRuntime.jsx("main", { className: `${styles__default.default.content} ${maxWidth ? styles__default.default.maxWidth : ""}`, children });
|
|
73
|
-
};
|
|
74
|
-
const PageLayoutFooter = ({ children }) => {
|
|
75
|
-
return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: styles__default.default.footer, children });
|
|
76
|
-
};
|
|
77
|
-
const PageLayout = Object.assign(PageLayoutBase, {
|
|
78
|
-
Header: PageLayoutHeader,
|
|
79
|
-
Hero: PageLayoutHero.PageLayoutHero,
|
|
80
|
-
Content: PageLayoutContent,
|
|
81
|
-
Footer: PageLayoutFooter
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
exports.PageLayout = PageLayout;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var heroStyles = require('./PageLayoutHero.module.css');
|
|
5
|
-
var layoutStyles = require('../../PageLayout.module.css');
|
|
6
|
-
|
|
7
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var heroStyles__default = /*#__PURE__*/_interopDefault(heroStyles);
|
|
10
|
-
var layoutStyles__default = /*#__PURE__*/_interopDefault(layoutStyles);
|
|
11
|
-
|
|
12
|
-
const PageLayoutHero = ({
|
|
13
|
-
children,
|
|
14
|
-
link,
|
|
15
|
-
metaHeadline,
|
|
16
|
-
headline,
|
|
17
|
-
image,
|
|
18
|
-
maxWidth = true,
|
|
19
|
-
textBgColor = "var(--color-primary-900)"
|
|
20
|
-
}) => {
|
|
21
|
-
const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${heroStyles__default.default.heroContainer} ${maxWidth ? layoutStyles__default.default.maxWidth : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: heroStyles__default.default.splitWrapper, children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.imageColumn, children: image }),
|
|
23
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.textColumn, style: { backgroundColor: textBgColor }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: heroStyles__default.default.textInner, children: [
|
|
24
|
-
metaHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.metaHeadline, children: metaHeadline }),
|
|
25
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroStyles__default.default.headline, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: headline }) }),
|
|
26
|
-
children
|
|
27
|
-
] }) })
|
|
28
|
-
] }) });
|
|
29
|
-
return link ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: link(content) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
exports.PageLayoutHero = PageLayoutHero;
|