@uva-glass/component-library 2.0.1 → 2.1.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/SelectListbox.module-ByNtXEyE.js +24 -0
- package/dist/SelectListbox.module-ByNtXEyE.js.map +1 -0
- package/dist/{TablePlugin-DDlrU-7e.js → TablePlugin-E6UFlCgy.js} +6 -5
- package/dist/{TablePlugin-DDlrU-7e.js.map → TablePlugin-E6UFlCgy.js.map} +1 -1
- package/dist/assets/FormInput.css +1 -1
- package/dist/assets/InputField.css +1 -1
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/Buttons/LinkButton.d.ts +2 -2
- package/dist/components/Buttons/LinkButton.js +1 -1
- package/dist/components/Buttons/LinkButton.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +5 -5
- package/dist/components/CheckboxTree/CheckboxTree.js +7 -6
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/FormInput/FormInput.d.ts +4 -1
- package/dist/components/FormInput/FormInput.js +36 -34
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/FormInput/FormInput.stories.d.ts +1 -0
- package/dist/components/FormInput/FormInput.stories.js +28 -13
- package/dist/components/FormInput/FormInput.stories.js.map +1 -1
- package/dist/components/InputField/InputField.d.ts +2 -0
- package/dist/components/InputField/InputField.js +34 -22
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +4 -3
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.js +5 -5
- package/dist/components/MenuLink/MenuLink.stories.js +2 -2
- package/dist/components/MenuLink/MenuLink.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 +3 -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 +4 -3
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +4 -3
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +4 -3
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +4 -3
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +3 -2
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +4 -3
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +3 -2
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +3 -2
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +1 -1
- package/dist/components/RteEditor/Plugins/index.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +4 -3
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +1 -1
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.d.ts +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.js +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/dist/SelectListbox.module-CdK9mQmJ.js +0 -23
- package/dist/SelectListbox.module-CdK9mQmJ.js.map +0 -1
- package/dist/chunk-D52XG6IA-CQ2nAQyC.js +0 -1701
- package/dist/chunk-D52XG6IA-CQ2nAQyC.js.map +0 -1
|
@@ -1,28 +1,43 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { fn as
|
|
3
|
-
import { FormInput as
|
|
4
|
-
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { fn as i } from "../../index-DWzkl4aY.js";
|
|
3
|
+
import { FormInput as a } from "./FormInput.js";
|
|
4
|
+
import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
|
|
5
|
+
const m = `
|
|
5
6
|
// Has all HTMLInputElement props available except "className" and "style"
|
|
6
7
|
<FormInput />
|
|
7
|
-
`,
|
|
8
|
+
`, f = {
|
|
8
9
|
title: "Organisms/FormInput",
|
|
9
|
-
component:
|
|
10
|
+
component: a,
|
|
10
11
|
argTypes: {},
|
|
11
12
|
args: {},
|
|
12
13
|
parameters: {
|
|
13
|
-
inspectComponent:
|
|
14
|
-
codeString:
|
|
14
|
+
inspectComponent: a,
|
|
15
|
+
codeString: m
|
|
15
16
|
}
|
|
16
|
-
}, r = (e) => /* @__PURE__ */
|
|
17
|
-
|
|
17
|
+
}, r = (e) => /* @__PURE__ */ t(a, { ...e }), p = r.bind({});
|
|
18
|
+
p.args = {
|
|
18
19
|
id: "vak",
|
|
19
20
|
label: "Vaknaam (NL)",
|
|
20
21
|
labelPosition: "left",
|
|
21
22
|
required: !0,
|
|
22
|
-
onChange:
|
|
23
|
+
onChange: i()
|
|
24
|
+
};
|
|
25
|
+
const u = r.bind({}), l = [
|
|
26
|
+
{ label: "English", value: "EN" },
|
|
27
|
+
{ label: "Dutch", value: "NL" },
|
|
28
|
+
{ label: "German", value: "DE" },
|
|
29
|
+
{ label: "Danish", value: "DK" }
|
|
30
|
+
];
|
|
31
|
+
u.args = {
|
|
32
|
+
id: "language",
|
|
33
|
+
label: "Language",
|
|
34
|
+
labelPosition: "left",
|
|
35
|
+
required: !0,
|
|
36
|
+
customInput: /* @__PURE__ */ t(o, { options: l, defaultValue: "NL", size: "medium", children: l.map(({ label: e, value: n }, s) => /* @__PURE__ */ t(o.SelectOption, { option: { label: e, value: n }, index: s, children: e }, n)) })
|
|
23
37
|
};
|
|
24
38
|
export {
|
|
25
|
-
|
|
26
|
-
|
|
39
|
+
p as FromInputExample,
|
|
40
|
+
u as WithCustomInputExample,
|
|
41
|
+
f as default
|
|
27
42
|
};
|
|
28
43
|
//# sourceMappingURL=FormInput.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/FormInput',\n component: FormInput,\n argTypes: {},\n args: {},\n parameters: {\n inspectComponent: FormInput,\n codeString: codeString,\n },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n id: 'vak',\n label: 'Vaknaam (NL)',\n labelPosition: 'left',\n required: true,\n onChange: fn(),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { FormInputProps } from './FormInput';\n\nimport { FormInput } from './FormInput';\n\nimport { SelectListbox } from 'components/SelectListbox';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<FormInput />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/FormInput',\n component: FormInput,\n argTypes: {},\n args: {},\n parameters: {\n inspectComponent: FormInput,\n codeString: codeString,\n },\n} as Meta<FormInputProps>;\n\nconst Template: StoryFn<FormInputProps> = (args) => {\n return <FormInput {...args} />;\n};\n\nexport const FromInputExample = Template.bind({});\n\nFromInputExample.args = {\n id: 'vak',\n label: 'Vaknaam (NL)',\n labelPosition: 'left',\n required: true,\n onChange: fn(),\n};\n\nexport const WithCustomInputExample = Template.bind({});\n\nconst mockOptions = [\n { label: 'English', value: 'EN' },\n { label: 'Dutch', value: 'NL' },\n { label: 'German', value: 'DE' },\n { label: 'Danish', value: 'DK' },\n];\n\nWithCustomInputExample.args = {\n id: 'language',\n label: 'Language',\n labelPosition: 'left',\n required: true,\n customInput: (\n <SelectListbox options={mockOptions} defaultValue=\"NL\" size=\"medium\">\n {mockOptions.map(({ label, value }, index) => (\n <SelectListbox.SelectOption option={{ label, value }} index={index} key={value}>\n {label}\n </SelectListbox.SelectOption>\n ))}\n </SelectListbox>\n ),\n};\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn","WithCustomInputExample","mockOptions","SelectListbox","label","value","index"],"mappings":";;;;AASA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,CAAE,CAAA;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;AAEO,MAAMC,IAAyBL,EAAS,KAAK,CAAE,CAAA,GAEhDM,IAAc;AAAA,EAClB,EAAE,OAAO,WAAW,OAAO,KAAK;AAAA,EAChC,EAAE,OAAO,SAAS,OAAO,KAAK;AAAA,EAC9B,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,EAC/B,EAAE,OAAO,UAAU,OAAO,KAAK;AACjC;AAEAD,EAAuB,OAAO;AAAA,EAC5B,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aACE,gBAAAH,EAACK,GAAc,EAAA,SAASD,GAAa,cAAa,MAAK,MAAK,UACzD,UAAAA,EAAY,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAC,EAAA,GAASC,MACjC,gBAAAR,EAAAK,EAAc,cAAd,EAA2B,QAAQ,EAAE,OAAAC,GAAO,OAAAC,EAAS,GAAA,OAAAC,GACnD,UADsEF,EAAA,GAAAC,CAEzE,CACD,EACH,CAAA;AAEJ;"}
|
|
@@ -2,6 +2,8 @@ import { InputHTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
|
|
3
3
|
/** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */
|
|
4
4
|
variant?: 'large';
|
|
5
|
+
/** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */
|
|
6
|
+
width?: 'compact';
|
|
5
7
|
/** The type of the input element. */
|
|
6
8
|
type?: 'text' | 'password' | 'email';
|
|
7
9
|
/** The id of the input element. */
|
|
@@ -1,34 +1,46 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { c as
|
|
1
|
+
import { jsxs as h, jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as k, useState as b, useRef as g, useEffect as x } from "react";
|
|
3
|
+
import { c as y } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import '../../assets/InputField.css';const i = {
|
|
5
|
-
"input-field-wrapper": "_input-field-
|
|
6
|
-
"input-field": "_input-
|
|
7
|
-
"input-field--large": "_input-field--
|
|
8
|
-
"input-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
"input-field-wrapper": "_input-field-wrapper_1h8mk_1",
|
|
6
|
+
"input-field": "_input-field_1h8mk_1",
|
|
7
|
+
"input-field--large": "_input-field--large_1h8mk_22",
|
|
8
|
+
"input-field--compact": "_input-field--compact_1h8mk_26",
|
|
9
|
+
"input-field__clear-button": "_input-field__clear-button_1h8mk_34"
|
|
10
|
+
}, W = k(
|
|
11
|
+
({
|
|
12
|
+
autoComplete: u = "off",
|
|
13
|
+
id: r,
|
|
14
|
+
value: e,
|
|
15
|
+
variant: f,
|
|
16
|
+
width: o,
|
|
17
|
+
type: s = "text",
|
|
18
|
+
clearTrigger: n,
|
|
19
|
+
onClear: c,
|
|
20
|
+
...a
|
|
21
|
+
}, t) => {
|
|
22
|
+
const [_, d] = b(0), l = g(null);
|
|
12
23
|
x(() => {
|
|
13
|
-
l.current &&
|
|
24
|
+
l.current && d(l.current.offsetWidth);
|
|
14
25
|
}, [e]);
|
|
15
|
-
const
|
|
16
|
-
|
|
26
|
+
const m = () => {
|
|
27
|
+
c && t && "current" in t && t.current && (c(), t.current.focus());
|
|
17
28
|
};
|
|
18
|
-
return /* @__PURE__ */
|
|
29
|
+
return /* @__PURE__ */ h("div", { className: i["input-field-wrapper"], children: [
|
|
19
30
|
/* @__PURE__ */ p(
|
|
20
31
|
"input",
|
|
21
32
|
{
|
|
22
|
-
...
|
|
23
|
-
autoComplete:
|
|
33
|
+
...a,
|
|
34
|
+
autoComplete: u,
|
|
24
35
|
ref: t,
|
|
25
36
|
id: r,
|
|
26
|
-
className:
|
|
27
|
-
[i["input-field--large"]]:
|
|
37
|
+
className: y(i["input-field"], {
|
|
38
|
+
[i["input-field--large"]]: f === "large",
|
|
39
|
+
[i["input-field--compact"]]: o === "compact"
|
|
28
40
|
}),
|
|
29
|
-
type:
|
|
41
|
+
type: s,
|
|
30
42
|
value: e,
|
|
31
|
-
style: { paddingRight: e && n ?
|
|
43
|
+
style: { paddingRight: e && n ? _ : void 0 }
|
|
32
44
|
}
|
|
33
45
|
),
|
|
34
46
|
e && n && /* @__PURE__ */ p(
|
|
@@ -36,7 +48,7 @@ import '../../assets/InputField.css';const i = {
|
|
|
36
48
|
{
|
|
37
49
|
type: "button",
|
|
38
50
|
className: i["input-field__clear-button"],
|
|
39
|
-
onClick:
|
|
51
|
+
onClick: m,
|
|
40
52
|
ref: l,
|
|
41
53
|
"aria-label": `clear trigger for ${r}`,
|
|
42
54
|
children: n
|
|
@@ -46,6 +58,6 @@ import '../../assets/InputField.css';const i = {
|
|
|
46
58
|
}
|
|
47
59
|
);
|
|
48
60
|
export {
|
|
49
|
-
|
|
61
|
+
W as InputField
|
|
50
62
|
};
|
|
51
63
|
//# sourceMappingURL=InputField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n variant?: 'large';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. Possible values: `undefined`, `large`. The default is `undefined`. */\n variant?: 'large';\n /** The width to render. Possible values: `undefined`, `compact`. The default is `undefined`. */\n width?: 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles['input-field--compact']]: width === 'compact',\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {value && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;GAuBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACX,CAAK,CAAC;AAEV,UAAMc,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAR;AAAA,UACA,KAAKS;AAAA,UACL,IAAAR;AAAA,UACA,WAAWmB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGf,MAAY;AAAA,YAC5C,CAACe,EAAO,sBAAsB,CAAC,GAAGd,MAAU;AAAA,UAAA,CAC7C;AAAA,UACD,MAAAC;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASI,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCR,KAASI,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBZ,CAAE;AAAA,UAElC,UAAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -14,7 +14,8 @@ import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
|
14
14
|
import "../GridRow/GridRow.js";
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
17
|
-
import "
|
|
17
|
+
import "react-router";
|
|
18
|
+
import "../../TablePlugin-E6UFlCgy.js";
|
|
18
19
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
19
20
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
20
21
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -30,7 +31,7 @@ const C = `
|
|
|
30
31
|
`, h = (t) => {
|
|
31
32
|
const r = t.variant ?? [];
|
|
32
33
|
return { ...t, variant: r.toString() };
|
|
33
|
-
},
|
|
34
|
+
}, P = {
|
|
34
35
|
title: "Atoms/InputField",
|
|
35
36
|
component: o,
|
|
36
37
|
argTypes: {
|
|
@@ -93,6 +94,6 @@ export {
|
|
|
93
94
|
v as InputFieldExample,
|
|
94
95
|
y as WithIconClearTrigger,
|
|
95
96
|
b as WithStringClearTrigger,
|
|
96
|
-
|
|
97
|
+
P as default
|
|
97
98
|
};
|
|
98
99
|
//# 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,CAAC;AACxD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS,EAAI;AAC5D,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,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,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,EACrB,GAEMC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EACpB;AAEA,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,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAE,CAAA;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAE,CAAA;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAE,CAAA;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { c as u } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import {
|
|
3
|
+
import { useLocation as k, NavLink as h } from "react-router";
|
|
4
4
|
import '../../assets/MenuLink.css';const i = {
|
|
5
5
|
"menu-link": "_menu-link_8gjhh_1",
|
|
6
6
|
"menu-link--active": "_menu-link--active_8gjhh_8"
|
|
7
7
|
}, f = (t) => {
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
return
|
|
8
|
+
const o = k(), e = (n) => n.replace(/s$/, ""), s = (n) => {
|
|
9
|
+
const l = o.pathname.split("/").filter(Boolean), a = n.split("/").filter(Boolean).slice(-1)[0], c = e(a);
|
|
10
|
+
return l.some((r) => e(r) === c);
|
|
11
11
|
};
|
|
12
12
|
return /* @__PURE__ */ m(
|
|
13
13
|
h,
|
|
14
14
|
{
|
|
15
15
|
...t,
|
|
16
16
|
className: ({ isActive: n }) => u(i["menu-link"], {
|
|
17
|
-
[i["menu-link--active"]]: n ||
|
|
17
|
+
[i["menu-link--active"]]: n || s(t.to)
|
|
18
18
|
})
|
|
19
19
|
}
|
|
20
20
|
);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { MemoryRouter as o } from "react-router";
|
|
3
3
|
import { MenuLink as t } from "./MenuLink.js";
|
|
4
4
|
import '../../assets/MenuLink2.css';const r = `
|
|
5
|
-
// Can only be used wrapped in a 'react-router
|
|
5
|
+
// Can only be used wrapped in a 'react-router' <MemoryRouter />
|
|
6
6
|
<MenuLink to={linkUrl}>{children}</MenuLink>
|
|
7
7
|
`, s = {
|
|
8
8
|
title: "Atoms/MenuLink",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router
|
|
1
|
+
{"version":3,"file":"MenuLink.stories.js","sources":["../../../src/components/MenuLink/MenuLink.stories.tsx"],"sourcesContent":["import { MemoryRouter, type NavLinkProps } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MenuLink } from './MenuLink';\n\nimport './MenuLink.stories.css';\n\nconst codeString = `\n// Can only be used wrapped in a 'react-router' <MemoryRouter />\n <MenuLink to={linkUrl}>{children}</MenuLink>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/MenuLink',\n component: MenuLink,\n parameters: {\n inspectComponent: MenuLink,\n codeString: codeString,\n },\n} as Meta<Omit<NavLinkProps, 'style'>>;\n\nconst menuLinks = [\n { to: '/menu-link-1', title: 'Menu Link One' },\n { to: '/menu-link-2', title: 'Menu Link Two' },\n { to: '/menu-link-3', title: 'Menu Link Three' },\n];\n\nconst Template: StoryFn<Omit<NavLinkProps, 'style'>> = () => {\n return (\n <MemoryRouter initialEntries={menuLinks.map((link) => link.to)} initialIndex={0}>\n <nav className=\"navbar\">\n {menuLinks.map((link) => (\n <MenuLink key={link.to} to={link.to}>\n {link.title}\n </MenuLink>\n ))}\n </nav>\n </MemoryRouter>\n );\n};\n\nexport const MenuLinkExample = Template.bind({});\n"],"names":["codeString","MenuLink_stories","MenuLink","menuLinks","Template","jsx","MemoryRouter","link","MenuLinkExample"],"mappings":";;;AAQA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,gBAAgB;AAAA,EAC7C,EAAE,IAAI,gBAAgB,OAAO,kBAAkB;AACjD,GAEMC,IAAiD,MAElD,gBAAAC,EAAAC,GAAA,EAAa,gBAAgBH,EAAU,IAAI,CAACI,MAASA,EAAK,EAAE,GAAG,cAAc,GAC5E,4BAAC,OAAI,EAAA,WAAU,UACZ,UAAAJ,EAAU,IAAI,CAACI,MACd,gBAAAF,EAACH,KAAuB,IAAIK,EAAK,IAC9B,UAAAA,EAAK,MADO,GAAAA,EAAK,EAEpB,CACD,EACH,CAAA,GACF,GAISC,IAAkBJ,EAAS,KAAK,CAAE,CAAA;"}
|
|
@@ -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-DWzkl4aY.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as e } from "../../TablePlugin-
|
|
4
|
+
import { M as e } from "../../TablePlugin-E6UFlCgy.js";
|
|
5
5
|
import { Container as M } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const C = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
@@ -13,7 +13,8 @@ import "../../GridRow/GridRow.js";
|
|
|
13
13
|
import "../../IconButton/IconButton.js";
|
|
14
14
|
import "../../Input/Input.js";
|
|
15
15
|
import "../../InputField/InputField.js";
|
|
16
|
-
import
|
|
16
|
+
import "react-router";
|
|
17
|
+
import { a as w } from "../../../TablePlugin-E6UFlCgy.js";
|
|
17
18
|
import "../../RteEditor/Providers/LanguageProvider.js";
|
|
18
19
|
import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
19
20
|
import "../../RteEditor/hooks/components/Flyout.js";
|
|
@@ -23,6 +24,6 @@ import "../../SelectListbox/SelectProvider.js";
|
|
|
23
24
|
import "../../Sortable/components/SortableItem.js";
|
|
24
25
|
import "../../../SortableProvider-BUsvniX7.js";
|
|
25
26
|
export {
|
|
26
|
-
|
|
27
|
+
w as MultiSelectHeader
|
|
27
28
|
};
|
|
28
29
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -15,7 +15,8 @@ import "../IconButton/IconButton.js";
|
|
|
15
15
|
import "../Input/Input.js";
|
|
16
16
|
import "../InputField/InputField.js";
|
|
17
17
|
import { Label as D } from "../Label/Label.js";
|
|
18
|
-
import "
|
|
18
|
+
import "react-router";
|
|
19
|
+
import "../../TablePlugin-E6UFlCgy.js";
|
|
19
20
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
21
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
22
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -35,7 +36,7 @@ import '../../assets/PeriodSelector.css';const l = {
|
|
|
35
36
|
for (let t = 0; t < i.length; t += p)
|
|
36
37
|
c.push(i.slice(t, t + p));
|
|
37
38
|
return c;
|
|
38
|
-
},
|
|
39
|
+
}, sr = ({
|
|
39
40
|
maxPeriods: i = I,
|
|
40
41
|
defaultValues: c,
|
|
41
42
|
label: t,
|
|
@@ -84,6 +85,6 @@ import '../../assets/PeriodSelector.css';const l = {
|
|
|
84
85
|
);
|
|
85
86
|
};
|
|
86
87
|
export {
|
|
87
|
-
|
|
88
|
+
sr as PeriodSelector
|
|
88
89
|
};
|
|
89
90
|
//# 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,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,YAL/C,SAASA,CAAQ;AAAA,UAOzB,CAAA,GACH;AAAA,UACCR,MAAqB,MAAM,gBAAAwB,EAACK,KAAY,OAAM,SAAQ,UAAU7B,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -15,7 +15,8 @@ import "../GridRow/GridRow.js";
|
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
17
17
|
import "../InputField/InputField.js";
|
|
18
|
-
import "
|
|
18
|
+
import "react-router";
|
|
19
|
+
import "../../TablePlugin-E6UFlCgy.js";
|
|
19
20
|
import { Repeater as i } from "../Repeater/Repeater.js";
|
|
20
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
@@ -25,7 +26,7 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
25
26
|
import "../SelectListbox/SelectProvider.js";
|
|
26
27
|
import "../Sortable/components/SortableItem.js";
|
|
27
28
|
import "../../SortableProvider-BUsvniX7.js";
|
|
28
|
-
const l = "<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />",
|
|
29
|
+
const l = "<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />", J = {
|
|
29
30
|
title: "Atoms/ProgrammeCard",
|
|
30
31
|
component: o,
|
|
31
32
|
parameters: {
|
|
@@ -74,6 +75,6 @@ export {
|
|
|
74
75
|
h as MultiProgrammeCards,
|
|
75
76
|
p as ProgrammeCardExample,
|
|
76
77
|
d as WithComplexContent,
|
|
77
|
-
|
|
78
|
+
J as default
|
|
78
79
|
};
|
|
79
80
|
//# 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,EAAA;AAEJ,GAEMG,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAA,CAAM,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,CAAE,CAAA;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,CAAE,CAAA;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,oBAAA,CAAA;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,EAE1B,CAAA;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,EAAM,CAAA;AAAA,EAAA,CAC3B,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,CAAE,CAAA;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
|
|
@@ -12,7 +12,8 @@ import "../../GridRow/GridRow.js";
|
|
|
12
12
|
import "../../IconButton/IconButton.js";
|
|
13
13
|
import "../../Input/Input.js";
|
|
14
14
|
import "../../InputField/InputField.js";
|
|
15
|
-
import "
|
|
15
|
+
import "react-router";
|
|
16
|
+
import "../../../TablePlugin-E6UFlCgy.js";
|
|
16
17
|
import "../Providers/LanguageProvider.js";
|
|
17
18
|
import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
18
19
|
import "../hooks/components/Flyout.js";
|
|
@@ -24,7 +25,7 @@ import "../../../SortableProvider-BUsvniX7.js";
|
|
|
24
25
|
import '../../../assets/EditorHeader.css';const t = {
|
|
25
26
|
"editor-header__container": "_editor-header__container_nsi6h_1",
|
|
26
27
|
"editor-header__info": "_editor-header__info_nsi6h_10"
|
|
27
|
-
},
|
|
28
|
+
}, z = ({ label: i, info: o = "", required: e = !1 }) => {
|
|
28
29
|
const m = `info_${d()}`;
|
|
29
30
|
return /* @__PURE__ */ p("div", { className: t["editor-header__container"], children: [
|
|
30
31
|
i !== "" && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(n, { htmlFor: m, required: e, children: i }) }),
|
|
@@ -32,6 +33,6 @@ import '../../../assets/EditorHeader.css';const t = {
|
|
|
32
33
|
] });
|
|
33
34
|
};
|
|
34
35
|
export {
|
|
35
|
-
|
|
36
|
+
z as EditorHeader
|
|
36
37
|
};
|
|
37
38
|
//# 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,EAAO,CAAA;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,EAAA,CAAA;AAAA,EAAA,GACvE;AAEJ;"}
|
|
@@ -15,7 +15,8 @@ import "../../../GridRow/GridRow.js";
|
|
|
15
15
|
import "../../../IconButton/IconButton.js";
|
|
16
16
|
import "../../../Input/Input.js";
|
|
17
17
|
import "../../../InputField/InputField.js";
|
|
18
|
-
import "
|
|
18
|
+
import "react-router";
|
|
19
|
+
import "../../../../TablePlugin-E6UFlCgy.js";
|
|
19
20
|
import { s as r } from "../../../../RteEditor.module-oFMKEW6f.js";
|
|
20
21
|
import { useTranslation as g } from "../../hooks/useTranslation.js";
|
|
21
22
|
import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
@@ -26,7 +27,7 @@ import "../../../SelectListbox/SelectListbox.js";
|
|
|
26
27
|
import "../../../SelectListbox/SelectProvider.js";
|
|
27
28
|
import "../../../Sortable/components/SortableItem.js";
|
|
28
29
|
import "../../../../SortableProvider-BUsvniX7.js";
|
|
29
|
-
const
|
|
30
|
+
const Y = () => {
|
|
30
31
|
const o = g(), [t] = h(), [d, p] = s(!1), [l, c] = s(!1), u = () => {
|
|
31
32
|
t.dispatchCommand(C, void 0);
|
|
32
33
|
}, b = () => {
|
|
@@ -70,6 +71,6 @@ const X = () => {
|
|
|
70
71
|
] });
|
|
71
72
|
};
|
|
72
73
|
export {
|
|
73
|
-
|
|
74
|
+
Y as HistoryPlugin
|
|
74
75
|
};
|
|
75
76
|
//# sourceMappingURL=HistoryPlugin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HistoryPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport const HistoryPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n const handleUndo = () => {\n editor.dispatchCommand(UNDO_COMMAND, undefined);\n };\n\n const handleRedo = () => {\n editor.dispatchCommand(REDO_COMMAND, undefined);\n };\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <button\n onClick={handleUndo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--undo`])}\n aria-label={t.aria.labels.undo}\n aria-keyshortcuts={t.aria.keyshortcuts.undo}\n disabled={!canUndo}\n title={t.format.undoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepBack\" size={24} />\n </button>\n <button\n onClick={handleRedo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--redo`])}\n aria-label={t.aria.labels.redo}\n aria-keyshortcuts={t.aria.keyshortcuts.redo}\n disabled={!canRedo}\n title={t.format.redoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepForwards\" size={24} />\n </button>\n </div>\n );\n};\n"],"names":["HistoryPlugin","t","useTranslation","editor","useLexicalComposerContext","canUndo","setCanUndo","useState","canRedo","setCanRedo","handleUndo","UNDO_COMMAND","handleRedo","REDO_COMMAND","useEffect","CAN_UNDO_COMMAND","payload","CAN_REDO_COMMAND","jsxs","styles","jsx","clsx","Icon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HistoryPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\nexport const HistoryPlugin = () => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n const handleUndo = () => {\n editor.dispatchCommand(UNDO_COMMAND, undefined);\n };\n\n const handleRedo = () => {\n editor.dispatchCommand(REDO_COMMAND, undefined);\n };\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <button\n onClick={handleUndo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--undo`])}\n aria-label={t.aria.labels.undo}\n aria-keyshortcuts={t.aria.keyshortcuts.undo}\n disabled={!canUndo}\n title={t.format.undoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepBack\" size={24} />\n </button>\n <button\n onClick={handleRedo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--redo`])}\n aria-label={t.aria.labels.redo}\n aria-keyshortcuts={t.aria.keyshortcuts.redo}\n disabled={!canRedo}\n title={t.format.redoTooltip}\n type=\"button\"\n >\n <Icon name=\"StepForwards\" size={24} />\n </button>\n </div>\n );\n};\n"],"names":["HistoryPlugin","t","useTranslation","editor","useLexicalComposerContext","canUndo","setCanUndo","useState","canRedo","setCanRedo","handleUndo","UNDO_COMMAND","handleRedo","REDO_COMMAND","useEffect","CAN_UNDO_COMMAND","payload","CAN_REDO_COMMAND","jsxs","styles","jsx","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,IAAgB,MAAM;AACjC,QAAMC,IAAIC,EAAe,GACnB,CAACC,CAAM,IAAIC,EAA0B,GACrC,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAa,MAAM;AAChB,IAAAP,EAAA,gBAAgBQ,GAAc,MAAS;AAAA,EAChD,GAEMC,IAAa,MAAM;AAChB,IAAAT,EAAA,gBAAgBU,GAAc,MAAS;AAAA,EAChD;AAEA,SAAAC,EAAU,MACDX,EAAO;AAAA,IACZY;AAAAA,IACA,CAACC,OACCV,EAAWU,CAAO,GACX;AAAA,IAET;AAAA,EACF,GACC,CAACb,CAAM,CAAC,GAEXW,EAAU,MACDX,EAAO;AAAA,IACZc;AAAAA,IACA,CAACD,OACCP,EAAWO,CAAO,GACX;AAAA,IAET;AAAA,EACF,GACC,CAACb,CAAM,CAAC,GAGR,gBAAAe,EAAA,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GACnD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,WAAWW,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAYlB,EAAE,KAAK,OAAO;AAAA,QAC1B,qBAAmBA,EAAE,KAAK,aAAa;AAAA,QACvC,UAAU,CAACI;AAAA,QACX,OAAOJ,EAAE,OAAO;AAAA,QAChB,MAAK;AAAA,QAEL,UAAC,gBAAAmB,EAAAE,GAAA,EAAK,MAAK,YAAW,MAAM,GAAI,CAAA;AAAA,MAAA;AAAA,IAClC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASR;AAAA,QACT,WAAWS,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAYlB,EAAE,KAAK,OAAO;AAAA,QAC1B,qBAAmBA,EAAE,KAAK,aAAa;AAAA,QACvC,UAAU,CAACO;AAAA,QACX,OAAOP,EAAE,OAAO;AAAA,QAChB,MAAK;AAAA,QAEL,UAAC,gBAAAmB,EAAAE,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAI,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACtC,GACF;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { A as
|
|
3
|
+
import { A as C } from "../../../../../TablePlugin-E6UFlCgy.js";
|
|
4
4
|
import "../../../../../helpers-BVGma1u6.js";
|
|
5
5
|
import "../../../../Icon/Icon.js";
|
|
6
6
|
import "../../../../Buttons/Button.js";
|
|
@@ -17,6 +17,7 @@ import "../../../../GridRow/GridRow.js";
|
|
|
17
17
|
import "../../../../IconButton/IconButton.js";
|
|
18
18
|
import "../../../../Input/Input.js";
|
|
19
19
|
import "../../../../InputField/InputField.js";
|
|
20
|
+
import "react-router";
|
|
20
21
|
import "../../../hooks/useTranslation.js";
|
|
21
22
|
import "../LinkContextMenu/LinkContextMenu.js";
|
|
22
23
|
import "../../../hooks/components/Flyout.js";
|
|
@@ -27,6 +28,6 @@ import "../../../../SelectListbox/SelectProvider.js";
|
|
|
27
28
|
import "../../../../Sortable/components/SortableItem.js";
|
|
28
29
|
import "../../../../../SortableProvider-BUsvniX7.js";
|
|
29
30
|
export {
|
|
30
|
-
|
|
31
|
+
C as AddLinkForm
|
|
31
32
|
};
|
|
32
33
|
//# sourceMappingURL=AddLinkFrom.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddLinkFrom.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AddLinkFrom.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|