@uva-glass/component-library 3.47.2 → 3.47.3
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/WeekSelector.module-CTDcqKel.js +17 -0
- package/dist/WeekSelector.module-CTDcqKel.js.map +1 -0
- package/dist/assets/WeekSelector.css +1 -1
- package/dist/components/WeekSelector/WeekSelector.js +61 -42
- package/dist/components/WeekSelector/WeekSelector.js.map +1 -1
- package/dist/components/WeekSelector/WeekSelector.stories.js +73 -20
- package/dist/components/WeekSelector/WeekSelector.stories.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorButton.js +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOption.js +82 -27
- package/dist/components/WeekSelector/components/WeekSelectorOption.js.map +1 -1
- package/dist/components/WeekSelector/components/WeekSelectorOptionContainer.js +1 -1
- package/package.json +2 -2
- package/dist/WeekSelector.module-BA7qqZsx.js +0 -17
- package/dist/WeekSelector.module-BA7qqZsx.js.map +0 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import './assets/WeekSelector.css';const e = {
|
|
2
|
+
"week-selector": "_week-selector_sxjgz_1",
|
|
3
|
+
"week-selector-button": "_week-selector-button_sxjgz_5",
|
|
4
|
+
"week-selector-option-container": "_week-selector-option-container_sxjgz_26",
|
|
5
|
+
"week-selector-option-header": "_week-selector-option-header_sxjgz_40",
|
|
6
|
+
"week-selector-option-table": "_week-selector-option-table_sxjgz_47",
|
|
7
|
+
"week-selector-option-table-labels": "_week-selector-option-table-labels_sxjgz_52",
|
|
8
|
+
"week-selector-option-week-grid": "_week-selector-option-week-grid_sxjgz_53",
|
|
9
|
+
"week-selector-option-table-label": "_week-selector-option-table-label_sxjgz_52",
|
|
10
|
+
"week-selector-option-week-row": "_week-selector-option-week-row_sxjgz_76",
|
|
11
|
+
"week-selector-option-week": "_week-selector-option-week_sxjgz_53",
|
|
12
|
+
"week-selector-option-week--selected": "_week-selector-option-week--selected_sxjgz_113"
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
e as s
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=WeekSelector.module-CTDcqKel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WeekSelector.module-CTDcqKel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._week-
|
|
1
|
+
._week-selector_sxjgz_1{position:relative}._week-selector-button_sxjgz_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;height:2.75rem;justify-content:space-between;min-width:8rem;padding:0 .75rem 0 1rem}._week-selector-button_sxjgz_5:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._week-selector-option-container_sxjgz_26{background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-400);border-radius:.25rem;display:flex;flex-direction:column;gap:.75rem;inset:100% auto auto 0;padding:1.5rem;position:absolute;width:max-content;z-index:10}._week-selector-option-header_sxjgz_40{color:var(--new-color-uva-black);font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold)}._week-selector-option-table_sxjgz_47{display:flex;gap:1.5rem}._week-selector-option-table-labels_sxjgz_52,._week-selector-option-week-grid_sxjgz_53{display:flex;flex-direction:column;font-family:inherit;gap:.5rem;min-width:max-content;padding:.5rem 0}._week-selector-option-table-label_sxjgz_52{color:var(--new-color-uva-black);font-weight:var(--semibold);line-height:2.25rem}._week-selector-option-week-grid_sxjgz_53{border:1px solid var(--new-color-grey-700);border-radius:.5rem;max-width:max-content;padding:.5rem;width:100%}._week-selector-option-week-row_sxjgz_76{display:flex;gap:.25rem}._week-selector-option-week_sxjgz_53{align-items:center;background-color:var(--new-color-uva-white);border:none;border-radius:.25rem;color:var(--new-color-uva-black);cursor:pointer;display:flex;height:2.25rem;justify-content:center;width:2.25rem}._week-selector-option-week_sxjgz_53:disabled{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);font-weight:var(--semibold)}._week-selector-option-week_sxjgz_53:disabled:active{background-color:var(--new-color-grey-500);color:var(--new-color-grey-00)}._week-selector-option-week_sxjgz_53:disabled:hover{cursor:not-allowed}._week-selector-option-week_sxjgz_53:hover{background-color:var(--new-color-grey-300)}._week-selector-option-week--selected_sxjgz_113,._week-selector-option-week--selected_sxjgz_113:hover{background-color:var(--new-color-navy-600);color:var(--new-color-uva-white)}._week-selector-option-week_sxjgz_53:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}
|
|
@@ -1,54 +1,73 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { WeekSelectorButton as
|
|
4
|
-
import { WeekSelectorOptionContainer as
|
|
5
|
-
import { WeekSelectorOption as
|
|
6
|
-
import { s as
|
|
7
|
-
import { useOnClickOutside as
|
|
8
|
-
const
|
|
9
|
-
weeks:
|
|
10
|
-
currentPeriod:
|
|
11
|
-
defaultSelection:
|
|
12
|
-
weekPrefix:
|
|
13
|
-
optionsHeader:
|
|
14
|
-
periodLabels:
|
|
15
|
-
onSelectWeek:
|
|
1
|
+
import { jsxs as L, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f, useRef as h, useMemo as w, useEffect as y, useLayoutEffect as S } from "react";
|
|
3
|
+
import { WeekSelectorButton as T } from "./components/WeekSelectorButton.js";
|
|
4
|
+
import { WeekSelectorOptionContainer as j } from "./components/WeekSelectorOptionContainer.js";
|
|
5
|
+
import { WeekSelectorOption as z } from "./components/WeekSelectorOption.js";
|
|
6
|
+
import { s as P } from "../../WeekSelector.module-CTDcqKel.js";
|
|
7
|
+
import { useOnClickOutside as x } from "../hooks/useOnClickOutside.js";
|
|
8
|
+
const K = ({
|
|
9
|
+
weeks: n,
|
|
10
|
+
currentPeriod: s = 0,
|
|
11
|
+
defaultSelection: r,
|
|
12
|
+
weekPrefix: O,
|
|
13
|
+
optionsHeader: g,
|
|
14
|
+
periodLabels: C,
|
|
15
|
+
onSelectWeek: k
|
|
16
16
|
}) => {
|
|
17
|
-
const [
|
|
18
|
-
if (
|
|
17
|
+
const [m, c] = f(null), [o, l] = f(!1), i = h(null), p = h(null), [N, R] = f(void 0), v = w(() => Object.keys(n ?? {}), [n]), B = () => {
|
|
18
|
+
if (r) {
|
|
19
|
+
for (const e in n)
|
|
20
|
+
if (n[e].some((t) => t.calendarWeekNumber === r && !t.isBlocked) && Number(e) > s) {
|
|
21
|
+
c(r);
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
for (const e in n) {
|
|
26
|
+
const t = n[e].find((u) => !u.isBlocked);
|
|
27
|
+
if (t && Number(e) > s) {
|
|
28
|
+
c(t.calendarWeekNumber);
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
y(() => {
|
|
34
|
+
B();
|
|
35
|
+
}, []);
|
|
36
|
+
const W = () => `${O} ${m ?? r ?? "?"}`, d = () => {
|
|
37
|
+
if (!i.current || !p.current)
|
|
19
38
|
return;
|
|
20
|
-
const e =
|
|
21
|
-
let
|
|
22
|
-
|
|
39
|
+
const e = i.current.getBoundingClientRect(), t = p.current.getBoundingClientRect(), u = window.innerHeight - e.bottom, E = e.top;
|
|
40
|
+
let b = e.height;
|
|
41
|
+
u < t.height && E > t.height && (b = -t.height), R(b);
|
|
23
42
|
};
|
|
24
|
-
return
|
|
25
|
-
|
|
43
|
+
return S(() => {
|
|
44
|
+
d();
|
|
26
45
|
const e = () => {
|
|
27
|
-
|
|
46
|
+
o && d();
|
|
28
47
|
};
|
|
29
|
-
return window.addEventListener("resize", e), !
|
|
48
|
+
return window.addEventListener("resize", e), !o && i.current?.children[0] instanceof HTMLElement && i.current.children[0].focus(), () => {
|
|
30
49
|
window.removeEventListener("resize", e);
|
|
31
50
|
};
|
|
32
|
-
}, [
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
|
|
35
|
-
|
|
51
|
+
}, [o]), x(i, l.bind(null, !1)), /* @__PURE__ */ L("div", { className: P["week-selector"], tabIndex: -1, ref: i, children: [
|
|
52
|
+
/* @__PURE__ */ a(T, { label: W(), onClick: () => l(!o) }),
|
|
53
|
+
o && /* @__PURE__ */ a(
|
|
54
|
+
j,
|
|
36
55
|
{
|
|
37
|
-
header:
|
|
38
|
-
periodLabels:
|
|
39
|
-
isVisible:
|
|
40
|
-
topPosition:
|
|
41
|
-
ref:
|
|
42
|
-
children:
|
|
43
|
-
|
|
56
|
+
header: g,
|
|
57
|
+
periodLabels: C,
|
|
58
|
+
isVisible: o,
|
|
59
|
+
topPosition: N,
|
|
60
|
+
ref: p,
|
|
61
|
+
children: v.map((e) => /* @__PURE__ */ a(
|
|
62
|
+
z,
|
|
44
63
|
{
|
|
45
64
|
periodIndex: e,
|
|
46
|
-
weeks:
|
|
47
|
-
disabled: Number(e) <=
|
|
48
|
-
selectedOption:
|
|
49
|
-
setSelectedOption:
|
|
50
|
-
onSelectWeek:
|
|
51
|
-
setIsOpen:
|
|
65
|
+
weeks: n,
|
|
66
|
+
disabled: Number(e) <= s,
|
|
67
|
+
selectedOption: m,
|
|
68
|
+
setSelectedOption: c,
|
|
69
|
+
onSelectWeek: k,
|
|
70
|
+
setIsOpen: l
|
|
52
71
|
},
|
|
53
72
|
e
|
|
54
73
|
))
|
|
@@ -57,6 +76,6 @@ const V = ({
|
|
|
57
76
|
] });
|
|
58
77
|
};
|
|
59
78
|
export {
|
|
60
|
-
|
|
79
|
+
K as WeekSelector
|
|
61
80
|
};
|
|
62
81
|
//# sourceMappingURL=WeekSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport type { RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period */\r\n weeks: Record<string, PeriodWeek[]>;\r\n /** Current period to disable previous periods */\r\n currentPeriod?: number;\r\n /** Default selected week */\r\n defaultSelection?: number;\r\n /** Prefix for the week button label */\r\n weekPrefix: string;\r\n /** Labels for each period */\r\n periodLabels: string[];\r\n /** Header text for the options container */\r\n optionsHeader: string;\r\n /** Callback function when a week is selected */\r\n onSelectWeek: (weeknumber: number) => void;\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number | null>(
|
|
1
|
+
{"version":3,"file":"WeekSelector.js","sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport type { RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period */\r\n weeks: Record<string, PeriodWeek[]>;\r\n /** Current period to disable previous periods */\r\n currentPeriod?: number;\r\n /** Default selected week */\r\n defaultSelection?: number;\r\n /** Prefix for the week button label */\r\n weekPrefix: string;\r\n /** Labels for each period */\r\n periodLabels: string[];\r\n /** Header text for the options container */\r\n optionsHeader: string;\r\n /** Callback function when a week is selected */\r\n onSelectWeek: (weeknumber: number) => void;\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number | null>(null);\r\n const [isOpen, setIsOpen] = useState<boolean>(false);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionContainerRef = useRef<HTMLDivElement>(null);\r\n const [optionContainerOpenTopPosition, setOptionContainerOpenTopPosition] = useState<number | undefined>(undefined);\r\n\r\n const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n const checkIfDefaultSelectionIsValid = () => {\r\n if (defaultSelection) {\r\n for (const period in weeks) {\r\n if (\r\n weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n Number(period) > currentPeriod\r\n ) {\r\n setSelectedOption(defaultSelection);\r\n return;\r\n }\r\n }\r\n }\r\n\r\n for (const period in weeks) {\r\n const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n return;\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n checkIfDefaultSelectionIsValid();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const getButtonLabel = () => {\r\n const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n return `${weekPrefix} ${weekNumber}`;\r\n };\r\n\r\n const getTopPositionOptionContainer = () => {\r\n if (!wrapperRef.current || !optionContainerRef.current) {\r\n return;\r\n }\r\n const buttonRect = wrapperRef.current.getBoundingClientRect();\r\n const optionContainerRect = optionContainerRef.current.getBoundingClientRect();\r\n const spaceBelow = window.innerHeight - buttonRect.bottom;\r\n const spaceAbove = buttonRect.top;\r\n let topPosition = buttonRect.height;\r\n\r\n if (spaceBelow < optionContainerRect.height && spaceAbove > optionContainerRect.height) {\r\n topPosition = -optionContainerRect.height;\r\n }\r\n\r\n setOptionContainerOpenTopPosition(topPosition);\r\n };\r\n\r\n useLayoutEffect(() => {\r\n getTopPositionOptionContainer();\r\n\r\n const handleResize = () => {\r\n if (isOpen) {\r\n getTopPositionOptionContainer();\r\n }\r\n };\r\n\r\n window.addEventListener('resize', handleResize);\r\n\r\n if (!isOpen && wrapperRef.current?.children[0] instanceof HTMLElement) {\r\n wrapperRef.current.children[0].focus();\r\n }\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, [isOpen]);\r\n\r\n useOnClickOutside(wrapperRef as RefObject<HTMLElement>, setIsOpen.bind(null, false));\r\n\r\n return (\r\n <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n {isOpen && (\r\n <WeekSelectorOptionContainer\r\n header={optionsHeader}\r\n periodLabels={periodLabels}\r\n isVisible={isOpen}\r\n topPosition={optionContainerOpenTopPosition}\r\n ref={optionContainerRef}\r\n >\r\n {periodKeys.map((periodIndex) => (\r\n <WeekSelectorOption\r\n key={periodIndex}\r\n periodIndex={periodIndex}\r\n weeks={weeks}\r\n disabled={Number(periodIndex) <= currentPeriod}\r\n selectedOption={selectedOption}\r\n setSelectedOption={setSelectedOption}\r\n onSelectWeek={onSelectWeek}\r\n setIsOpen={setIsOpen}\r\n />\r\n ))}\r\n </WeekSelectorOptionContainer>\r\n )}\r\n </div>\r\n );\r\n};\r\n"],"names":["WeekSelector","weeks","currentPeriod","defaultSelection","weekPrefix","optionsHeader","periodLabels","onSelectWeek","selectedOption","setSelectedOption","useState","isOpen","setIsOpen","wrapperRef","useRef","optionContainerRef","optionContainerOpenTopPosition","setOptionContainerOpenTopPosition","periodKeys","useMemo","checkIfDefaultSelectionIsValid","period","week","firstAvailableWeek","useEffect","getButtonLabel","getTopPositionOptionContainer","buttonRect","optionContainerRect","spaceBelow","spaceAbove","topPosition","useLayoutEffect","handleResize","useOnClickOutside","jsxs","styles","jsx","WeekSelectorButton","WeekSelectorOptionContainer","periodIndex","WeekSelectorOption"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { mockWeeks as i } from "./mockdata.js";
|
|
3
3
|
import { WeekSelector as e } from "./WeekSelector.js";
|
|
4
4
|
const c = `<WeekSelector
|
|
@@ -9,7 +9,7 @@ const c = `<WeekSelector
|
|
|
9
9
|
periodLabels={string[]};
|
|
10
10
|
optionsHeader={string};
|
|
11
11
|
onSelectWeek={(weeknumber: {number}) => void};
|
|
12
|
-
/>`,
|
|
12
|
+
/>`, S = {
|
|
13
13
|
title: "Molecules/WeekSelector",
|
|
14
14
|
component: e,
|
|
15
15
|
argTypes: {
|
|
@@ -26,11 +26,11 @@ const c = `<WeekSelector
|
|
|
26
26
|
inspectComponent: e,
|
|
27
27
|
codeString: c
|
|
28
28
|
}
|
|
29
|
-
}, d = (
|
|
30
|
-
const
|
|
31
|
-
|
|
29
|
+
}, d = (o) => {
|
|
30
|
+
const n = (l) => {
|
|
31
|
+
o.onSelectWeek(l);
|
|
32
32
|
};
|
|
33
|
-
return /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ r(
|
|
34
34
|
"div",
|
|
35
35
|
{
|
|
36
36
|
style: {
|
|
@@ -42,27 +42,80 @@ const c = `<WeekSelector
|
|
|
42
42
|
flexDirection: "column"
|
|
43
43
|
},
|
|
44
44
|
children: [
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
/* @__PURE__ */ t(e, { ...o, currentPeriod: 1, onSelectWeek: n }),
|
|
46
|
+
/* @__PURE__ */ t(
|
|
47
|
+
e,
|
|
48
|
+
{
|
|
49
|
+
...o,
|
|
50
|
+
defaultSelection: 45,
|
|
51
|
+
currentPeriod: 2,
|
|
52
|
+
onSelectWeek: n,
|
|
53
|
+
optionsHeader: "Kies een planning - Blok 2"
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
/* @__PURE__ */ t(
|
|
57
|
+
e,
|
|
58
|
+
{
|
|
59
|
+
...o,
|
|
60
|
+
defaultSelection: 6,
|
|
61
|
+
currentPeriod: 3,
|
|
62
|
+
onSelectWeek: n,
|
|
63
|
+
optionsHeader: "Kies een planning - Blok 3"
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
/* @__PURE__ */ t(
|
|
67
|
+
e,
|
|
68
|
+
{
|
|
69
|
+
...o,
|
|
70
|
+
defaultSelection: 13,
|
|
71
|
+
currentPeriod: 4,
|
|
72
|
+
onSelectWeek: n,
|
|
73
|
+
optionsHeader: "Kies een planning - Blok 4"
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ t(
|
|
77
|
+
e,
|
|
78
|
+
{
|
|
79
|
+
...o,
|
|
80
|
+
defaultSelection: 23,
|
|
81
|
+
currentPeriod: 5,
|
|
82
|
+
onSelectWeek: n,
|
|
83
|
+
optionsHeader: "Kies een planning - Blok 5"
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ t(
|
|
87
|
+
e,
|
|
88
|
+
{
|
|
89
|
+
...o,
|
|
90
|
+
defaultSelection: 28,
|
|
91
|
+
currentPeriod: 6,
|
|
92
|
+
onSelectWeek: n,
|
|
93
|
+
optionsHeader: "Kies een planning - Blok 6"
|
|
94
|
+
}
|
|
95
|
+
),
|
|
96
|
+
/* @__PURE__ */ t(
|
|
97
|
+
e,
|
|
98
|
+
{
|
|
99
|
+
...o,
|
|
100
|
+
defaultSelection: 36,
|
|
101
|
+
onSelectWeek: n,
|
|
102
|
+
optionsHeader: "Kies een planning - Zomer"
|
|
103
|
+
}
|
|
104
|
+
)
|
|
52
105
|
]
|
|
53
106
|
}
|
|
54
107
|
);
|
|
55
|
-
},
|
|
108
|
+
}, s = {
|
|
56
109
|
weeks: i,
|
|
57
110
|
weekPrefix: "week",
|
|
58
111
|
periodLabels: ["Blok 1", "Blok 2", "Blok 3", "Blok 4", "Blok 5", "Blok 6", "Zomer"],
|
|
59
|
-
optionsHeader: "Kies een planning -
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
...
|
|
112
|
+
optionsHeader: "Kies een planning - Blok 1"
|
|
113
|
+
}, a = d.bind({});
|
|
114
|
+
a.args = {
|
|
115
|
+
...s
|
|
63
116
|
};
|
|
64
117
|
export {
|
|
65
|
-
|
|
66
|
-
|
|
118
|
+
a as WeekSelectorExample,
|
|
119
|
+
S as default
|
|
67
120
|
};
|
|
68
121
|
//# sourceMappingURL=WeekSelector.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.stories.js","sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector
|
|
1
|
+
{"version":3,"file":"WeekSelector.stories.js","sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={13}\r\n currentPeriod={4}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 4\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={23}\r\n currentPeriod={5}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 5\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={28}\r\n currentPeriod={6}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 6\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={36}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Zomer\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n weeks: mockWeeks,\r\n weekPrefix: 'week',\r\n periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n ...defaultArgs,\r\n};\r\n"],"names":["codeString","WeekSelector_stories","WeekSelector","Template","args","handleSelectWeek","weekNumber","jsxs","jsx","defaultArgs","mockWeeks","WeekSelectorExample"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,eAAe,EAAE,OAAO,EAAE,SAAS,KAAK;AAAA,IACxC,kBAAkB,EAAE,OAAO,EAAE,SAAS,KAAK;AAAA,EAAE;AAAA,EAE/C,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAuC,CAACC,MAAS;AACrD,QAAMC,IAAmB,CAACC,MAAuB;AAC/C,IAAAF,EAAK,aAAaE,CAAU;AAAA,EAC9B;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAGjB,UAAA;AAAA,QAAA,gBAAAC,EAACN,KAAc,GAAGE,GAAM,eAAe,GAAG,cAAcC,GAAkB;AAAA,QAC1E,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,eAAe;AAAA,YACf,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,gBAAAG;AAAA,UAACN;AAAA,UAAA;AAAA,YACE,GAAGE;AAAA,YACJ,kBAAkB;AAAA,YAClB,cAAcC;AAAA,YACd,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMI,IAA0C;AAAA,EAC9C,OAAOC;AAAA,EACP,YAAY;AAAA,EACZ,cAAc,CAAC,UAAU,UAAU,UAAU,UAAU,UAAU,UAAU,OAAO;AAAA,EAClF,eAAe;AACjB,GAEaC,IAAsBR,EAAS,KAAK,CAAA,CAAE;AAEnDQ,EAAoB,OAAO;AAAA,EACzB,GAAGF;AACL;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as o, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { Icon as s } from "../../Icon/Icon.js";
|
|
3
|
-
import { s as n } from "../../../WeekSelector.module-
|
|
3
|
+
import { s as n } from "../../../WeekSelector.module-CTDcqKel.js";
|
|
4
4
|
const m = ({ label: e, onClick: t }) => /* @__PURE__ */ o(
|
|
5
5
|
"button",
|
|
6
6
|
{
|
|
@@ -1,31 +1,86 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { s as
|
|
4
|
-
const
|
|
5
|
-
periodIndex:
|
|
6
|
-
weeks:
|
|
7
|
-
selectedOption:
|
|
8
|
-
disabled:
|
|
9
|
-
setSelectedOption:
|
|
10
|
-
onSelectWeek:
|
|
11
|
-
setIsOpen:
|
|
12
|
-
}) =>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { s as a } from "../../../WeekSelector.module-CTDcqKel.js";
|
|
4
|
+
const h = ({
|
|
5
|
+
periodIndex: i,
|
|
6
|
+
weeks: d,
|
|
7
|
+
selectedOption: o,
|
|
8
|
+
disabled: m,
|
|
9
|
+
setSelectedOption: b,
|
|
10
|
+
onSelectWeek: u,
|
|
11
|
+
setIsOpen: c
|
|
12
|
+
}) => {
|
|
13
|
+
const p = (e) => {
|
|
14
|
+
const t = e.currentTarget;
|
|
15
|
+
switch (e.key) {
|
|
16
|
+
case "ArrowRight": {
|
|
17
|
+
e.preventDefault();
|
|
18
|
+
let r = t.nextElementSibling;
|
|
19
|
+
for (; r && r.disabled; )
|
|
20
|
+
r = r.nextElementSibling;
|
|
21
|
+
r?.focus();
|
|
22
|
+
break;
|
|
23
|
+
}
|
|
24
|
+
case "ArrowLeft": {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
let r = t.previousElementSibling;
|
|
27
|
+
for (; r && r.disabled; )
|
|
28
|
+
r = r.previousElementSibling;
|
|
29
|
+
r?.focus();
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
case "ArrowDown": {
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
const r = Array.from(t.parentElement?.children ?? []).indexOf(t);
|
|
35
|
+
let n = t.parentElement?.nextElementSibling;
|
|
36
|
+
for (; n; ) {
|
|
37
|
+
const l = n.children[r];
|
|
38
|
+
if (l && !l.disabled) {
|
|
39
|
+
l.focus();
|
|
40
|
+
break;
|
|
41
|
+
}
|
|
42
|
+
n = n.nextElementSibling;
|
|
43
|
+
}
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
case "ArrowUp": {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
const r = Array.from(t.parentElement?.children ?? []).indexOf(t);
|
|
49
|
+
let n = t.parentElement?.previousElementSibling;
|
|
50
|
+
for (; n; ) {
|
|
51
|
+
const l = n.children[r];
|
|
52
|
+
if (l && !l.disabled) {
|
|
53
|
+
l.focus();
|
|
54
|
+
break;
|
|
55
|
+
}
|
|
56
|
+
n = n.previousElementSibling;
|
|
57
|
+
}
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
case "Tab":
|
|
61
|
+
c(!1);
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ s("div", { className: a["week-selector-option-week-row"], children: d[i].map((e) => /* @__PURE__ */ s(
|
|
66
|
+
"button",
|
|
67
|
+
{
|
|
68
|
+
type: "button",
|
|
69
|
+
className: f(a["week-selector-option-week"], [
|
|
70
|
+
o === e.calendarWeekNumber && a["week-selector-option-week--selected"]
|
|
71
|
+
]),
|
|
72
|
+
disabled: e.isBlocked || m,
|
|
73
|
+
onKeyDown: p,
|
|
74
|
+
onClick: () => {
|
|
75
|
+
e.isBlocked || (b(e.calendarWeekNumber), u(e.calendarWeekNumber), c(!1));
|
|
76
|
+
},
|
|
77
|
+
autoFocus: o === e.calendarWeekNumber,
|
|
78
|
+
children: e.calendarWeekNumber
|
|
22
79
|
},
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
e.weekNumber
|
|
27
|
-
)) }, o);
|
|
80
|
+
e.weekNumber
|
|
81
|
+
)) }, i);
|
|
82
|
+
};
|
|
28
83
|
export {
|
|
29
|
-
|
|
84
|
+
h as WeekSelectorOption
|
|
30
85
|
};
|
|
31
86
|
//# sourceMappingURL=WeekSelectorOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelectorOption.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n periodIndex: string;\r\n weeks: Record<string, PeriodWeek[]>;\r\n selectedOption: number | null;\r\n disabled?: boolean;\r\n setSelectedOption: (weekNumber: number) => void;\r\n onSelectWeek: (weeknumber: number) => void;\r\n setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n periodIndex,\r\n weeks,\r\n selectedOption,\r\n disabled,\r\n setSelectedOption,\r\n onSelectWeek,\r\n setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n return (\r\n <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n {weeks[periodIndex].map((week) => (\r\n <button\r\n key={week.weekNumber}\r\n type=\"button\"\r\n className={clsx(styles['week-selector-option-week'], [\r\n selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n ])}\r\n disabled={week.isBlocked || disabled}\r\n onClick={() => {\r\n if (!week.isBlocked) {\r\n setSelectedOption(week.calendarWeekNumber);\r\n onSelectWeek(week.calendarWeekNumber);\r\n setIsOpen(false);\r\n }\r\n }}\r\n autoFocus={selectedOption === week.calendarWeekNumber}\r\n >\r\n {week.calendarWeekNumber}\r\n </button>\r\n ))}\r\n </div>\r\n );\r\n};\r\n"],"names":["WeekSelectorOption","periodIndex","weeks","selectedOption","disabled","setSelectedOption","onSelectWeek","setIsOpen","jsx","styles","week","clsx"],"mappings":";;;AAeO,MAAMA,IAAqB,CAAC;AAAA,EACjC,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,
|
|
1
|
+
{"version":3,"file":"WeekSelectorOption.js","sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n periodIndex: string;\r\n weeks: Record<string, PeriodWeek[]>;\r\n selectedOption: number | null;\r\n disabled?: boolean;\r\n setSelectedOption: (weekNumber: number) => void;\r\n onSelectWeek: (weeknumber: number) => void;\r\n setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n periodIndex,\r\n weeks,\r\n selectedOption,\r\n disabled,\r\n setSelectedOption,\r\n onSelectWeek,\r\n setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n const current = event.currentTarget;\r\n\r\n switch (event.key) {\r\n case 'ArrowRight': {\r\n event.preventDefault();\r\n let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n while (nextElement && nextElement.disabled) {\r\n nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n }\r\n nextElement?.focus();\r\n break;\r\n }\r\n case 'ArrowLeft': {\r\n event.preventDefault();\r\n let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n while (prevElement && prevElement.disabled) {\r\n prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n }\r\n prevElement?.focus();\r\n break;\r\n }\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n while (nextRow) {\r\n const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n if (candidate && !candidate.disabled) {\r\n candidate.focus();\r\n break;\r\n }\r\n nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n }\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n while (prevRow) {\r\n const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n if (candidate && !candidate.disabled) {\r\n candidate.focus();\r\n break;\r\n }\r\n prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n }\r\n break;\r\n }\r\n case 'Tab':\r\n setIsOpen(false);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n return (\r\n <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n {weeks[periodIndex].map((week) => (\r\n <button\r\n key={week.weekNumber}\r\n type=\"button\"\r\n className={clsx(styles['week-selector-option-week'], [\r\n selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n ])}\r\n disabled={week.isBlocked || disabled}\r\n onKeyDown={handleKeyDown}\r\n onClick={() => {\r\n if (!week.isBlocked) {\r\n setSelectedOption(week.calendarWeekNumber);\r\n onSelectWeek(week.calendarWeekNumber);\r\n setIsOpen(false);\r\n }\r\n }}\r\n autoFocus={selectedOption === week.calendarWeekNumber}\r\n >\r\n {week.calendarWeekNumber}\r\n </button>\r\n ))}\r\n </div>\r\n );\r\n};\r\n"],"names":["WeekSelectorOption","periodIndex","weeks","selectedOption","disabled","setSelectedOption","onSelectWeek","setIsOpen","handleKeyDown","event","current","nextElement","prevElement","currentIndex","nextRow","candidate","prevRow","jsx","styles","week","clsx"],"mappings":";;;AAeO,MAAMA,IAAqB,CAAC;AAAA,EACjC,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,MAA+B;AAC7B,QAAMC,IAAgB,CAACC,MAAkD;AACvE,UAAMC,IAAUD,EAAM;AAEtB,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK,cAAc;AACjB,QAAAA,EAAM,eAAA;AACN,YAAIE,IAAcD,EAAQ;AAC1B,eAAOC,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAF,EAAM,eAAA;AACN,YAAIG,IAAcF,EAAQ;AAC1B,eAAOE,KAAeA,EAAY;AAChC,UAAAA,IAAcA,EAAY;AAE5B,QAAAA,GAAa,MAAA;AACb;AAAA,MACF;AAAA,MACA,KAAK,aAAa;AAChB,QAAAH,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAII,IAAUJ,EAAQ,eAAe;AACrC,eAAOI,KAAS;AACd,gBAAMC,IAAYD,EAAQ,SAASD,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAD,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,QAAAL,EAAM,eAAA;AACN,cAAMI,IAAe,MAAM,KAAKH,EAAQ,eAAe,YAAY,CAAA,CAAE,EAAE,QAAQA,CAAO;AACtF,YAAIM,IAAUN,EAAQ,eAAe;AACrC,eAAOM,KAAS;AACd,gBAAMD,IAAYC,EAAQ,SAASH,CAAY;AAC/C,cAAIE,KAAa,CAACA,EAAU,UAAU;AACpC,YAAAA,EAAU,MAAA;AACV;AAAA,UACF;AACA,UAAAC,IAAUA,EAAQ;AAAA,QACpB;AACA;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAAT,EAAU,EAAK;AACf;AAAA,IAEA;AAAA,EAEN;AACA,SACE,gBAAAU,EAAC,OAAA,EAAsB,WAAWC,EAAO,+BAA+B,GACrE,UAAAhB,EAAMD,CAAW,EAAE,IAAI,CAACkB,MACvB,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,MAAK;AAAA,MACL,WAAWG,EAAKF,EAAO,2BAA2B,GAAG;AAAA,QACnDf,MAAmBgB,EAAK,sBAAsBD,EAAO,qCAAqC;AAAA,MAAA,CAC3F;AAAA,MACD,UAAUC,EAAK,aAAaf;AAAA,MAC5B,WAAWI;AAAA,MACX,SAAS,MAAM;AACb,QAAKW,EAAK,cACRd,EAAkBc,EAAK,kBAAkB,GACzCb,EAAaa,EAAK,kBAAkB,GACpCZ,EAAU,EAAK;AAAA,MAEnB;AAAA,MACA,WAAWJ,MAAmBgB,EAAK;AAAA,MAElC,UAAAA,EAAK;AAAA,IAAA;AAAA,IAhBDA,EAAK;AAAA,EAAA,CAkBb,KArBOlB,CAsBV;AAEJ;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as t, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { c as m } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as d } from "react";
|
|
4
|
-
import { s as e } from "../../../WeekSelector.module-
|
|
4
|
+
import { s as e } from "../../../WeekSelector.module-CTDcqKel.js";
|
|
5
5
|
const k = d(
|
|
6
6
|
({ header: r, periodLabels: i, isVisible: l = !1, topPosition: a, children: c }, n) => /* @__PURE__ */ t(
|
|
7
7
|
"div",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.47.
|
|
5
|
+
"version": "3.47.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"@testing-library/jest-dom": "^6.8.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
63
|
-
"@types/node": "^22.18.
|
|
63
|
+
"@types/node": "^22.18.7",
|
|
64
64
|
"@types/react": "^19.1.15",
|
|
65
65
|
"@types/react-dom": "^19.1.9",
|
|
66
66
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import './assets/WeekSelector.css';const e = {
|
|
2
|
-
"week-selector": "_week-selector_10y30_1",
|
|
3
|
-
"week-selector-button": "_week-selector-button_10y30_5",
|
|
4
|
-
"week-selector-option-container": "_week-selector-option-container_10y30_21",
|
|
5
|
-
"week-selector-option-header": "_week-selector-option-header_10y30_35",
|
|
6
|
-
"week-selector-option-table": "_week-selector-option-table_10y30_42",
|
|
7
|
-
"week-selector-option-table-labels": "_week-selector-option-table-labels_10y30_47",
|
|
8
|
-
"week-selector-option-week-grid": "_week-selector-option-week-grid_10y30_48",
|
|
9
|
-
"week-selector-option-table-label": "_week-selector-option-table-label_10y30_47",
|
|
10
|
-
"week-selector-option-week-row": "_week-selector-option-week-row_10y30_71",
|
|
11
|
-
"week-selector-option-week": "_week-selector-option-week_10y30_48",
|
|
12
|
-
"week-selector-option-week--selected": "_week-selector-option-week--selected_10y30_101"
|
|
13
|
-
};
|
|
14
|
-
export {
|
|
15
|
-
e as s
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=WeekSelector.module-BA7qqZsx.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WeekSelector.module-BA7qqZsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|