@uva-glass/component-library 3.19.3 → 3.20.0
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/CheckboxButton.css +1 -1
- package/dist/assets/CheckboxButtonBar.css +1 -1
- package/dist/assets/PeriodSelector.css +1 -1
- package/dist/assets/StatusPill.css +1 -1
- package/dist/assets/TextArea.css +1 -1
- package/dist/assets/ToggleSwitch.css +1 -1
- package/dist/assets/Tooltip.css +1 -1
- package/dist/assets/VarIndicator.css +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.d.ts +1 -5
- package/dist/components/CheckboxButton/CheckboxButton.js +17 -40
- package/dist/components/CheckboxButton/CheckboxButton.js.map +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.stories.js +5 -13
- package/dist/components/CheckboxButton/CheckboxButton.stories.js.map +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.test.js +11 -41
- package/dist/components/CheckboxButton/CheckboxButton.test.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +5 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +48 -44
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +16 -4
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +17 -19
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +31 -30
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +1 -1
- package/dist/components/StatusPill/StatusPill.js +5 -5
- package/dist/components/TextArea/TextArea.js +12 -12
- package/dist/components/ToggleSwitch/ToggleSwitch.js +26 -26
- package/dist/components/Tooltip/Tooltip.js +24 -24
- package/dist/components/VarIndicator/VarIndicator.js +13 -13
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.js +10 -12
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +10 -12
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/TimelineItem-ClDZJkaZ.js +0 -60
- package/dist/TimelineItem-ClDZJkaZ.js.map +0 -1
- package/dist/assets/TimelineItem.css +0 -1
- package/dist/components/Timeline/Timeline.d.ts +0 -23
- package/dist/components/Timeline/Timeline.js +0 -29
- package/dist/components/Timeline/Timeline.js.map +0 -1
- package/dist/components/Timeline/Timeline.stories.d.ts +0 -5
- package/dist/components/Timeline/Timeline.stories.js +0 -43
- package/dist/components/Timeline/Timeline.stories.js.map +0 -1
- package/dist/components/Timeline/Timeline.test.d.ts +0 -0
- package/dist/components/Timeline/Timeline.test.js +0 -80
- package/dist/components/Timeline/Timeline.test.js.map +0 -1
- package/dist/components/Timeline/TimelineItem.d.ts +0 -2
- package/dist/components/Timeline/TimelineItem.js +0 -7
- package/dist/components/Timeline/TimelineItem.js.map +0 -1
- package/dist/components/Timeline/index.d.ts +0 -1
- package/dist/components/Timeline/index.js +0 -5
- package/dist/components/Timeline/index.js.map +0 -1
- package/dist/components/Timeline/mockTimelineItem.d.ts +0 -30
- package/dist/components/Timeline/mockTimelineItem.js +0 -95
- package/dist/components/Timeline/mockTimelineItem.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import "../../index-BqLi4tOb.js";
|
|
3
|
-
import { r as c, s as
|
|
3
|
+
import { r as c, s as t } from "../../react.esm-CsMDid07.js";
|
|
4
4
|
import { CheckboxButtonBar as a } from "./CheckboxButtonBar.js";
|
|
5
|
-
const n = jest.fn(),
|
|
5
|
+
const n = jest.fn(), d = [
|
|
6
6
|
{
|
|
7
7
|
label: "1.1",
|
|
8
8
|
value: "1"
|
|
@@ -23,15 +23,15 @@ describe("CheckboxButton", () => {
|
|
|
23
23
|
a,
|
|
24
24
|
{
|
|
25
25
|
label: "Periode",
|
|
26
|
-
checkboxes:
|
|
26
|
+
checkboxes: d,
|
|
27
27
|
defaultValues: ["1", "2"],
|
|
28
28
|
labelPosition: "top",
|
|
29
29
|
onSetValues: n
|
|
30
30
|
}
|
|
31
31
|
)
|
|
32
|
-
), expect(
|
|
33
|
-
const
|
|
34
|
-
expect(
|
|
32
|
+
), expect(t.getByText("Periode")).toBeInTheDocument();
|
|
33
|
+
const e = t.getAllByRole("checkbox");
|
|
34
|
+
expect(e).toHaveLength(3);
|
|
35
35
|
}), it("should render required", () => {
|
|
36
36
|
c(
|
|
37
37
|
/* @__PURE__ */ l(
|
|
@@ -39,16 +39,16 @@ describe("CheckboxButton", () => {
|
|
|
39
39
|
{
|
|
40
40
|
label: "Periode",
|
|
41
41
|
required: !0,
|
|
42
|
-
checkboxes:
|
|
42
|
+
checkboxes: d,
|
|
43
43
|
defaultValues: ["1", "2"],
|
|
44
44
|
labelPosition: "top",
|
|
45
45
|
onSetValues: n
|
|
46
46
|
}
|
|
47
47
|
)
|
|
48
48
|
);
|
|
49
|
-
const
|
|
50
|
-
expect(
|
|
51
|
-
const o =
|
|
49
|
+
const e = t.getByText("Periode");
|
|
50
|
+
expect(e).toHaveTextContent("Periode"), expect(e).toHaveClass("label--required");
|
|
51
|
+
const o = t.getAllByRole("checkbox");
|
|
52
52
|
expect(o).toHaveLength(3);
|
|
53
53
|
}), it("should render default checked", () => {
|
|
54
54
|
c(
|
|
@@ -56,16 +56,16 @@ describe("CheckboxButton", () => {
|
|
|
56
56
|
a,
|
|
57
57
|
{
|
|
58
58
|
label: "Periode",
|
|
59
|
-
checkboxes:
|
|
59
|
+
checkboxes: d,
|
|
60
60
|
defaultValues: ["1", "2"],
|
|
61
61
|
labelPosition: "top",
|
|
62
62
|
onSetValues: n
|
|
63
63
|
}
|
|
64
64
|
)
|
|
65
65
|
);
|
|
66
|
-
const
|
|
67
|
-
expect(
|
|
68
|
-
const o =
|
|
66
|
+
const e = t.getByText("Periode");
|
|
67
|
+
expect(e).toHaveTextContent("Periode");
|
|
68
|
+
const o = t.getAllByRole("checkbox");
|
|
69
69
|
expect(o).toHaveLength(3), expect(o[0]).toBeChecked(), expect(o[1]).toBeChecked(), expect(o[2]).not.toBeChecked();
|
|
70
70
|
}), it("should render notValidatedText and notValid style", () => {
|
|
71
71
|
c(
|
|
@@ -74,17 +74,15 @@ describe("CheckboxButton", () => {
|
|
|
74
74
|
{
|
|
75
75
|
label: "Periode",
|
|
76
76
|
notValidatedText: "Not Valid",
|
|
77
|
-
checkboxes:
|
|
77
|
+
checkboxes: d,
|
|
78
78
|
defaultValues: ["1", "2"],
|
|
79
79
|
labelPosition: "top",
|
|
80
80
|
onSetValues: n
|
|
81
81
|
}
|
|
82
82
|
)
|
|
83
83
|
);
|
|
84
|
-
const
|
|
85
|
-
expect(
|
|
86
|
-
const o = e.getAllByRole("checkbox");
|
|
87
|
-
expect(o).toHaveLength(3), expect(e.getByText("1.1")).toHaveClass("checkbox-button--not-valid"), expect(e.getByText("1.2")).toHaveClass("checkbox-button--not-valid"), expect(e.getByText("1.3")).toHaveClass("checkbox-button--not-valid");
|
|
84
|
+
const e = t.getByText("Periode");
|
|
85
|
+
expect(e).toHaveTextContent("Periode"), expect(t.getByText("Not Valid")).toBeInTheDocument();
|
|
88
86
|
});
|
|
89
87
|
});
|
|
90
88
|
//# sourceMappingURL=CheckboxButtonBar.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.test.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst onClickSpy = jest.fn();\n\nconst MOCK_CHECKBOXES = [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n];\n\ndescribe('CheckboxButton', () => {\n it('should render', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n expect(screen.getByText('Periode')).toBeInTheDocument();\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render required', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n required={true}\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(label).toHaveClass('label--required');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render default checked', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n expect(checkbox[0]).toBeChecked();\n expect(checkbox[1]).toBeChecked();\n expect(checkbox[2]).not.toBeChecked();\n });\n\n it('should render notValidatedText and notValid style', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n notValidatedText=\"Not Valid\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(screen.getByText('Not Valid')).toBeInTheDocument();\n
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.test.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst onClickSpy = jest.fn();\n\nconst MOCK_CHECKBOXES = [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n];\n\ndescribe('CheckboxButton', () => {\n it('should render', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n expect(screen.getByText('Periode')).toBeInTheDocument();\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render required', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n required={true}\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(label).toHaveClass('label--required');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render default checked', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n expect(checkbox[0]).toBeChecked();\n expect(checkbox[1]).toBeChecked();\n expect(checkbox[2]).not.toBeChecked();\n });\n\n it('should render notValidatedText and notValid style', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n notValidatedText=\"Not Valid\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(screen.getByText('Not Valid')).toBeInTheDocument();\n });\n});\n"],"names":["onClickSpy","MOCK_CHECKBOXES","render","jsx","CheckboxButtonBar","screen","checkbox","label"],"mappings":";;;;AAMA,MAAMA,IAAa,KAAK,GAAG,GAErBC,IAAkB;AAAA,EACtB;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,iBAAiB,MAAM;AACxB,IAAAC;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB,GACA,OAAOK,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAChD,UAAAC,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC;AAAA,EAAA,CAChC,GAED,GAAG,0BAA0B,MAAM;AACjC,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAU;AAAA,UACV,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS,GAClC,OAAAA,CAAK,EAAE,YAAY,iBAAiB;AACrC,UAAAD,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC;AAAA,EAAA,CAChC,GAED,GAAG,iCAAiC,MAAM;AACxC,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS;AACnC,UAAAD,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC,GAC/B,OAAOA,EAAS,CAAC,CAAC,EAAE,YAAY,GAChC,OAAOA,EAAS,CAAC,CAAC,EAAE,YAAY,GAChC,OAAOA,EAAS,CAAC,CAAC,EAAE,IAAI,YAAY;AAAA,EAAA,CACrC,GAED,GAAG,qDAAqD,MAAM;AAC5D,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS,GACzC,OAAOF,EAAO,UAAU,WAAW,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACzD;AACH,CAAC;"}
|
|
@@ -6,11 +6,11 @@ import "../Buttons/LinkButton.js";
|
|
|
6
6
|
import "@react-aria/button";
|
|
7
7
|
import "../Checkbox/Checkbox.js";
|
|
8
8
|
import { Label as h } from "../Label/Label.js";
|
|
9
|
+
import { FeedbackBox as k } from "../FeedbackBox/FeedbackBox.js";
|
|
9
10
|
import "@react-aria/dialog";
|
|
10
11
|
import "@react-aria/focus";
|
|
11
12
|
import "@react-aria/overlays";
|
|
12
13
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
13
|
-
import { FeedbackBox as k } from "../FeedbackBox/FeedbackBox.js";
|
|
14
14
|
import "../GridRow/GridRow.js";
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { jsxs as h, jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { useRef as
|
|
2
|
+
import { c as x } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { useRef as v, useState as M, useEffect as $ } from "react";
|
|
4
4
|
import "../Buttons/Button.js";
|
|
5
5
|
import "../Buttons/LinkButton.js";
|
|
6
6
|
import "@react-aria/button";
|
|
7
7
|
import "../Checkbox/Checkbox.js";
|
|
8
|
-
import { CheckboxButtonBar as
|
|
8
|
+
import { CheckboxButtonBar as N } from "../CheckboxButtonBar/CheckboxButtonBar.js";
|
|
9
9
|
import "@react-aria/dialog";
|
|
10
10
|
import "@react-aria/focus";
|
|
11
11
|
import "@react-aria/overlays";
|
|
12
12
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
13
|
-
import { FeedbackBox as
|
|
13
|
+
import { FeedbackBox as w } from "../FeedbackBox/FeedbackBox.js";
|
|
14
14
|
import "../GridRow/GridRow.js";
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
17
17
|
import "../InputField/InputField.js";
|
|
18
|
-
import { Label as
|
|
18
|
+
import { Label as B } from "../Label/Label.js";
|
|
19
19
|
import "react-router";
|
|
20
20
|
import "../../TablePlugin-hxs9O_ox.js";
|
|
21
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
@@ -27,59 +27,60 @@ import "../SelectListbox/SelectProvider.js";
|
|
|
27
27
|
import "../Sortable/components/SortableItem.js";
|
|
28
28
|
import "../../SortableProvider-B3_u0pKv.js";
|
|
29
29
|
import '../../assets/PeriodSelector.css';const l = {
|
|
30
|
-
"period-selector__container": "_period-
|
|
31
|
-
"period-selector__container--label-left": "_period-selector__container--label-
|
|
32
|
-
"period-selector__container--label-top": "_period-selector__container--label-
|
|
33
|
-
"period-selector__selector-container": "_period-selector__selector-
|
|
34
|
-
"period-selector__selector-row": "_period-selector__selector-
|
|
35
|
-
}, S = 0, f = 1, E = 2,
|
|
30
|
+
"period-selector__container": "_period-selector__container_d1p0j_1",
|
|
31
|
+
"period-selector__container--label-left": "_period-selector__container--label-left_d1p0j_6",
|
|
32
|
+
"period-selector__container--label-top": "_period-selector__container--label-top_d1p0j_12",
|
|
33
|
+
"period-selector__selector-container": "_period-selector__selector-container_d1p0j_18",
|
|
34
|
+
"period-selector__selector-row": "_period-selector__selector-row_d1p0j_24"
|
|
35
|
+
}, S = 0, f = 1, E = 2, _ = 3, D = 7, I = (n) => {
|
|
36
36
|
const c = [];
|
|
37
|
-
for (let t = 0; t < n.length; t +=
|
|
38
|
-
c.push(n.slice(t, t +
|
|
37
|
+
for (let t = 0; t < n.length; t += _)
|
|
38
|
+
c.push(n.slice(t, t + _));
|
|
39
39
|
return c;
|
|
40
40
|
}, lr = ({
|
|
41
|
-
maxPeriods: n =
|
|
41
|
+
maxPeriods: n = D,
|
|
42
42
|
defaultValues: c,
|
|
43
43
|
label: t,
|
|
44
44
|
labelPosition: b = "top",
|
|
45
|
-
required:
|
|
46
|
-
notValidatedText:
|
|
45
|
+
required: m = !1,
|
|
46
|
+
notValidatedText: p = "",
|
|
47
47
|
onChange: g
|
|
48
48
|
}) => {
|
|
49
|
-
const R = Array.from({ length: n }, (r, e) => e + 1), a =
|
|
50
|
-
label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) %
|
|
49
|
+
const R = Array.from({ length: n }, (r, e) => e + 1), a = I(R), j = a.map((r, e) => r.map((o) => ({
|
|
50
|
+
label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) % _ + 1}`}`,
|
|
51
51
|
value: o.toString()
|
|
52
|
-
}))), i =
|
|
52
|
+
}))), i = v(
|
|
53
53
|
a.map(
|
|
54
54
|
(r) => r.reduce((e, o) => (c != null && c.includes(o) && e.push(o), e), [])
|
|
55
55
|
)
|
|
56
|
-
), [P,
|
|
57
|
-
i.current[e] = r.map((o) => Number(o)), u(
|
|
56
|
+
), [P, d] = M([]), u = (r) => r[S].length !== 0 || r[f].length !== 0 ? [E] : r[E].length !== 0 ? [S, f] : [], k = (r, e) => {
|
|
57
|
+
i.current[e] = r.map((o) => Number(o)), d(u(i.current)), g([...i.current.flat()].sort());
|
|
58
58
|
};
|
|
59
|
-
return
|
|
60
|
-
u(
|
|
59
|
+
return $(() => {
|
|
60
|
+
d(u(i.current));
|
|
61
61
|
}, []), /* @__PURE__ */ h(
|
|
62
62
|
"div",
|
|
63
63
|
{
|
|
64
|
-
className:
|
|
64
|
+
className: x(
|
|
65
65
|
l["period-selector__container"],
|
|
66
66
|
l[`period-selector__container--label-${b}`]
|
|
67
67
|
),
|
|
68
68
|
children: [
|
|
69
|
-
t && /* @__PURE__ */ s(
|
|
69
|
+
t && /* @__PURE__ */ s(B, { htmlFor: "", required: m, children: t }),
|
|
70
70
|
/* @__PURE__ */ h("div", { className: l["period-selector__selector-container"], children: [
|
|
71
|
-
/* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children:
|
|
72
|
-
|
|
71
|
+
/* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children: j.map((r, e) => /* @__PURE__ */ s(
|
|
72
|
+
N,
|
|
73
73
|
{
|
|
74
74
|
checkboxes: r,
|
|
75
75
|
defaultValues: i.current[e].map((o) => o.toString()),
|
|
76
76
|
disableGroup: P.includes(e),
|
|
77
|
-
required:
|
|
78
|
-
onSetValues: (o) => k(o, e)
|
|
77
|
+
required: m,
|
|
78
|
+
onSetValues: (o) => k(o, e),
|
|
79
|
+
notValidated: p !== ""
|
|
79
80
|
},
|
|
80
81
|
`group_${e}`
|
|
81
82
|
)) }),
|
|
82
|
-
|
|
83
|
+
p !== "" && /* @__PURE__ */ s(w, { level: "error", feedback: p })
|
|
83
84
|
] })
|
|
84
85
|
]
|
|
85
86
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuBMA,IAAa,GACbC,IAAa,GACbC,IAAa,GAEbC,IAAuB,GACvBC,IAAc,GAEdC,IAAe,CAACC,MAAgC;AACpD,QAAMC,IAAqB,CAAC;AAC5B,WAASC,IAAQ,GAAGA,IAAQF,EAAM,QAAQE,KAASL;AACjD,IAAAI,EAAO,KAAKD,EAAM,MAAME,GAAOA,IAAQL,CAAoB,CAAC;AAEvD,SAAAI;AACT,GAGaE,KAAiB,CAAC;AAAA,EAC7B,YAAAC,IAAaN;AAAA,EACb,eAAAO;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AACF,MAA2B;AACnB,QAAAC,IAAiB,MAAM,KAAK,EAAE,QAAQP,EAAW,GAAG,CAACQ,GAAGC,MAAUA,IAAQ,CAAC,GAC3EC,IAAiBf,EAAaY,CAAc,GAE5CI,IAAgBD,EAAe,IAAI,CAACE,GAASC,MAC1CD,EAAQ,IAAI,CAACE,OAAY;AAAA,IAC9B,OAAO,GAAGD,IAAW,CAAC,GAAGD,EAAQ,WAAW,IAAI,KAAK,KAAME,IAAS,KAAKrB,IAAwB,CAAC,EAAE;AAAA,IACpG,OAAOqB,EAAO,SAAS;AAAA,EAAA,EACvB,CACH,GAEKC,IAAeC;AAAA,IACnBN,EAAe;AAAA,MAAI,CAACG,MAClBA,EAAS,OAAO,CAACD,GAASE,OACpBb,KAAA,QAAAA,EAAe,SAASa,MAASF,EAAQ,KAAKE,CAAM,GACjDF,IACN,CAAc,CAAA;AAAA,IAAA;AAAA,EAErB,GACM,CAACK,GAAkBC,CAAmB,IAAIC,EAAmB,CAAA,CAAE,GAE/DC,IAAgB,CAACC,MACjBA,EAAQ/B,CAAU,EAAE,WAAW,KAAK+B,EAAQ9B,CAAU,EAAE,WAAW,IAAU,CAACC,CAAU,IACxF6B,EAAQ7B,CAAU,EAAE,WAAW,IAAU,CAACF,GAAYC,CAAU,IAC7D,CAAC,GAGJ+B,IAAe,CAACC,GAAkBd,MAAkB;AAC3C,IAAAM,EAAA,QAAQN,CAAK,IAAIc,EAAO,IAAI,CAACC,MAAQ,OAAOA,CAAG,CAAC,GACzCN,EAAAE,EAAcL,EAAa,OAAO,CAAC,GAC9CT,EAAA,CAAC,GAAGS,EAAa,QAAQ,KAAM,CAAA,EAAE,MAAM;AAAA,EAClD;AAEA,SAAAU,EAAU,MAAM;AACM,IAAAP,EAAAE,EAAcL,EAAa,OAAO,CAAC;AAAA,EACzD,GAAG,EAAE,GAGH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,4BAA4B;AAAA,QACnCA,EAAO,qCAAqCzB,CAAa,EAAE;AAAA,MAC7D;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAA2B,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAA1B,GACf,UACHF,GAAA;AAAA,QAED,gBAAAwB,EAAA,OAAA,EAAI,WAAWE,EAAO,qCAAqC,GAC1D,UAAA;AAAA,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAcjB,EAAA,IAAI,CAACoB,GAAYlB,MAC9B,gBAAAgB;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,YAAAD;AAAA,cACA,eAAehB,EAAa,QAAQF,CAAQ,EAAE,IAAI,CAACW,MAAQA,EAAI,UAAU;AAAA,cACzE,cAAcP,EAAiB,SAASJ,CAAQ;AAAA,cAChD,UAAAT;AAAA,cACA,aAAa,CAAC6B,MAAUX,EAAaW,GAAOpB,CAAQ;AAAA,YAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
|
|
@@ -8,11 +8,11 @@ import "../../../../Buttons/LinkButton.js";
|
|
|
8
8
|
import "@react-aria/button";
|
|
9
9
|
import "../../../../Checkbox/Checkbox.js";
|
|
10
10
|
import "../../../../Label/Label.js";
|
|
11
|
+
import "../../../../FeedbackBox/FeedbackBox.js";
|
|
11
12
|
import "@react-aria/dialog";
|
|
12
13
|
import "@react-aria/focus";
|
|
13
14
|
import "@react-aria/overlays";
|
|
14
15
|
import "../../../../OverlayCloseButton/OverlayCloseButton.js";
|
|
15
|
-
import "../../../../FeedbackBox/FeedbackBox.js";
|
|
16
16
|
import "../../../../FormField/FormField.js";
|
|
17
17
|
import "../../../../GridRow/GridRow.js";
|
|
18
18
|
import "../../../../IconButton/IconButton.js";
|
|
@@ -23,11 +23,11 @@ import "../Buttons/Button.js";
|
|
|
23
23
|
import "../Buttons/LinkButton.js";
|
|
24
24
|
import "@react-aria/button";
|
|
25
25
|
import "../Checkbox/Checkbox.js";
|
|
26
|
+
import { FeedbackBox as fr } from "../FeedbackBox/FeedbackBox.js";
|
|
26
27
|
import "@react-aria/dialog";
|
|
27
28
|
import "@react-aria/focus";
|
|
28
29
|
import "@react-aria/overlays";
|
|
29
30
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
30
|
-
import { FeedbackBox as fr } from "../FeedbackBox/FeedbackBox.js";
|
|
31
31
|
import "../GridRow/GridRow.js";
|
|
32
32
|
import "../IconButton/IconButton.js";
|
|
33
33
|
import "../Input/Input.js";
|
|
@@ -2,11 +2,11 @@ import { jsxs as _, jsx as p } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as e } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { Icon as a } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/StatusPill.css';const l = {
|
|
5
|
-
"status-pill": "_status-
|
|
6
|
-
"status-pill__possible": "_status-
|
|
7
|
-
"status-pill__impossible": "_status-
|
|
8
|
-
"status-pill__new": "_status-
|
|
9
|
-
"status-pill--bar": "_status-pill--
|
|
5
|
+
"status-pill": "_status-pill_1df7x_1",
|
|
6
|
+
"status-pill__possible": "_status-pill__possible_1df7x_10",
|
|
7
|
+
"status-pill__impossible": "_status-pill__impossible_1df7x_15",
|
|
8
|
+
"status-pill__new": "_status-pill__new_1df7x_20",
|
|
9
|
+
"status-pill--bar": "_status-pill--bar_1df7x_26"
|
|
10
10
|
}, o = {
|
|
11
11
|
possible: "CheckCircleFillMini",
|
|
12
12
|
impossible: "CrossCircleFillMini"
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsxs as r, jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { c as
|
|
2
|
+
import { useRef as u, useState as x } from "react";
|
|
3
|
+
import { c as d } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import '../../assets/TextArea.css';const t = {
|
|
5
|
-
"text-area__wrapper": "_text-
|
|
6
|
-
"text-area__header": "_text-
|
|
7
|
-
"text-area__label": "_text-
|
|
8
|
-
"text-area__word-count": "_text-area__word-
|
|
9
|
-
"text-area__word-count--alert": "_text-area__word-count--
|
|
10
|
-
"text-area": "_text-
|
|
5
|
+
"text-area__wrapper": "_text-area__wrapper_13728_1",
|
|
6
|
+
"text-area__header": "_text-area__header_13728_7",
|
|
7
|
+
"text-area__label": "_text-area__label_13728_13",
|
|
8
|
+
"text-area__word-count": "_text-area__word-count_13728_20",
|
|
9
|
+
"text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
|
|
10
|
+
"text-area": "_text-area_13728_1"
|
|
11
11
|
};
|
|
12
|
-
function
|
|
13
|
-
const e =
|
|
12
|
+
function m({ onChange: l, label: c, maxCharacters: a = 0 }) {
|
|
13
|
+
const e = u(null), [n, o] = x(0), s = () => {
|
|
14
14
|
e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, o(e.current.value.length), l(e.current.value.trim()));
|
|
15
15
|
};
|
|
16
16
|
return /* @__PURE__ */ r("div", { className: t["text-area__wrapper"], children: [
|
|
17
17
|
/* @__PURE__ */ r("div", { className: t["text-area__header"], children: [
|
|
18
18
|
/* @__PURE__ */ _("span", { className: t["text-area__label"], children: c }),
|
|
19
19
|
a > 0 && /* @__PURE__ */ r("div", { className: t["text-area__word-count"], children: [
|
|
20
|
-
/* @__PURE__ */ _("span", { className:
|
|
20
|
+
/* @__PURE__ */ _("span", { className: d({ [t["text-area__word-count--alert"]]: n === a }), children: n }),
|
|
21
21
|
" / ",
|
|
22
22
|
a
|
|
23
23
|
] })
|
|
@@ -34,6 +34,6 @@ function h({ onChange: l, label: c, maxCharacters: a = 0 }) {
|
|
|
34
34
|
] });
|
|
35
35
|
}
|
|
36
36
|
export {
|
|
37
|
-
|
|
37
|
+
m as TextArea
|
|
38
38
|
};
|
|
39
39
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e, jsxs as _ } from "react/jsx-runtime";
|
|
2
2
|
import { c as a } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import '../../assets/ToggleSwitch.css';const
|
|
4
|
-
"toggle-switch": "_toggle-
|
|
5
|
-
"toggle-switch__visible": "_toggle-
|
|
6
|
-
"toggle-switch--disabled": "_toggle-switch--
|
|
7
|
-
"toggle-switch--loading": "_toggle-switch--
|
|
8
|
-
"toggle-switch--visually-hidden": "_toggle-switch--visually-
|
|
9
|
-
"toggle-switch--disabled-label": "_toggle-switch--disabled-
|
|
10
|
-
"toggle-switch--loading-cursor": "_toggle-switch--loading-
|
|
11
|
-
"toggle-switch--extra-left-gap": "_toggle-switch--extra-left-
|
|
3
|
+
import '../../assets/ToggleSwitch.css';const l = {
|
|
4
|
+
"toggle-switch": "_toggle-switch_98blk_1",
|
|
5
|
+
"toggle-switch__visible": "_toggle-switch__visible_98blk_9",
|
|
6
|
+
"toggle-switch--disabled": "_toggle-switch--disabled_98blk_52",
|
|
7
|
+
"toggle-switch--loading": "_toggle-switch--loading_98blk_62",
|
|
8
|
+
"toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_98blk_72",
|
|
9
|
+
"toggle-switch--disabled-label": "_toggle-switch--disabled-label_98blk_85",
|
|
10
|
+
"toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_98blk_89",
|
|
11
|
+
"toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_98blk_93"
|
|
12
12
|
};
|
|
13
13
|
function n({
|
|
14
14
|
condition: i,
|
|
15
15
|
wrapper: g,
|
|
16
|
-
children:
|
|
16
|
+
children: t
|
|
17
17
|
}) {
|
|
18
|
-
return i ? g(
|
|
18
|
+
return i ? g(t) : t;
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function b({
|
|
21
21
|
label: i,
|
|
22
22
|
labelPosition: g = "after",
|
|
23
|
-
labelVisible:
|
|
23
|
+
labelVisible: t = !0,
|
|
24
24
|
loading: o = !1,
|
|
25
25
|
extraLeftGap: d,
|
|
26
26
|
...s
|
|
27
27
|
}) {
|
|
28
|
-
const c = /* @__PURE__ */
|
|
28
|
+
const c = /* @__PURE__ */ e(
|
|
29
29
|
"span",
|
|
30
30
|
{
|
|
31
31
|
className: a(
|
|
32
|
-
{ [
|
|
33
|
-
{ [
|
|
32
|
+
{ [l["toggle-switch--visually-hidden"]]: !t },
|
|
33
|
+
{ [l["toggle-switch--disabled-label"]]: s.disabled }
|
|
34
34
|
),
|
|
35
35
|
children: i
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ e(
|
|
39
39
|
n,
|
|
40
40
|
{
|
|
41
41
|
condition: o,
|
|
42
|
-
wrapper: (h) => /* @__PURE__ */
|
|
42
|
+
wrapper: (h) => /* @__PURE__ */ e("div", { className: l["toggle-switch--loading-cursor"], children: h }),
|
|
43
43
|
children: /* @__PURE__ */ _(
|
|
44
44
|
"label",
|
|
45
45
|
{
|
|
46
46
|
className: a(
|
|
47
|
-
|
|
48
|
-
{ [
|
|
49
|
-
{ [
|
|
50
|
-
{ [
|
|
47
|
+
l["toggle-switch"],
|
|
48
|
+
{ [l["toggle-switch--disabled"]]: s.disabled },
|
|
49
|
+
{ [l["toggle-switch--loading"]]: o },
|
|
50
|
+
{ [l["toggle-switch--extra-left-gap"]]: d }
|
|
51
51
|
),
|
|
52
52
|
children: [
|
|
53
53
|
g === "before" && c,
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ e("input", { className: l["toggle-switch--visually-hidden"], ...s, type: "checkbox" }),
|
|
55
|
+
/* @__PURE__ */ e("span", { className: l["toggle-switch__visible"], title: t ? "" : i }),
|
|
56
56
|
g === "after" && c
|
|
57
57
|
]
|
|
58
58
|
}
|
|
@@ -61,6 +61,6 @@ function f({
|
|
|
61
61
|
);
|
|
62
62
|
}
|
|
63
63
|
export {
|
|
64
|
-
|
|
64
|
+
b as ToggleSwitch
|
|
65
65
|
};
|
|
66
66
|
//# sourceMappingURL=ToggleSwitch.js.map
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as y, useState as E, useCallback as b, useEffect as
|
|
3
|
-
import '../../assets/Tooltip.css';const
|
|
4
|
-
"tooltip-container": "_tooltip-
|
|
5
|
-
tooltip_small:
|
|
6
|
-
tooltip_medium:
|
|
7
|
-
tooltip_large:
|
|
8
|
-
"tooltip_under-trigger": "_tooltip_under-
|
|
1
|
+
import { jsxs as B, jsx as R } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as y, useState as E, useCallback as b, useEffect as a } from "react";
|
|
3
|
+
import '../../assets/Tooltip.css';const M = "_tooltip_small_622pq_8", j = "_tooltip_medium_622pq_9", I = "_tooltip_large_622pq_10", f = {
|
|
4
|
+
"tooltip-container": "_tooltip-container_622pq_1",
|
|
5
|
+
tooltip_small: M,
|
|
6
|
+
tooltip_medium: j,
|
|
7
|
+
tooltip_large: I,
|
|
8
|
+
"tooltip_under-trigger": "_tooltip_under-trigger_622pq_64"
|
|
9
9
|
};
|
|
10
|
-
function
|
|
11
|
-
const l = y(null), c = y(null), [i, o] = E(!1), [d,
|
|
10
|
+
function X({ element: q, id: _, text: L, size: n = "medium", openUnderTrigger: s = !1 }) {
|
|
11
|
+
const l = y(null), c = y(null), [i, o] = E(!1), [d, k] = E({ top: 0, left: 0 }), m = n === "small" && 20 || n === "large" && 35 || 27, g = n === "small" && 25 || n === "large" && 70 || 47, e = b(() => {
|
|
12
12
|
if (l.current && c.current) {
|
|
13
|
-
const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(),
|
|
14
|
-
let r = t.top +
|
|
15
|
-
const
|
|
16
|
-
r -=
|
|
13
|
+
const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(), p = window.scrollY, C = window.scrollX;
|
|
14
|
+
let r = t.top + p + m - h.height;
|
|
15
|
+
const O = t.left + C + g + (t.width - h.width) / 2;
|
|
16
|
+
r -= p, r < 0 && (r = t.bottom + p), k({ top: r, left: O });
|
|
17
17
|
}
|
|
18
|
-
}, [
|
|
18
|
+
}, [g, m]), u = b(
|
|
19
19
|
(t) => {
|
|
20
20
|
t.key === "Escape" && o(!1);
|
|
21
21
|
},
|
|
@@ -27,20 +27,20 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
27
27
|
function v() {
|
|
28
28
|
o(!1);
|
|
29
29
|
}
|
|
30
|
-
function
|
|
30
|
+
function x() {
|
|
31
31
|
o(!i);
|
|
32
32
|
}
|
|
33
|
-
return
|
|
33
|
+
return a(() => {
|
|
34
34
|
if (!l.current) return;
|
|
35
35
|
const t = l.current;
|
|
36
36
|
return t.addEventListener("keyup", u, !0), () => {
|
|
37
37
|
t.removeEventListener("keyup", u, !0);
|
|
38
38
|
};
|
|
39
|
-
}, [u]),
|
|
39
|
+
}, [u]), a(() => (e(), window.addEventListener("resize", e), () => {
|
|
40
40
|
window.removeEventListener("resize", e);
|
|
41
|
-
}), [e]),
|
|
41
|
+
}), [e]), a(() => {
|
|
42
42
|
i && !s && e();
|
|
43
|
-
}, [i, s, e]), /* @__PURE__ */
|
|
43
|
+
}, [i, s, e]), /* @__PURE__ */ B(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
46
|
className: f["tooltip-container"],
|
|
@@ -48,12 +48,12 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
48
48
|
onFocus: w,
|
|
49
49
|
onMouseEnter: w,
|
|
50
50
|
onMouseLeave: v,
|
|
51
|
-
onMouseUp:
|
|
51
|
+
onMouseUp: x,
|
|
52
52
|
ref: l,
|
|
53
53
|
role: "button",
|
|
54
54
|
tabIndex: -1,
|
|
55
55
|
children: [
|
|
56
|
-
/* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children:
|
|
56
|
+
/* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children: q }),
|
|
57
57
|
i && /* @__PURE__ */ R(
|
|
58
58
|
"span",
|
|
59
59
|
{
|
|
@@ -62,7 +62,7 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
62
62
|
id: _,
|
|
63
63
|
role: "tooltip",
|
|
64
64
|
style: s ? {} : { top: d.top, left: d.left },
|
|
65
|
-
children:
|
|
65
|
+
children: L
|
|
66
66
|
}
|
|
67
67
|
)
|
|
68
68
|
]
|
|
@@ -70,6 +70,6 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
70
70
|
);
|
|
71
71
|
}
|
|
72
72
|
export {
|
|
73
|
-
|
|
73
|
+
X as Tooltip
|
|
74
74
|
};
|
|
75
75
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
2
|
+
import { c as m } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { Icon as c } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/VarIndicator.css';const i = {
|
|
5
|
-
"var-indicator__container": "_var-
|
|
6
|
-
"var-indicator__container--draft": "_var-indicator__container--
|
|
7
|
-
"var-indicator__container--rejected": "_var-indicator__container--
|
|
8
|
-
"var-indicator__container--submitted": "_var-indicator__container--
|
|
9
|
-
"var-indicator__container--active": "_var-indicator__container--
|
|
10
|
-
"var-indicator__label": "_var-
|
|
11
|
-
"var-indicator__step-container": "_var-indicator__step-
|
|
12
|
-
},
|
|
5
|
+
"var-indicator__container": "_var-indicator__container_1m025_29",
|
|
6
|
+
"var-indicator__container--draft": "_var-indicator__container--draft_1m025_48",
|
|
7
|
+
"var-indicator__container--rejected": "_var-indicator__container--rejected_1m025_49",
|
|
8
|
+
"var-indicator__container--submitted": "_var-indicator__container--submitted_1m025_61",
|
|
9
|
+
"var-indicator__container--active": "_var-indicator__container--active_1m025_72",
|
|
10
|
+
"var-indicator__label": "_var-indicator__label_1m025_83",
|
|
11
|
+
"var-indicator__step-container": "_var-indicator__step-container_1m025_94"
|
|
12
|
+
}, s = {
|
|
13
13
|
DRAFT: "CircleLarge",
|
|
14
14
|
REJECTED: "CircleLarge",
|
|
15
15
|
SUBMITTED: "CircleLargeDotted",
|
|
16
16
|
ACTIVE: "SignalActive"
|
|
17
|
-
},
|
|
17
|
+
}, E = ({ label: t, variant: r = "DRAFT", maxSteps: n, currentStep: e = 1, onClick: o }) => /* @__PURE__ */ l(
|
|
18
18
|
"button",
|
|
19
19
|
{
|
|
20
|
-
className:
|
|
20
|
+
className: m(i["var-indicator__container"], i[`var-indicator__container--${r.toLowerCase()}`]),
|
|
21
21
|
onClick: o,
|
|
22
22
|
children: [
|
|
23
|
-
/* @__PURE__ */ a(c, { name:
|
|
23
|
+
/* @__PURE__ */ a(c, { name: s[r], size: 16 }),
|
|
24
24
|
/* @__PURE__ */ a("span", { className: i["var-indicator__label"], children: t[`${r}`] }),
|
|
25
25
|
n && n > 0 && r === "SUBMITTED" ? Array.from({ length: n }, (_, d) => d + 1).map((_) => /* @__PURE__ */ a("div", { className: i["var-indicator__step-container"], children: /* @__PURE__ */ a(c, { name: _ <= e ? "CircleSmallFilled" : "CircleSmall" }) }, _)) : null
|
|
26
26
|
]
|
|
27
27
|
}
|
|
28
28
|
);
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
E as VarIndicator
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=VarIndicator.js.map
|