@uva-glass/component-library 1.62.11 → 1.63.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/LexicalClipboard.prod-C6LsK5E6.js +311 -0
- package/dist/LexicalClipboard.prod-C6LsK5E6.js.map +1 -0
- package/dist/LexicalTable.prod-DqzrJuYr.js +1221 -0
- package/dist/LexicalTable.prod-DqzrJuYr.js.map +1 -0
- package/dist/{LexicalUtils.prod-DlLRWqta.js → LexicalUtils.prod-BTFNWAMw.js} +33 -42
- package/dist/{LexicalUtils.prod-DlLRWqta.js.map → LexicalUtils.prod-BTFNWAMw.js.map} +1 -1
- package/dist/{TablePlugin-B3ZkyOU_.js → TablePlugin-BLzR0g93.js} +58 -55
- package/dist/{TablePlugin-B3ZkyOU_.js.map → TablePlugin-BLzR0g93.js.map} +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +24 -20
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +15 -11
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +16 -12
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +6 -2
- package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +22 -18
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +20 -16
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +7 -3
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js +16 -16
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +19 -16
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +7 -3
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +110 -108
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +36 -36
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js +31 -0
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js.map +1 -0
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/index.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/index.js +5 -0
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/index.js.map +1 -0
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +6 -2
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +7 -4
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js +12 -12
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +36 -36
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +361 -358
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/helpers.js +27 -27
- package/dist/components/index.js +1 -1
- package/dist/helpers-B-pdj8pq.js +168 -0
- package/dist/{helpers-CC9_diXm.js.map → helpers-B-pdj8pq.js.map} +1 -1
- package/dist/index.js +1 -1
- package/package.json +17 -20
- package/dist/Lexical.prod-DOTdxgeo.js +0 -4072
- package/dist/Lexical.prod-DOTdxgeo.js.map +0 -1
- package/dist/LexicalLink.prod-Cqa5Im8X.js +0 -208
- package/dist/LexicalLink.prod-Cqa5Im8X.js.map +0 -1
- package/dist/LexicalList.prod-DlqzsJTH.js +0 -564
- package/dist/LexicalList.prod-DlqzsJTH.js.map +0 -1
- package/dist/LexicalTable.prod-BKz2StgB.js +0 -1525
- package/dist/LexicalTable.prod-BKz2StgB.js.map +0 -1
- package/dist/helpers-CC9_diXm.js +0 -168
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as f, jsx as
|
|
1
|
+
import { jsxs as f, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { c as l } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "../Buttons/Button.js";
|
|
@@ -15,10 +15,14 @@ import "../IconButton/IconButton.js";
|
|
|
15
15
|
import "../Input/Input.js";
|
|
16
16
|
import "../InputField/InputField.js";
|
|
17
17
|
import "react-router-dom";
|
|
18
|
-
import "../../TablePlugin-
|
|
18
|
+
import "../../TablePlugin-BLzR0g93.js";
|
|
19
|
+
import "lexical";
|
|
20
|
+
import "@lexical/list";
|
|
21
|
+
import "@lexical/link";
|
|
19
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
22
26
|
import "../SelectListbox/SelectListbox.js";
|
|
23
27
|
import "../SelectListbox/SelectProvider.js";
|
|
24
28
|
import "../Sortable/components/SortableItem.js";
|
|
@@ -31,22 +35,22 @@ import '../../assets/FormInput.css';const r = {
|
|
|
31
35
|
"form-field__input-container": "_form-field__input-container_c9jem_34",
|
|
32
36
|
"form-field__input": "_form-field__input_c9jem_25",
|
|
33
37
|
"form-field__input--error": "_form-field__input--error_c9jem_60"
|
|
34
|
-
},
|
|
38
|
+
}, R = ({
|
|
35
39
|
id: t,
|
|
36
40
|
label: m,
|
|
37
41
|
labelPosition: p = "top",
|
|
38
42
|
type: _ = "text",
|
|
39
43
|
required: c = !1,
|
|
40
|
-
notValidatedText:
|
|
44
|
+
notValidatedText: e = "",
|
|
41
45
|
onChange: n
|
|
42
46
|
}) => {
|
|
43
|
-
const a = (
|
|
44
|
-
typeof n == "function" && n(
|
|
47
|
+
const a = (o) => ["e", "E", "+", "-"].includes(o.key) && o.preventDefault(), d = (o) => {
|
|
48
|
+
typeof n == "function" && n(o.target.value);
|
|
45
49
|
};
|
|
46
50
|
return /* @__PURE__ */ f("div", { className: l(r["form-field__container"], r[`form-field__container--label-${p}`]), children: [
|
|
47
|
-
m && /* @__PURE__ */
|
|
51
|
+
m && /* @__PURE__ */ i(s, { htmlFor: t, required: c, children: m }),
|
|
48
52
|
/* @__PURE__ */ f("div", { className: r["form-field__input-feedback-container"], children: [
|
|
49
|
-
/* @__PURE__ */
|
|
53
|
+
/* @__PURE__ */ i("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ i(
|
|
50
54
|
"input",
|
|
51
55
|
{
|
|
52
56
|
id: t,
|
|
@@ -54,15 +58,15 @@ import '../../assets/FormInput.css';const r = {
|
|
|
54
58
|
..._ === "number" && { onKeyDown: a },
|
|
55
59
|
onChange: d,
|
|
56
60
|
className: l(r["form-field__input"], [
|
|
57
|
-
|
|
61
|
+
e !== "" && r["form-field__input--error"]
|
|
58
62
|
])
|
|
59
63
|
}
|
|
60
64
|
) }),
|
|
61
|
-
|
|
65
|
+
e !== "" && /* @__PURE__ */ i(u, { level: "error", feedback: e })
|
|
62
66
|
] })
|
|
63
67
|
] });
|
|
64
68
|
};
|
|
65
69
|
export {
|
|
66
|
-
|
|
70
|
+
R as FormInput
|
|
67
71
|
};
|
|
68
72
|
//# sourceMappingURL=FormInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\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: (value: string) => void;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n return (\n <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n {label && (\n <Label htmlFor={id} required={required}>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n <div className={styles['form-field__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-field__input'], [\n notValidatedText !== '' && styles['form-field__input--error'],\n ])}\n />\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","FeedbackBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\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: (value: string) => void;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n return (\n <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n {label && (\n <Label htmlFor={id} required={required}>\n {label}\n </Label>\n )}\n\n <div className={styles['form-field__input-feedback-container']}>\n <div className={styles['form-field__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={clsx(styles['form-field__input'], [\n notValidatedText !== '' && styles['form-field__input--error'],\n ])}\n />\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuBaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOF,KAAa,cACbA,EAAAE,EAAM,OAAO,KAAK;AAAA,EAC7B;AAGF,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAKC,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCV,CAAa,EAAE,CAAC,GAC1G,UAAA;AAAA,IAAAD,KACE,gBAAAY,EAAAC,GAAA,EAAM,SAASd,GAAI,UAAAI,GACjB,UACHH,GAAA;AAAA,IAGD,gBAAAS,EAAA,OAAA,EAAI,WAAWE,EAAO,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAb;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWI,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWE,EAAKC,EAAO,mBAAmB,GAAG;AAAA,YAC3CP,MAAqB,MAAMO,EAAO,0BAA0B;AAAA,UAAA,CAC7D;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCP,MAAqB,MAAM,gBAAAQ,EAACE,KAAY,OAAM,SAAQ,UAAUV,GAAkB;AAAA,IAAA,GACrF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
|
-
import { fn as
|
|
3
|
+
import { fn as p } from "../../index-C9QoqAAt.js";
|
|
4
4
|
import { InputField as o } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
import { Icon as f } from "../Icon/Icon.js";
|
|
@@ -15,10 +15,14 @@ import "../GridRow/GridRow.js";
|
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
17
17
|
import "react-router-dom";
|
|
18
|
-
import "../../TablePlugin-
|
|
18
|
+
import "../../TablePlugin-BLzR0g93.js";
|
|
19
|
+
import "lexical";
|
|
20
|
+
import "@lexical/list";
|
|
21
|
+
import "@lexical/link";
|
|
19
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
22
26
|
import "../SelectListbox/SelectListbox.js";
|
|
23
27
|
import "../SelectListbox/SelectProvider.js";
|
|
24
28
|
import "../Sortable/components/SortableItem.js";
|
|
@@ -30,7 +34,7 @@ const C = `
|
|
|
30
34
|
`, h = (t) => {
|
|
31
35
|
const r = t.variant ?? [];
|
|
32
36
|
return { ...t, variant: r.toString() };
|
|
33
|
-
},
|
|
37
|
+
}, X = {
|
|
34
38
|
title: "Atoms/InputField",
|
|
35
39
|
component: o,
|
|
36
40
|
argTypes: {
|
|
@@ -56,10 +60,10 @@ const C = `
|
|
|
56
60
|
codeString: C
|
|
57
61
|
}
|
|
58
62
|
}, a = (t) => {
|
|
59
|
-
const [r,
|
|
60
|
-
|
|
63
|
+
const [r, n] = d(""), l = g(null), m = (c) => {
|
|
64
|
+
n(c.target.value), p()("handleChange");
|
|
61
65
|
}, s = () => {
|
|
62
|
-
|
|
66
|
+
n(""), p()("handleClear");
|
|
63
67
|
};
|
|
64
68
|
return /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
|
|
65
69
|
o,
|
|
@@ -68,31 +72,31 @@ const C = `
|
|
|
68
72
|
value: r,
|
|
69
73
|
onChange: m,
|
|
70
74
|
onClear: s,
|
|
71
|
-
ref:
|
|
75
|
+
ref: l
|
|
72
76
|
}
|
|
73
77
|
) });
|
|
74
|
-
},
|
|
78
|
+
}, i = {
|
|
75
79
|
type: "text",
|
|
76
80
|
variant: void 0,
|
|
77
81
|
id: "4f9ca77d"
|
|
78
82
|
}, v = a.bind({});
|
|
79
83
|
v.args = {
|
|
80
|
-
...
|
|
84
|
+
...i
|
|
81
85
|
};
|
|
82
86
|
const b = a.bind({});
|
|
83
87
|
b.args = {
|
|
84
|
-
...
|
|
88
|
+
...i,
|
|
85
89
|
clearTrigger: "Clear"
|
|
86
90
|
};
|
|
87
91
|
const y = a.bind({});
|
|
88
92
|
y.args = {
|
|
89
|
-
...
|
|
93
|
+
...i,
|
|
90
94
|
clearTrigger: /* @__PURE__ */ e(f, { name: "Cross" })
|
|
91
95
|
};
|
|
92
96
|
export {
|
|
93
97
|
v as InputFieldExample,
|
|
94
98
|
y as WithIconClearTrigger,
|
|
95
99
|
b as WithStringClearTrigger,
|
|
96
|
-
|
|
100
|
+
X as default
|
|
97
101
|
};
|
|
98
102
|
//# sourceMappingURL=InputField.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC;AACvD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS;AACxD,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EACF;AACF,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,EAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,EAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,EAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { fn as d } from "../../index-C9QoqAAt.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as e } from "../../TablePlugin-
|
|
4
|
+
import { M as e } from "../../TablePlugin-BLzR0g93.js";
|
|
5
5
|
import { Container as M } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const C = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
@@ -14,15 +14,19 @@ import "../../IconButton/IconButton.js";
|
|
|
14
14
|
import "../../Input/Input.js";
|
|
15
15
|
import "../../InputField/InputField.js";
|
|
16
16
|
import "react-router-dom";
|
|
17
|
-
import { a as
|
|
17
|
+
import { a as A } from "../../../TablePlugin-BLzR0g93.js";
|
|
18
|
+
import "lexical";
|
|
19
|
+
import "@lexical/list";
|
|
20
|
+
import "@lexical/link";
|
|
18
21
|
import "../../RteEditor/Providers/LanguageProvider.js";
|
|
19
22
|
import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
20
23
|
import "../../RteEditor/hooks/components/Flyout.js";
|
|
24
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
21
25
|
import "../../SelectListbox/SelectListbox.js";
|
|
22
26
|
import "../../SelectListbox/SelectProvider.js";
|
|
23
27
|
import "../../Sortable/components/SortableItem.js";
|
|
24
28
|
import "../../../SortableProvider-BUsvniX7.js";
|
|
25
29
|
export {
|
|
26
|
-
|
|
30
|
+
A as MultiSelectHeader
|
|
27
31
|
};
|
|
28
32
|
//# sourceMappingURL=MultiSelectHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -16,27 +16,31 @@ import "../Input/Input.js";
|
|
|
16
16
|
import "../InputField/InputField.js";
|
|
17
17
|
import { Label as D } from "../Label/Label.js";
|
|
18
18
|
import "react-router-dom";
|
|
19
|
-
import "../../TablePlugin-
|
|
19
|
+
import "../../TablePlugin-BLzR0g93.js";
|
|
20
|
+
import "lexical";
|
|
21
|
+
import "@lexical/list";
|
|
22
|
+
import "@lexical/link";
|
|
20
23
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
24
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
25
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
26
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
23
27
|
import "../SelectListbox/SelectListbox.js";
|
|
24
28
|
import "../SelectListbox/SelectProvider.js";
|
|
25
29
|
import "../Sortable/components/SortableItem.js";
|
|
26
30
|
import "../../SortableProvider-BUsvniX7.js";
|
|
27
|
-
import '../../assets/PeriodSelector.css';const
|
|
31
|
+
import '../../assets/PeriodSelector.css';const p = {
|
|
28
32
|
"period-selector__container": "_period-selector__container_10t7p_1",
|
|
29
33
|
"period-selector__container--label-left": "_period-selector__container--label-left_10t7p_6",
|
|
30
34
|
"period-selector__container--label-top": "_period-selector__container--label-top_10t7p_12",
|
|
31
35
|
"period-selector__selector-container": "_period-selector__selector-container_10t7p_19",
|
|
32
36
|
"period-selector__selector-row": "_period-selector__selector-row_10t7p_25"
|
|
33
|
-
}, S = 0, f = 1, E = 2,
|
|
37
|
+
}, S = 0, f = 1, E = 2, l = 3, I = 7, T = (n) => {
|
|
34
38
|
const c = [];
|
|
35
|
-
for (let t = 0; t <
|
|
36
|
-
c.push(
|
|
39
|
+
for (let t = 0; t < n.length; t += l)
|
|
40
|
+
c.push(n.slice(t, t + l));
|
|
37
41
|
return c;
|
|
38
|
-
},
|
|
39
|
-
maxPeriods:
|
|
42
|
+
}, _r = ({
|
|
43
|
+
maxPeriods: n = I,
|
|
40
44
|
defaultValues: c,
|
|
41
45
|
label: t,
|
|
42
46
|
labelPosition: b = "top",
|
|
@@ -44,33 +48,33 @@ import '../../assets/PeriodSelector.css';const l = {
|
|
|
44
48
|
notValidatedText: m = "",
|
|
45
49
|
onChange: g
|
|
46
50
|
}) => {
|
|
47
|
-
const R = Array.from({ length:
|
|
48
|
-
label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) %
|
|
51
|
+
const R = Array.from({ length: n }, (r, e) => e + 1), a = T(R), x = a.map((r, e) => r.map((o) => ({
|
|
52
|
+
label: `${e + 1}${r.length === 1 ? "" : `.${(o - 1) % l + 1}`}`,
|
|
49
53
|
value: o.toString()
|
|
50
|
-
}))),
|
|
54
|
+
}))), i = M(
|
|
51
55
|
a.map(
|
|
52
56
|
(r) => r.reduce((e, o) => (c != null && c.includes(o) && e.push(o), e), [])
|
|
53
57
|
)
|
|
54
58
|
), [P, u] = $([]), d = (r) => r[S].length !== 0 || r[f].length !== 0 ? [E] : r[E].length !== 0 ? [S, f] : [], k = (r, e) => {
|
|
55
|
-
|
|
59
|
+
i.current[e] = r.map((o) => Number(o)), u(d(i.current)), g([...i.current.flat()].sort());
|
|
56
60
|
};
|
|
57
61
|
return N(() => {
|
|
58
|
-
u(d(
|
|
62
|
+
u(d(i.current));
|
|
59
63
|
}, []), /* @__PURE__ */ h(
|
|
60
64
|
"div",
|
|
61
65
|
{
|
|
62
66
|
className: v(
|
|
63
|
-
|
|
64
|
-
|
|
67
|
+
p["period-selector__container"],
|
|
68
|
+
p[`period-selector__container--label-${b}`]
|
|
65
69
|
),
|
|
66
70
|
children: [
|
|
67
71
|
t && /* @__PURE__ */ s(D, { htmlFor: "", required: _, children: t }),
|
|
68
|
-
/* @__PURE__ */ h("div", { className:
|
|
69
|
-
/* @__PURE__ */ s("div", { className:
|
|
72
|
+
/* @__PURE__ */ h("div", { className: p["period-selector__selector-container"], children: [
|
|
73
|
+
/* @__PURE__ */ s("div", { className: p["period-selector__selector-row"], children: x.map((r, e) => /* @__PURE__ */ s(
|
|
70
74
|
w,
|
|
71
75
|
{
|
|
72
76
|
checkboxes: r,
|
|
73
|
-
defaultValues:
|
|
77
|
+
defaultValues: i.current[e].map((o) => o.toString()),
|
|
74
78
|
disableGroup: P.includes(e),
|
|
75
79
|
required: _,
|
|
76
80
|
onSetValues: (o) => k(o, e)
|
|
@@ -84,6 +88,6 @@ import '../../assets/PeriodSelector.css';const l = {
|
|
|
84
88
|
);
|
|
85
89
|
};
|
|
86
90
|
export {
|
|
87
|
-
|
|
91
|
+
_r as PeriodSelector
|
|
88
92
|
};
|
|
89
93
|
//# sourceMappingURL=PeriodSelector.js.map
|
|
@@ -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":"
|
|
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,CAAA;AAC3B,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,KAAc,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,EACvB,EAAA,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,EAAc;AAAA,IACnB;AAAA,EAAA,GAEI,CAACK,GAAkBC,CAAmB,IAAIC,EAAmB,CAAE,CAAA,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,IAGH+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,MAAM,EAAE,MAAM;AAAA,EAAA;AAGlD,SAAAU,EAAU,MAAM;AACM,IAAAP,EAAAE,EAAcL,EAAa,OAAO,CAAC;AAAA,EACzD,GAAG,CAAE,CAAA,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,YAL/C,SAASA,CAAQ;AAAA,UAOzB,CAAA,GACH;AAAA,UACCR,MAAqB,MAAM,gBAAAwB,EAACK,KAAY,OAAM,SAAQ,UAAU7B,GAAkB;AAAA,QAAA,GACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { fn as a } from "../../index-C9QoqAAt.js";
|
|
3
3
|
import { ProgrammeCard as o } from "./ProgrammeCard.js";
|
|
4
4
|
import { Container as n } from "../../storyComponents/Container/Container.js";
|
|
@@ -16,51 +16,55 @@ import "../IconButton/IconButton.js";
|
|
|
16
16
|
import "../Input/Input.js";
|
|
17
17
|
import "../InputField/InputField.js";
|
|
18
18
|
import "react-router-dom";
|
|
19
|
-
import "../../TablePlugin-
|
|
20
|
-
import { Repeater as
|
|
19
|
+
import "../../TablePlugin-BLzR0g93.js";
|
|
20
|
+
import { Repeater as e } from "../Repeater/Repeater.js";
|
|
21
|
+
import "lexical";
|
|
22
|
+
import "@lexical/list";
|
|
23
|
+
import "@lexical/link";
|
|
21
24
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
25
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
26
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
27
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
24
28
|
import "../SelectListbox/SelectListbox.js";
|
|
25
29
|
import "../SelectListbox/SelectProvider.js";
|
|
26
30
|
import "../Sortable/components/SortableItem.js";
|
|
27
31
|
import "../../SortableProvider-BUsvniX7.js";
|
|
28
|
-
const
|
|
32
|
+
const s = "<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />", N = {
|
|
29
33
|
title: "Atoms/ProgrammeCard",
|
|
30
34
|
component: o,
|
|
31
35
|
parameters: {
|
|
32
36
|
inspectComponent: o,
|
|
33
|
-
codeString:
|
|
37
|
+
codeString: s
|
|
34
38
|
}
|
|
35
|
-
},
|
|
36
|
-
|
|
39
|
+
}, p = (t) => /* @__PURE__ */ r(n, { size: "large", children: /* @__PURE__ */ r(o, { ...t }) }), l = p.bind({});
|
|
40
|
+
l.args = {
|
|
37
41
|
header: "This is my header",
|
|
38
42
|
details: "This is my details",
|
|
39
43
|
onClick: a()
|
|
40
44
|
};
|
|
41
|
-
const d =
|
|
45
|
+
const d = p.bind({});
|
|
42
46
|
d.args = {
|
|
43
|
-
header: /* @__PURE__ */ e
|
|
47
|
+
header: /* @__PURE__ */ i(e, { flexDirection: "row", gap: "150", children: [
|
|
44
48
|
/* @__PURE__ */ r(m, { name: "Envelope", size: 32 }),
|
|
45
49
|
/* @__PURE__ */ r("h2", { style: { margin: 0 }, children: "This is my header" })
|
|
46
50
|
] }),
|
|
47
|
-
details: /* @__PURE__ */ e
|
|
48
|
-
/* @__PURE__ */ e
|
|
51
|
+
details: /* @__PURE__ */ i(e, { flexDirection: "row", gap: "150", children: [
|
|
52
|
+
/* @__PURE__ */ i(e, { flexDirection: "row", children: [
|
|
49
53
|
/* @__PURE__ */ r(m, { name: "FaceFrown" }),
|
|
50
54
|
"Details 1"
|
|
51
55
|
] }),
|
|
52
|
-
/* @__PURE__ */ e
|
|
56
|
+
/* @__PURE__ */ i(e, { flexDirection: "row", children: [
|
|
53
57
|
/* @__PURE__ */ r(m, { name: "Heart" }),
|
|
54
58
|
"Details 2"
|
|
55
59
|
] }),
|
|
56
|
-
/* @__PURE__ */ e
|
|
60
|
+
/* @__PURE__ */ i(e, { flexDirection: "row", children: [
|
|
57
61
|
/* @__PURE__ */ r(m, { name: "Sparkles" }),
|
|
58
62
|
"Details 3"
|
|
59
63
|
] })
|
|
60
64
|
] }),
|
|
61
65
|
onClick: a()
|
|
62
66
|
};
|
|
63
|
-
const c = (t) => /* @__PURE__ */ r(n, { size: "large", children: /* @__PURE__ */ e
|
|
67
|
+
const c = (t) => /* @__PURE__ */ r(n, { size: "large", children: /* @__PURE__ */ i(e, { children: [
|
|
64
68
|
/* @__PURE__ */ r(o, { ...t }),
|
|
65
69
|
/* @__PURE__ */ r(o, { ...t }),
|
|
66
70
|
/* @__PURE__ */ r(o, { ...t })
|
|
@@ -72,8 +76,8 @@ h.args = {
|
|
|
72
76
|
};
|
|
73
77
|
export {
|
|
74
78
|
h as MultiProgrammeCards,
|
|
75
|
-
|
|
79
|
+
l as ProgrammeCardExample,
|
|
76
80
|
d as WithComplexContent,
|
|
77
|
-
|
|
81
|
+
N as default
|
|
78
82
|
};
|
|
79
83
|
//# sourceMappingURL=ProgrammeCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\nconst codeString = '<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n parameters: {\n inspectComponent: ProgrammeCard,\n codeString: codeString,\n },\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\nconst codeString = '<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n parameters: {\n inspectComponent: ProgrammeCard,\n codeString: codeString,\n },\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,IAAa,2FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
|
|
@@ -13,10 +13,14 @@ import "../../IconButton/IconButton.js";
|
|
|
13
13
|
import "../../Input/Input.js";
|
|
14
14
|
import "../../InputField/InputField.js";
|
|
15
15
|
import "react-router-dom";
|
|
16
|
-
import "../../../TablePlugin-
|
|
16
|
+
import "../../../TablePlugin-BLzR0g93.js";
|
|
17
|
+
import "lexical";
|
|
18
|
+
import "@lexical/list";
|
|
19
|
+
import "@lexical/link";
|
|
17
20
|
import "../Providers/LanguageProvider.js";
|
|
18
21
|
import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
19
22
|
import "../hooks/components/Flyout.js";
|
|
23
|
+
import "@staartwind.nl/lexical-paste-from-word";
|
|
20
24
|
import "../../SelectListbox/SelectListbox.js";
|
|
21
25
|
import "../../SelectListbox/SelectProvider.js";
|
|
22
26
|
import "../../Sortable/components/SortableItem.js";
|
|
@@ -24,7 +28,7 @@ import "../../../SortableProvider-BUsvniX7.js";
|
|
|
24
28
|
import '../../../assets/EditorHeader.css';const t = {
|
|
25
29
|
"editor-header__container": "_editor-header__container_nsi6h_1",
|
|
26
30
|
"editor-header__info": "_editor-header__info_nsi6h_10"
|
|
27
|
-
},
|
|
31
|
+
}, C = ({ label: i, info: o = "", required: e = !1 }) => {
|
|
28
32
|
const m = `info_${d()}`;
|
|
29
33
|
return /* @__PURE__ */ p("div", { className: t["editor-header__container"], children: [
|
|
30
34
|
i !== "" && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { htmlFor: m, required: e, children: i }) }),
|
|
@@ -32,6 +36,6 @@ import '../../../assets/EditorHeader.css';const t = {
|
|
|
32
36
|
] });
|
|
33
37
|
};
|
|
34
38
|
export {
|
|
35
|
-
|
|
39
|
+
C as EditorHeader
|
|
36
40
|
};
|
|
37
41
|
//# sourceMappingURL=EditorHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/RteEditor/EditorHeader/EditorHeader.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport styles from './EditorHeader.module.css';\n\nimport { Label } from 'components';\n\ninterface EditorHeaderProps {\n label: string;\n info?: string;\n required?: boolean;\n}\n\nexport const EditorHeader = ({ label, info = '', required = false }: EditorHeaderProps) => {\n const infoId = `info_${useId()}`;\n\n return (\n <div className={styles['editor-header__container']}>\n {label !== '' && (\n <div>\n <Label htmlFor={infoId} required={required}>\n {label}\n </Label>\n </div>\n )}\n {info !== '' && <div className={styles['editor-header__info']}>{info}</div>}\n </div>\n );\n};\n"],"names":["EditorHeader","label","info","required","infoId","useId","jsxs","styles","jsx","Label"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditorHeader.js","sources":["../../../../src/components/RteEditor/EditorHeader/EditorHeader.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport styles from './EditorHeader.module.css';\n\nimport { Label } from 'components';\n\ninterface EditorHeaderProps {\n label: string;\n info?: string;\n required?: boolean;\n}\n\nexport const EditorHeader = ({ label, info = '', required = false }: EditorHeaderProps) => {\n const infoId = `info_${useId()}`;\n\n return (\n <div className={styles['editor-header__container']}>\n {label !== '' && (\n <div>\n <Label htmlFor={infoId} required={required}>\n {label}\n </Label>\n </div>\n )}\n {info !== '' && <div className={styles['editor-header__info']}>{info}</div>}\n </div>\n );\n};\n"],"names":["EditorHeader","label","info","required","infoId","useId","jsxs","styles","jsx","Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAYaA,IAAe,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,IAAI,UAAAC,IAAW,SAA+B;AACnF,QAAAC,IAAS,QAAQC,EAAA,CAAO;AAE9B,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,0BAA0B,GAC9C,UAAA;AAAA,IAAUN,MAAA,wBACR,OACC,EAAA,UAAA,gBAAAO,EAACC,KAAM,SAASL,GAAQ,UAAAD,GACrB,UAAAF,EAAA,CACH,EACF,CAAA;AAAA,IAEDC,MAAS,MAAO,gBAAAM,EAAA,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAAI,UAAKL,GAAA;AAAA,EACvE,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { u } from "../../../../LexicalComposerContext.prod-Dyvim1tK.js";
|
|
3
3
|
import { c as f } from "../../../../clsx-OuTLNxxd.js";
|
|
4
|
-
import {
|
|
5
|
-
import { useState as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import { s as
|
|
8
|
-
import { useTranslation as
|
|
4
|
+
import { $getSelection as _, $isRangeSelection as p, FORMAT_TEXT_COMMAND as h } from "lexical";
|
|
5
|
+
import { useState as s, useEffect as T } from "react";
|
|
6
|
+
import { Icon as k } from "../../../Icon/Icon.js";
|
|
7
|
+
import { s as i } from "../../../../RteEditor.module-DcvGRx3a.js";
|
|
8
|
+
import { useTranslation as I } from "../../hooks/useTranslation.js";
|
|
9
9
|
const B = {
|
|
10
10
|
bold: "Bold",
|
|
11
11
|
italic: "Italic"
|
|
12
12
|
}, C = ["bold", "italic"], E = () => {
|
|
13
|
-
const t =
|
|
14
|
-
|
|
13
|
+
const t = I(), [a] = u(), [e, c] = s(!1), [n, m] = s(!1), d = (o) => {
|
|
14
|
+
a.dispatchCommand(h, o);
|
|
15
15
|
};
|
|
16
|
-
return
|
|
17
|
-
const o =
|
|
16
|
+
return T(() => {
|
|
17
|
+
const o = a.registerUpdateListener(({ editorState: b }) => {
|
|
18
18
|
b.read(() => {
|
|
19
19
|
const r = _();
|
|
20
20
|
p(r) && (c(r.hasFormat("bold")), m(r.hasFormat("italic")));
|
|
@@ -23,21 +23,21 @@ const B = {
|
|
|
23
23
|
return () => {
|
|
24
24
|
o();
|
|
25
25
|
};
|
|
26
|
-
}, [
|
|
26
|
+
}, [a]), /* @__PURE__ */ l("div", { className: i["editor__toolbar-button-group"], children: C.map((o) => /* @__PURE__ */ l(
|
|
27
27
|
"button",
|
|
28
28
|
{
|
|
29
29
|
onClick: () => d(o),
|
|
30
30
|
title: o === "bold" ? t.format.boldTooltip : t.format.italicTooltip,
|
|
31
31
|
className: f(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
o === "bold" && e &&
|
|
35
|
-
o === "italic" && n &&
|
|
32
|
+
i["editor__toolbar-button"],
|
|
33
|
+
i[`editor__toolbar-button--${o}`],
|
|
34
|
+
o === "bold" && e && i["editor__toolbar-button--active"],
|
|
35
|
+
o === "italic" && n && i["editor__toolbar-button--active"]
|
|
36
36
|
),
|
|
37
37
|
"aria-label": `${o === "bold" ? t.aria.labels.bold : t.aria.labels.italic}`,
|
|
38
38
|
"aria-keyshortcuts": `${o === "bold" ? t.aria.keyshortcuts.bold : t.aria.keyshortcuts.italic}`,
|
|
39
39
|
type: "button",
|
|
40
|
-
children: /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ l(k, { name: B[o], size: 24 })
|
|
41
41
|
},
|
|
42
42
|
o
|
|
43
43
|
)) });
|