@uva-glass/component-library 3.40.0 → 3.41.1
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/{TablePlugin-C38z2r5y.js → TablePlugin-DNGtPPjq.js} +6 -5
- package/dist/{TablePlugin-C38z2r5y.js.map → TablePlugin-DNGtPPjq.js.map} +1 -1
- package/dist/assets/EmptyStateDataDisplay.css +1 -1
- package/dist/components/Accordion/Accordion.d.ts +5 -1
- package/dist/components/Accordion/Accordion.js +77 -73
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +4 -3
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts +4 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js +28 -19
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +4 -3
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +19 -18
- 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 +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/RadioTabSelector/RadioTabSelector.js +4 -3
- package/dist/components/RadioTabSelector/RadioTabSelector.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/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/types/UserInterface.d.ts +1 -0
- package/package.json +18 -18
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n /** The main text to display. */\n label: string;\n /** The sub-text to display. */\n paragraph?: string;\n /** The colors of the wrapper and icon background are inverted. */\n invertColors?: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({
|
|
1
|
+
{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { UISizeVariant } from 'types/UserInterface';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n /** The main text to display. */\n label: string;\n /** The sub-text to display. */\n paragraph?: string;\n /** The colors of the wrapper and icon background are inverted. */\n invertColors?: boolean;\n /** The display variant. */\n variant?: UISizeVariant;\n}\n\nconst ICON_SIZE_REGULAR = 24;\nconst ICON_SIZE_SLIM = 16;\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({\n label,\n paragraph,\n invertColors,\n variant = 'regular',\n}: EmptyStateDataDisplayProps) {\n return (\n <div\n className={clsx(styles['empty-state-data-display_wrapper'], {\n [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n [styles['empty-state-data-display_wrapper--slim']]: variant === 'slim',\n })}\n >\n <div\n className={clsx(styles['empty-state-data-display_icon-frame'], {\n [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n [styles['empty-state-data-display_icon-frame--slim']]: variant === 'slim',\n })}\n >\n <Icon name=\"CubeTransparent\" size={variant === 'regular' ? ICON_SIZE_REGULAR : ICON_SIZE_SLIM} />\n </div>\n <div className={styles['empty-state-data-display_text-content']}>\n <label className={styles['empty-state-data-display_label']}>{label}</label>\n {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n </div>\n </div>\n );\n}\n"],"names":["ICON_SIZE_REGULAR","ICON_SIZE_SLIM","EmptyStateDataDisplay","label","paragraph","invertColors","variant","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;;GAmBMA,IAAoB,IACpBC,IAAiB;AAGhB,SAASC,EAAsB;AAAA,EACpC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GAA+B;AAC7B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGJ;AAAA,QAC7D,CAACI,EAAO,wCAAwC,CAAC,GAAGH,MAAY;AAAA,MAAA,CACjE;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGJ;AAAA,cAChE,CAACI,EAAO,2CAA2C,CAAC,GAAGH,MAAY;AAAA,YAAA,CACpE;AAAA,YAED,UAAA,gBAAAI,EAACC,KAAK,MAAK,mBAAkB,MAAML,MAAY,YAAYN,IAAoBC,EAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjG,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAA,EAAM,WAAWD,EAAO,gCAAgC,GAAI,UAAAN,GAAM;AAAA,UAClEC,KAAa,gBAAAM,EAAC,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAAL,EAAA,CAAU;AAAA,QAAA,EAAA,CACvF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs as a, jsx as t, Fragment as b } from "react/jsx-runtime";
|
|
2
2
|
import { c as v } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import "../Accordion/Accordion.js";
|
|
3
4
|
import "react";
|
|
4
5
|
import "../Buttons/Button.js";
|
|
5
6
|
import "../Buttons/LinkButton.js";
|
|
@@ -16,7 +17,7 @@ import "../IconButton/IconButton.js";
|
|
|
16
17
|
import "../Input/Input.js";
|
|
17
18
|
import "../InputField/InputField.js";
|
|
18
19
|
import "react-router";
|
|
19
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-DNGtPPjq.js";
|
|
20
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -32,7 +33,7 @@ import '../../assets/FormInput.css';const o = {
|
|
|
32
33
|
"form-input__input-feedback-container": "_form-input__input-feedback-container_c0vpz_25",
|
|
33
34
|
"form-input__input-container": "_form-input__input-container_c0vpz_35",
|
|
34
35
|
"form-input__input": "_form-input__input_c0vpz_25"
|
|
35
|
-
},
|
|
36
|
+
}, W = ({
|
|
36
37
|
id: i,
|
|
37
38
|
label: n,
|
|
38
39
|
labelPosition: f = "top",
|
|
@@ -64,6 +65,6 @@ import '../../assets/FormInput.css';const o = {
|
|
|
64
65
|
return u ? c : /* @__PURE__ */ t("div", { className: v(o["form-input__container"], o[`form-input__container--label-${f}`]), children: c });
|
|
65
66
|
};
|
|
66
67
|
export {
|
|
67
|
-
|
|
68
|
+
W as FormInput
|
|
68
69
|
};
|
|
69
70
|
//# 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 type { ReactNode } from 'react';\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 /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\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 const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\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 /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\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 const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,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;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
3
|
import { l } from "../../index-BYGu3RV5.js";
|
|
4
|
-
import { InputField as
|
|
4
|
+
import { InputField as e } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
|
+
import "../Accordion/Accordion.js";
|
|
6
7
|
import { Icon as h } from "../Icon/Icon.js";
|
|
7
8
|
import "../Buttons/Button.js";
|
|
8
9
|
import "../Buttons/LinkButton.js";
|
|
@@ -16,7 +17,7 @@ import "../GridRow/GridRow.js";
|
|
|
16
17
|
import "../IconButton/IconButton.js";
|
|
17
18
|
import "../Input/Input.js";
|
|
18
19
|
import "react-router";
|
|
19
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-DNGtPPjq.js";
|
|
20
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -32,9 +33,9 @@ const C = `
|
|
|
32
33
|
`, f = (t) => {
|
|
33
34
|
const r = t.variant ?? [];
|
|
34
35
|
return { ...t, variant: r.toString() };
|
|
35
|
-
},
|
|
36
|
+
}, U = {
|
|
36
37
|
title: "Atoms/InputField",
|
|
37
|
-
component:
|
|
38
|
+
component: e,
|
|
38
39
|
argTypes: {
|
|
39
40
|
variant: {
|
|
40
41
|
options: ["large"],
|
|
@@ -62,17 +63,17 @@ const C = `
|
|
|
62
63
|
}
|
|
63
64
|
},
|
|
64
65
|
parameters: {
|
|
65
|
-
inspectComponent:
|
|
66
|
+
inspectComponent: e,
|
|
66
67
|
codeString: C
|
|
67
68
|
}
|
|
68
|
-
},
|
|
69
|
+
}, i = (t) => {
|
|
69
70
|
const [r, n] = d(""), p = g(null), m = (c) => {
|
|
70
71
|
n(c.target.value), l()("handleChange");
|
|
71
72
|
}, s = () => {
|
|
72
73
|
n(""), l()("handleClear");
|
|
73
74
|
};
|
|
74
|
-
return /* @__PURE__ */
|
|
75
|
-
|
|
75
|
+
return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
|
|
76
|
+
e,
|
|
76
77
|
{
|
|
77
78
|
...f(t),
|
|
78
79
|
value: r,
|
|
@@ -81,28 +82,28 @@ const C = `
|
|
|
81
82
|
ref: p
|
|
82
83
|
}
|
|
83
84
|
) });
|
|
84
|
-
},
|
|
85
|
+
}, a = {
|
|
85
86
|
type: "text",
|
|
86
87
|
variant: void 0,
|
|
87
88
|
id: "4f9ca77d"
|
|
88
|
-
}, b =
|
|
89
|
+
}, b = i.bind({});
|
|
89
90
|
b.args = {
|
|
90
|
-
...
|
|
91
|
+
...a
|
|
91
92
|
};
|
|
92
|
-
const v =
|
|
93
|
+
const v = i.bind({});
|
|
93
94
|
v.args = {
|
|
94
|
-
...
|
|
95
|
+
...a,
|
|
95
96
|
clearTrigger: "Clear"
|
|
96
97
|
};
|
|
97
|
-
const y =
|
|
98
|
+
const y = i.bind({});
|
|
98
99
|
y.args = {
|
|
99
|
-
...
|
|
100
|
-
clearTrigger: /* @__PURE__ */
|
|
100
|
+
...a,
|
|
101
|
+
clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
|
|
101
102
|
};
|
|
102
103
|
export {
|
|
103
104
|
b as InputFieldExample,
|
|
104
105
|
y as WithIconClearTrigger,
|
|
105
106
|
v as WithStringClearTrigger,
|
|
106
|
-
|
|
107
|
+
U as default
|
|
107
108
|
};
|
|
108
109
|
//# 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 width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\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 width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\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;AAE/C,QAAMC,IAAgBD,EAAK,WAAmC,CAAA;AAC9D,SAAO,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAA,EAAW;AAC1D,GAGAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IAAA;AAAA,IAEzC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,IAEvC,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IAAA;AAAA,IAEnB,IAAI;AAAA,MACF,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,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;AAC7D,IAAAL,EAAcK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GAAA,EACC,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,CAAA,CAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAA,CAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAA,CAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAA,EAAK,MAAK,QAAA,CAAQ;AACnC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { l as d } from "../../index-BYGu3RV5.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as e } from "../../TablePlugin-
|
|
4
|
+
import { M as e } from "../../TablePlugin-DNGtPPjq.js";
|
|
5
5
|
import { Container as M } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const C = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../../MultiSelectItem-DbOdEllV.js";
|
|
3
3
|
import "../../Label/Label.js";
|
|
4
|
+
import "../../Accordion/Accordion.js";
|
|
4
5
|
import "react";
|
|
5
6
|
import "../../Buttons/Button.js";
|
|
6
7
|
import "../../Buttons/LinkButton.js";
|
|
@@ -15,7 +16,7 @@ import "../../IconButton/IconButton.js";
|
|
|
15
16
|
import "../../Input/Input.js";
|
|
16
17
|
import "../../InputField/InputField.js";
|
|
17
18
|
import "react-router";
|
|
18
|
-
import { a as
|
|
19
|
+
import { a as z } from "../../../TablePlugin-DNGtPPjq.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";
|
|
@@ -25,6 +26,6 @@ import "../../SelectListbox/SelectProvider.js";
|
|
|
25
26
|
import "../../Sortable/components/SortableItem.js";
|
|
26
27
|
import "../../../SortableProvider-l8-7ClBJ.js";
|
|
27
28
|
export {
|
|
28
|
-
|
|
29
|
+
z as MultiSelectHeader
|
|
29
30
|
};
|
|
30
31
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs as f, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { c as k } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { useRef as v, useState as M, useEffect as $ } from "react";
|
|
4
|
+
import "../Accordion/Accordion.js";
|
|
4
5
|
import "../Buttons/Button.js";
|
|
5
6
|
import "../Buttons/LinkButton.js";
|
|
6
7
|
import "@react-aria/button";
|
|
@@ -17,7 +18,7 @@ import "../Input/Input.js";
|
|
|
17
18
|
import "../InputField/InputField.js";
|
|
18
19
|
import { Label as D } from "../Label/Label.js";
|
|
19
20
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-DNGtPPjq.js";
|
|
21
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -37,7 +38,7 @@ import '../../assets/PeriodSelector.css';const s = {
|
|
|
37
38
|
for (let o = 0; o < i.length; o += _)
|
|
38
39
|
n.push(i.slice(o, o + _));
|
|
39
40
|
return n;
|
|
40
|
-
},
|
|
41
|
+
}, pe = ({
|
|
41
42
|
maxPeriods: i = I,
|
|
42
43
|
defaultValues: n,
|
|
43
44
|
label: o,
|
|
@@ -87,6 +88,6 @@ import '../../assets/PeriodSelector.css';const s = {
|
|
|
87
88
|
);
|
|
88
89
|
};
|
|
89
90
|
export {
|
|
90
|
-
|
|
91
|
+
pe as PeriodSelector
|
|
91
92
|
};
|
|
92
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 notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAE9D,SAAOI;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;AACzB,QAAMC,IAAiB,MAAM,KAAK,EAAE,QAAQP,EAAA,GAAc,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,SAAA;AAAA,EAAS,EACvB,CACH,GAEKC,IAAeC;AAAA,IACnBN,EAAe;AAAA,MAAI,CAACG,MAClBA,EAAS,OAAO,CAACD,GAASE,OACpBb,GAAe,SAASa,CAAM,KAAGF,EAAQ,KAAKE,CAAM,GACjDF,IACN,CAAA,CAAc;AAAA,IAAA;AAAA,EACnB,GAEI,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,CAAA,GAGH+B,IAAe,CAACC,GAAkBd,MAAkB;AACxD,IAAAM,EAAa,QAAQN,CAAK,IAAIc,EAAO,IAAI,CAACC,MAAQ,OAAOA,CAAG,CAAC,GAC7DN,EAAoBE,EAAcL,EAAa,OAAO,CAAC,GACvDT,EAAS,CAAC,GAAGS,EAAa,QAAQ,MAAM,EAAE,MAAM;AAAA,EAAA;AAGlD,SAAAU,EAAU,MAAM;AACd,IAAAP,EAAoBE,EAAcL,EAAa,OAAO,CAAC;AAAA,EAAA,GACtD,EAAE,GAGH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,4BAA4B;AAAA,QACnCA,EAAO,qCAAqCzB,CAAa,EAAE;AAAA,MAAA;AAAA,MAG5D,UAAA;AAAA,QAAAD,KACC,gBAAA2B,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAA1B,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAwB,EAAC,OAAA,EAAI,WAAWE,EAAO,qCAAqC,GAC1D,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GACnD,UAAAjB,EAAc,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,cACpD,cAAcR,MAAqB;AAAA,YAAA;AAAA,YAN9B,SAASQ,CAAQ;AAAA,UAAA,CAQzB,GACH;AAAA,UACCR,MAAqB,MAAM,gBAAAwB,EAACK,KAAY,OAAM,SAAQ,UAAU7B,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -2,6 +2,7 @@ import { jsx as r, jsxs as e } from "react/jsx-runtime";
|
|
|
2
2
|
import { BrowserRouter as a } from "react-router";
|
|
3
3
|
import { ProgrammeCard as o } from "./ProgrammeCard.js";
|
|
4
4
|
import { Container as s } from "../../storyComponents/Container/Container.js";
|
|
5
|
+
import "../Accordion/Accordion.js";
|
|
5
6
|
import "react";
|
|
6
7
|
import { Icon as m } from "../Icon/Icon.js";
|
|
7
8
|
import "../Buttons/Button.js";
|
|
@@ -17,7 +18,7 @@ import "../GridRow/GridRow.js";
|
|
|
17
18
|
import "../IconButton/IconButton.js";
|
|
18
19
|
import "../Input/Input.js";
|
|
19
20
|
import "../InputField/InputField.js";
|
|
20
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-DNGtPPjq.js";
|
|
21
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
24
|
import "../RteEditor/hooks/components/Flyout.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-l8-7ClBJ.js";
|
|
29
|
-
const p = "<ProgrammeCard key={key} header={header} details={details} href={href} />",
|
|
30
|
+
const p = "<ProgrammeCard key={key} header={header} details={details} href={href} />", K = {
|
|
30
31
|
title: "Atoms/ProgrammeCard",
|
|
31
32
|
component: o,
|
|
32
33
|
parameters: {
|
|
@@ -75,6 +76,6 @@ export {
|
|
|
75
76
|
c as MultiProgrammeCards,
|
|
76
77
|
l as ProgrammeCardExample,
|
|
77
78
|
d as WithComplexContent,
|
|
78
|
-
|
|
79
|
+
K as default
|
|
79
80
|
};
|
|
80
81
|
//# sourceMappingURL=ProgrammeCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { BrowserRouter } from 'react-router';\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} href={href} />';\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 <BrowserRouter>\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n </BrowserRouter>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\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 href: '/',\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n </BrowserRouter>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","BrowserRouter","Container","ProgrammeCardExample","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { BrowserRouter } from 'react-router';\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} href={href} />';\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 <BrowserRouter>\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n </BrowserRouter>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\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 href: '/',\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n </BrowserRouter>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","BrowserRouter","Container","ProgrammeCardExample","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,IAAa,6EAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAwC,CAACC,MAC7C,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACE,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAF,EAACH,GAAA,EAAe,GAAGE,EAAA,CAAM,GAC3B,GACF,GAGWI,IAAuBL,EAAS,KAAK,CAAA,CAAE;AACpDK,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAMC,IAAqBN,EAAS,KAAK,CAAA,CAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACE,gBAAAC,EAACC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAA,EAAG,OAAO,EAAE,QAAQ,EAAA,GAAK,UAAA,oBAAA,CAAiB;AAAA,EAAA,GAC7C;AAAA,EAEF,SACE,gBAAAF,EAACC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,YAAA,CAAY;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,QAAA,CAAQ;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,WAAA,CAAW;AAAA,MAAE;AAAA,IAAA,EAAA,CAE1B;AAAA,EAAA,GACF;AAAA,EAEF,MAAM;AACR;AAEA,MAAMC,IAA2D,CAACT,MAChE,gBAAAC,EAACC,GAAA,EACC,4BAACC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAN,EAACH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAA,EAAe,GAAGE,EAAA,CAAM;AAAA,EAAA,CAC3B,GACF,GACF,GAGWU,IAAsBD,EAA4B,KAAK,CAAA,CAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs as n, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { useState as v } from "react";
|
|
4
|
+
import "../Accordion/Accordion.js";
|
|
4
5
|
import "../Buttons/Button.js";
|
|
5
6
|
import "../Buttons/LinkButton.js";
|
|
6
7
|
import "@react-aria/button";
|
|
@@ -17,7 +18,7 @@ import "../IconButton/IconButton.js";
|
|
|
17
18
|
import "../Input/Input.js";
|
|
18
19
|
import "../InputField/InputField.js";
|
|
19
20
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-DNGtPPjq.js";
|
|
21
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
@@ -33,7 +34,7 @@ import '../../assets/RadioTabSelector.css';const t = {
|
|
|
33
34
|
"radio-tab-selector-button-bar__row-container": "_radio-tab-selector-button-bar__row-container_a4wnc_18",
|
|
34
35
|
"radio-tab-selector-button-bar__row": "_radio-tab-selector-button-bar__row_a4wnc_18",
|
|
35
36
|
"radio-tab-selector-button-bar__row--not-validated": "_radio-tab-selector-button-bar__row--not-validated_a4wnc_35"
|
|
36
|
-
},
|
|
37
|
+
}, Z = ({
|
|
37
38
|
buttons: l,
|
|
38
39
|
radioGroupName: c,
|
|
39
40
|
defaultValue: _,
|
|
@@ -85,6 +86,6 @@ import '../../assets/RadioTabSelector.css';const t = {
|
|
|
85
86
|
);
|
|
86
87
|
};
|
|
87
88
|
export {
|
|
88
|
-
|
|
89
|
+
Z as RadioTabSelector
|
|
89
90
|
};
|
|
90
91
|
//# sourceMappingURL=RadioTabSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioTabSelector.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState } from 'react';\r\n\r\nimport type { ChangeEvent } from 'react';\r\nimport type { IconProps } from 'components';\r\n\r\nimport styles from './RadioTabSelector.module.css';\r\n\r\nimport { ControlsButton, FeedbackBox, Label } from 'components';\r\n\r\ntype ButtonProps = {\r\n label: string;\r\n value: string;\r\n iconName?: IconProps['name'];\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n /** array with button objects with label, value and optional iconName or disabled-state */\r\n buttons: ButtonProps[];\r\n /** name of the radiogroup */\r\n radioGroupName: string;\r\n /** innitial value */\r\n defaultValue?: string;\r\n /** label takst */\r\n label?: string;\r\n /** 'top' | 'left' */\r\n labelPosition?: 'top' | 'left';\r\n /** show red star */\r\n required?: boolean;\r\n /** error text to display if set */\r\n notValidatedText?: string;\r\n /** The callback function that is invoked when the radio tab selector changes value. */\r\n onSetValue: (value: string | null) => void;\r\n}\r\n\r\nexport const RadioTabSelector = ({\r\n buttons,\r\n radioGroupName,\r\n defaultValue,\r\n label,\r\n labelPosition = 'top',\r\n required = false,\r\n notValidatedText = '',\r\n onSetValue,\r\n}: RadioTabSelectorProps) => {\r\n const [currentValue, setCurrentValue] = useState<string | null>(defaultValue || null);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n setCurrentValue(event.target.value);\r\n onSetValue(event.target.value);\r\n };\r\n\r\n return (\r\n <div\r\n className={clsx(\r\n styles['radio-tab-selector-button-bar__container'],\r\n styles[`radio-tab-selector-button-bar__container--label-${labelPosition}`]\r\n )}\r\n >\r\n {label && (\r\n <Label htmlFor=\"\" required={required}>\r\n {label}\r\n </Label>\r\n )}\r\n <div className={styles['radio-tab-selector-button-bar__row-container']}>\r\n <div\r\n className={clsx(styles['radio-tab-selector-button-bar__row'], {\r\n [styles['radio-tab-selector-button-bar__row--not-validated']]: notValidatedText,\r\n })}\r\n >\r\n {buttons.map(({ label, value, iconName, disabled }) => (\r\n <ControlsButton\r\n type=\"radio\"\r\n name={radioGroupName}\r\n key={`${value}`}\r\n label={label}\r\n value={value}\r\n iconName={iconName}\r\n checked={currentValue === value}\r\n disabled={disabled}\r\n onSetValue={handleChange}\r\n />\r\n ))}\r\n </div>\r\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["RadioTabSelector","buttons","radioGroupName","defaultValue","label","labelPosition","required","notValidatedText","onSetValue","currentValue","setCurrentValue","useState","handleChange","event","jsxs","clsx","styles","jsx","Label","value","iconName","disabled","ControlsButton","FeedbackBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioTabSelector.js","sources":["../../../src/components/RadioTabSelector/RadioTabSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState } from 'react';\r\n\r\nimport type { ChangeEvent } from 'react';\r\nimport type { IconProps } from 'components';\r\n\r\nimport styles from './RadioTabSelector.module.css';\r\n\r\nimport { ControlsButton, FeedbackBox, Label } from 'components';\r\n\r\ntype ButtonProps = {\r\n label: string;\r\n value: string;\r\n iconName?: IconProps['name'];\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n /** array with button objects with label, value and optional iconName or disabled-state */\r\n buttons: ButtonProps[];\r\n /** name of the radiogroup */\r\n radioGroupName: string;\r\n /** innitial value */\r\n defaultValue?: string;\r\n /** label takst */\r\n label?: string;\r\n /** 'top' | 'left' */\r\n labelPosition?: 'top' | 'left';\r\n /** show red star */\r\n required?: boolean;\r\n /** error text to display if set */\r\n notValidatedText?: string;\r\n /** The callback function that is invoked when the radio tab selector changes value. */\r\n onSetValue: (value: string | null) => void;\r\n}\r\n\r\nexport const RadioTabSelector = ({\r\n buttons,\r\n radioGroupName,\r\n defaultValue,\r\n label,\r\n labelPosition = 'top',\r\n required = false,\r\n notValidatedText = '',\r\n onSetValue,\r\n}: RadioTabSelectorProps) => {\r\n const [currentValue, setCurrentValue] = useState<string | null>(defaultValue || null);\r\n\r\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n setCurrentValue(event.target.value);\r\n onSetValue(event.target.value);\r\n };\r\n\r\n return (\r\n <div\r\n className={clsx(\r\n styles['radio-tab-selector-button-bar__container'],\r\n styles[`radio-tab-selector-button-bar__container--label-${labelPosition}`]\r\n )}\r\n >\r\n {label && (\r\n <Label htmlFor=\"\" required={required}>\r\n {label}\r\n </Label>\r\n )}\r\n <div className={styles['radio-tab-selector-button-bar__row-container']}>\r\n <div\r\n className={clsx(styles['radio-tab-selector-button-bar__row'], {\r\n [styles['radio-tab-selector-button-bar__row--not-validated']]: notValidatedText,\r\n })}\r\n >\r\n {buttons.map(({ label, value, iconName, disabled }) => (\r\n <ControlsButton\r\n type=\"radio\"\r\n name={radioGroupName}\r\n key={`${value}`}\r\n label={label}\r\n value={value}\r\n iconName={iconName}\r\n checked={currentValue === value}\r\n disabled={disabled}\r\n onSetValue={handleChange}\r\n />\r\n ))}\r\n </div>\r\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["RadioTabSelector","buttons","radioGroupName","defaultValue","label","labelPosition","required","notValidatedText","onSetValue","currentValue","setCurrentValue","useState","handleChange","event","jsxs","clsx","styles","jsx","Label","value","iconName","disabled","ControlsButton","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCaA,IAAmB,CAAC;AAAA,EAC/B,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,YAAAC;AACF,MAA6B;AAC3B,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAwBR,KAAgB,IAAI,GAE9ES,IAAe,CAACC,MAAyC;AAC7D,IAAAH,EAAgBG,EAAM,OAAO,KAAK,GAClCL,EAAWK,EAAM,OAAO,KAAK;AAAA,EAAA;AAG/B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,0CAA0C;AAAA,QACjDA,EAAO,mDAAmDX,CAAa,EAAE;AAAA,MAAA;AAAA,MAG1E,UAAA;AAAA,QAAAD,KACC,gBAAAa,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAAZ,GACf,UAAAF,GACH;AAAA,QAEF,gBAAAU,EAAC,OAAA,EAAI,WAAWE,EAAO,8CAA8C,GACnE,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,oCAAoC,GAAG;AAAA,gBAC5D,CAACA,EAAO,mDAAmD,CAAC,GAAGT;AAAA,cAAA,CAChE;AAAA,cAEA,UAAAN,EAAQ,IAAI,CAAC,EAAE,OAAAG,GAAO,OAAAe,GAAO,UAAAC,GAAU,UAAAC,EAAA,MACtC,gBAAAJ;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAMpB;AAAA,kBAEN,OAAOE;AAAAA,kBACP,OAAAe;AAAA,kBACA,UAAAC;AAAA,kBACA,SAASX,MAAiBU;AAAA,kBAC1B,UAAAE;AAAA,kBACA,YAAYT;AAAA,gBAAA;AAAA,gBANP,GAAGO,CAAK;AAAA,cAAA,CAQhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFZ,MAAqB,MAAM,gBAAAU,EAACM,KAAY,OAAM,SAAQ,UAAUhB,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs as p, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useId as d } from "react";
|
|
3
|
+
import "../../Accordion/Accordion.js";
|
|
3
4
|
import "../../Buttons/Button.js";
|
|
4
5
|
import "../../Buttons/LinkButton.js";
|
|
5
6
|
import "@react-aria/button";
|
|
@@ -14,7 +15,7 @@ import "../../IconButton/IconButton.js";
|
|
|
14
15
|
import "../../Input/Input.js";
|
|
15
16
|
import "../../InputField/InputField.js";
|
|
16
17
|
import "react-router";
|
|
17
|
-
import "../../../TablePlugin-
|
|
18
|
+
import "../../../TablePlugin-DNGtPPjq.js";
|
|
18
19
|
import "../Providers/LanguageProvider.js";
|
|
19
20
|
import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
20
21
|
import "../hooks/components/Flyout.js";
|
|
@@ -26,7 +27,7 @@ import "../../../SortableProvider-l8-7ClBJ.js";
|
|
|
26
27
|
import '../../../assets/EditorHeader.css';const t = {
|
|
27
28
|
"editor-header__container": "_editor-header__container_9khdz_1",
|
|
28
29
|
"editor-header__info": "_editor-header__info_9khdz_10"
|
|
29
|
-
},
|
|
30
|
+
}, B = ({ label: o, info: i = "", required: e = !1 }) => {
|
|
30
31
|
const m = `info_${d()}`;
|
|
31
32
|
return /* @__PURE__ */ p("div", { className: t["editor-header__container"], children: [
|
|
32
33
|
o !== "" && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(_, { htmlFor: m, required: e, children: o }) }),
|
|
@@ -34,6 +35,6 @@ import '../../../assets/EditorHeader.css';const t = {
|
|
|
34
35
|
] });
|
|
35
36
|
};
|
|
36
37
|
export {
|
|
37
|
-
|
|
38
|
+
B as EditorHeader
|
|
38
39
|
};
|
|
39
40
|
//# 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;AACzF,QAAMC,IAAS,QAAQC,EAAA,CAAO;AAE9B,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,0BAA0B,GAC9C,UAAA;AAAA,IAAAN,MAAU,wBACR,OAAA,EACC,UAAA,gBAAAO,EAACC,KAAM,SAASL,GAAQ,UAAAD,GACrB,UAAAF,EAAA,CACH,EAAA,CACF;AAAA,IAEDC,MAAS,MAAM,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,qBAAqB,GAAI,UAAAL,EAAA,CAAK;AAAA,EAAA,GACvE;AAEJ;"}
|
|
@@ -3,6 +3,7 @@ import { c as e } from "../../../../clsx-OuTLNxxd.js";
|
|
|
3
3
|
import { o as h } from "../../../../LexicalComposerContext.prod-DLlRM5wP.js";
|
|
4
4
|
import { as as _, at as y, au as C, av as k } from "../../../../Lexical.prod-7x3WP3vd.js";
|
|
5
5
|
import { useState as s, useEffect as m } from "react";
|
|
6
|
+
import "../../../Accordion/Accordion.js";
|
|
6
7
|
import { Icon as n } from "../../../Icon/Icon.js";
|
|
7
8
|
import "../../../Buttons/Button.js";
|
|
8
9
|
import "../../../Buttons/LinkButton.js";
|
|
@@ -17,7 +18,7 @@ import "../../../IconButton/IconButton.js";
|
|
|
17
18
|
import "../../../Input/Input.js";
|
|
18
19
|
import "../../../InputField/InputField.js";
|
|
19
20
|
import "react-router";
|
|
20
|
-
import "../../../../TablePlugin-
|
|
21
|
+
import "../../../../TablePlugin-DNGtPPjq.js";
|
|
21
22
|
import { s as r } from "../../../../RteEditor.module-B_3uFnFu.js";
|
|
22
23
|
import { useTranslation as g } from "../../hooks/useTranslation.js";
|
|
23
24
|
import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
@@ -28,7 +29,7 @@ import "../../../SelectListbox/SelectListbox.js";
|
|
|
28
29
|
import "../../../SelectListbox/SelectProvider.js";
|
|
29
30
|
import "../../../Sortable/components/SortableItem.js";
|
|
30
31
|
import "../../../../SortableProvider-l8-7ClBJ.js";
|
|
31
|
-
const
|
|
32
|
+
const $ = () => {
|
|
32
33
|
const o = g(), [t] = h(), [p, d] = s(!1), [l, c] = s(!1), u = () => {
|
|
33
34
|
t.dispatchCommand(C, void 0);
|
|
34
35
|
}, b = () => {
|
|
@@ -72,6 +73,6 @@ const Y = () => {
|
|
|
72
73
|
] });
|
|
73
74
|
};
|
|
74
75
|
export {
|
|
75
|
-
|
|
76
|
+
$ as HistoryPlugin
|
|
76
77
|
};
|
|
77
78
|
//# 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,EAAA,GACJ,CAACC,CAAM,IAAIC,EAAA,GACX,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAa,MAAM;AACvB,IAAAP,EAAO,gBAAgBQ,GAAc,MAAS;AAAA,EAAA,GAG1CC,IAAa,MAAM;AACvB,IAAAT,EAAO,gBAAgBU,GAAc,MAAS;AAAA,EAAA;AAGhD,SAAAC,EAAU,MACDX,EAAO;AAAA,IACZY;AAAAA,IACA,CAACC,OACCV,EAAWU,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAEXW,EAAU,MACDX,EAAO;AAAA,IACZc;AAAAA,IACA,CAACD,OACCP,EAAWO,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAGT,gBAAAe,EAAC,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,UAAA,gBAAAmB,EAACE,GAAA,EAAK,MAAK,YAAW,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAElC,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,UAAA,gBAAAmB,EAACE,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACtC,GACF;AAEJ;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { A as
|
|
3
|
+
import { A as E } from "../../../../../TablePlugin-DNGtPPjq.js";
|
|
4
4
|
import "../../../../../helpers-B0VCD9f3.js";
|
|
5
|
+
import "../../../../Accordion/Accordion.js";
|
|
5
6
|
import "../../../../Icon/Icon.js";
|
|
6
7
|
import "../../../../Buttons/Button.js";
|
|
7
8
|
import "../../../../Buttons/LinkButton.js";
|
|
@@ -29,6 +30,6 @@ import "../../../../SelectListbox/SelectProvider.js";
|
|
|
29
30
|
import "../../../../Sortable/components/SortableItem.js";
|
|
30
31
|
import "../../../../../SortableProvider-l8-7ClBJ.js";
|
|
31
32
|
export {
|
|
32
|
-
|
|
33
|
+
E as AddLinkForm
|
|
33
34
|
};
|
|
34
35
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,10 +4,11 @@ import { c as Y } from "../../../../clsx-OuTLNxxd.js";
|
|
|
4
4
|
import { p as I, k as Z, v as q } from "../../../../LexicalLink.prod-Dr6L083o.js";
|
|
5
5
|
import { useRef as a, useState as G, useEffect as m } from "react";
|
|
6
6
|
import { Z as Q, P as f, n as X, ar as $, _ as w, J as tt, M as et, i as ot } from "../../../../Lexical.prod-7x3WP3vd.js";
|
|
7
|
-
import { A as rt } from "../../../../TablePlugin-
|
|
7
|
+
import { A as rt } from "../../../../TablePlugin-DNGtPPjq.js";
|
|
8
8
|
import { e as nt } from "../../../../helpers-B0VCD9f3.js";
|
|
9
9
|
import { LinkContextMenu as it } from "./LinkContextMenu/LinkContextMenu.js";
|
|
10
10
|
import { useFlyout as st } from "../../hooks/useFlyout.js";
|
|
11
|
+
import "../../../Accordion/Accordion.js";
|
|
11
12
|
import { Icon as ct } from "../../../Icon/Icon.js";
|
|
12
13
|
import "../../../Buttons/Button.js";
|
|
13
14
|
import "../../../Buttons/LinkButton.js";
|
|
@@ -51,7 +52,7 @@ const ut = 200, M = (p) => {
|
|
|
51
52
|
n = n.getParent();
|
|
52
53
|
}
|
|
53
54
|
return !1;
|
|
54
|
-
},
|
|
55
|
+
}, Jt = ({ parentScrollPosition: p }) => {
|
|
55
56
|
const n = at(), [c] = W(), { flyout: O, showFlyout: P, hideFlyout: C, isVisible: u } = st(), d = a(void 0), N = a(!1), v = a(""), g = a(""), [y, U] = G({ active: !1, url: "", linktext: "" }), E = a(u), x = a(null), S = a(null), T = a(void 0), L = () => {
|
|
56
57
|
c.update(() => {
|
|
57
58
|
const o = f();
|
|
@@ -224,7 +225,7 @@ const ut = 200, M = (p) => {
|
|
|
224
225
|
] }) });
|
|
225
226
|
};
|
|
226
227
|
export {
|
|
227
|
-
|
|
228
|
+
Jt as LinkPlugin,
|
|
228
229
|
z as getLinkNodeTag
|
|
229
230
|
};
|
|
230
231
|
//# sourceMappingURL=LinkPlugin.js.map
|