@uva-glass/component-library 3.20.0 → 3.21.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.
Files changed (66) hide show
  1. package/dist/assets/ControlsButton.css +1 -0
  2. package/dist/assets/RadioTabSelector.css +1 -0
  3. package/dist/components/Buttons/Button.stories.js +1 -1
  4. package/dist/components/Buttons/LinkButton.stories.js +1 -1
  5. package/dist/components/Buttons/MenuButton.stories.js +1 -1
  6. package/dist/components/Checkbox/Checkbox.stories.js +1 -1
  7. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +34 -31
  8. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  9. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
  10. package/dist/components/CheckboxTree/CheckboxTree.stories.js +1 -1
  11. package/dist/components/Chip/Chip.stories.js +1 -1
  12. package/dist/components/ControlsButton/ControlsButton.d.ts +18 -0
  13. package/dist/components/ControlsButton/ControlsButton.js +46 -0
  14. package/dist/components/ControlsButton/ControlsButton.js.map +1 -0
  15. package/dist/components/ControlsButton/ControlsButton.stories.d.ts +5 -0
  16. package/dist/components/ControlsButton/ControlsButton.stories.js +45 -0
  17. package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -0
  18. package/dist/components/ControlsButton/index.d.ts +1 -0
  19. package/dist/components/ControlsButton/index.js +5 -0
  20. package/dist/components/Drawer/Drawer.stories.js +1 -1
  21. package/dist/components/FormInput/FormInput.stories.js +1 -1
  22. package/dist/components/IconButton/IconButton.stories.js +1 -1
  23. package/dist/components/InputField/InputField.stories.js +1 -1
  24. package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
  25. package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
  26. package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +1 -1
  27. package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
  28. package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
  29. package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
  30. package/dist/components/RadioTabSelector/RadioTabSelector.d.ts +25 -0
  31. package/dist/components/RadioTabSelector/RadioTabSelector.js +89 -0
  32. package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -0
  33. package/dist/components/RadioTabSelector/RadioTabSelector.stories.d.ts +5 -0
  34. package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +60 -0
  35. package/dist/components/RadioTabSelector/RadioTabSelector.stories.js.map +1 -0
  36. package/dist/components/RadioTabSelector/index.d.ts +1 -0
  37. package/dist/components/RadioTabSelector/index.js +5 -0
  38. package/dist/components/RadioTabSelector/index.js.map +1 -0
  39. package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
  40. package/dist/components/Sortable/Sortable.stories.js +1 -1
  41. package/dist/components/TextArea/TextArea.stories.js +1 -1
  42. package/dist/components/TextArea/TextArea.test.js +1 -1
  43. package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
  44. package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
  45. package/dist/components/index.d.ts +2 -1
  46. package/dist/components/index.js +46 -44
  47. package/dist/components/index.js.map +1 -1
  48. package/dist/{index-BCvy9BiK.js → index-Dwqes6RH.js} +5 -2
  49. package/dist/{index-BCvy9BiK.js.map → index-Dwqes6RH.js.map} +1 -1
  50. package/dist/index.js +46 -44
  51. package/dist/index.js.map +1 -1
  52. package/dist/storybook__react.d.js +1 -1
  53. package/package.json +22 -22
  54. package/dist/assets/CheckboxButton.css +0 -1
  55. package/dist/components/CheckboxButton/CheckboxButton.d.ts +0 -12
  56. package/dist/components/CheckboxButton/CheckboxButton.js +0 -28
  57. package/dist/components/CheckboxButton/CheckboxButton.js.map +0 -1
  58. package/dist/components/CheckboxButton/CheckboxButton.stories.d.ts +0 -5
  59. package/dist/components/CheckboxButton/CheckboxButton.stories.js +0 -40
  60. package/dist/components/CheckboxButton/CheckboxButton.stories.js.map +0 -1
  61. package/dist/components/CheckboxButton/CheckboxButton.test.d.ts +0 -0
  62. package/dist/components/CheckboxButton/CheckboxButton.test.js +0 -21
  63. package/dist/components/CheckboxButton/CheckboxButton.test.js.map +0 -1
  64. package/dist/components/CheckboxButton/index.d.ts +0 -1
  65. package/dist/components/CheckboxButton/index.js +0 -5
  66. /package/dist/components/{CheckboxButton → ControlsButton}/index.js.map +0 -0
@@ -0,0 +1 @@
1
+ ._controls-button_105b3_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_105b3_17{width:2.25rem}._controls-input_105b3_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_105b3_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_105b3_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_105b3_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_105b3_21:disabled+label,._controls-input_105b3_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_105b3_21:hover+label{background-color:var(--new-color-grey-300)}
@@ -0,0 +1 @@
1
+ ._radio-tab-selector-button-bar__container_a4wnc_1{display:flex;flex-wrap:wrap}._radio-tab-selector-button-bar__container--label-left_a4wnc_6{align-items:baseline;flex-direction:row;gap:1rem}._radio-tab-selector-button-bar__container--label-top_a4wnc_12{align-items:flex-start;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row-container_a4wnc_18{display:flex;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row_a4wnc_18{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._radio-tab-selector-button-bar__row--not-validated_a4wnc_35{border-color:var(--new-color-red-600)}
@@ -1,5 +1,5 @@
1
1
  import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
2
- import { fn as l } from "../../index-BCvy9BiK.js";
2
+ import { fn as l } from "../../index-Dwqes6RH.js";
3
3
  import { Button as n } from "./Button.js";
4
4
  const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
5
5
  title: "Atoms/Buttons/Button",
@@ -1,5 +1,5 @@
1
1
  import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
2
- import { fn as s } from "../../index-BCvy9BiK.js";
2
+ import { fn as s } from "../../index-Dwqes6RH.js";
3
3
  import { BrowserRouter as c } from "react-router";
4
4
  import { LinkButton as n } from "./LinkButton.js";
5
5
  const d = `
@@ -1,5 +1,5 @@
1
1
  import { jsx as n, jsxs as s, Fragment as l } from "react/jsx-runtime";
2
- import { fn as c } from "../../index-BCvy9BiK.js";
2
+ import { fn as c } from "../../index-Dwqes6RH.js";
3
3
  import { MenuButton as t } from "./MenuButton.js";
4
4
  const d = `
5
5
  // Has all LabelHTMLAttributes props available except "className" and "style"
@@ -1,5 +1,5 @@
1
1
  import { jsxs as g, jsx as o } from "react/jsx-runtime";
2
- import { fn as e } from "../../index-BCvy9BiK.js";
2
+ import { fn as e } from "../../index-Dwqes6RH.js";
3
3
  import { Checkbox as n } from "./Checkbox.js";
4
4
  import { FormField as t } from "../FormField/FormField.js";
5
5
  import { Label as i } from "../Label/Label.js";
@@ -1,66 +1,69 @@
1
- import { jsxs as i, jsx as c } from "react/jsx-runtime";
2
- import { useRef as p } from "react";
3
- import { c as l } from "../../clsx-OuTLNxxd.js";
4
- import { CheckboxButton as w } from "../CheckboxButton/CheckboxButton.js";
1
+ import { jsxs as l, jsx as r } from "react/jsx-runtime";
2
+ import { useState as w } from "react";
3
+ import { c as s } from "../../clsx-OuTLNxxd.js";
5
4
  import { Label as z } from "../Label/Label.js";
6
5
  import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
7
- import '../../assets/CheckboxButtonBar.css';const r = {
6
+ import { ControlsButton as B } from "../ControlsButton/ControlsButton.js";
7
+ import '../../assets/CheckboxButtonBar.css';const t = {
8
8
  "checkbox-button-bar__container": "_checkbox-button-bar__container_e14sz_1",
9
9
  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_e14sz_6",
10
10
  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_e14sz_12",
11
11
  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_e14sz_18",
12
12
  "checkbox-button-bar__row": "_checkbox-button-bar__row_e14sz_18",
13
13
  "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_e14sz_35"
14
- }, S = ({
15
- checkboxes: s,
16
- defaultValues: t,
14
+ }, F = ({
15
+ checkboxes: i,
16
+ defaultValues: n,
17
17
  label: a,
18
18
  labelPosition: h = "top",
19
- required: k = !1,
20
- notValidated: x = !1,
21
- notValidatedText: b = "",
22
- disableGroup: u = !1,
19
+ required: u = !1,
20
+ notValidated: k = !1,
21
+ notValidatedText: c = "",
22
+ disableGroup: x = !1,
23
23
  onSetValues: m
24
24
  }) => {
25
- const e = p(t ? t.map(String) : []), d = (n, o) => {
26
- n === null ? e.current = e.current.filter((_) => _ !== o) : e.current = [...e.current, o], m(e.current);
25
+ const [_, d] = w(n ? n.map(String) : []), f = (e) => {
26
+ let o = _;
27
+ o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], d(o), m(o);
27
28
  };
28
- return /* @__PURE__ */ i(
29
+ return /* @__PURE__ */ l(
29
30
  "div",
30
31
  {
31
- className: l(
32
- r["checkbox-button-bar__container"],
33
- r[`checkbox-button-bar__container--label-${h}`]
32
+ className: s(
33
+ t["checkbox-button-bar__container"],
34
+ t[`checkbox-button-bar__container--label-${h}`]
34
35
  ),
35
36
  children: [
36
- a && /* @__PURE__ */ c(z, { htmlFor: "", required: k, children: a }),
37
- /* @__PURE__ */ i("div", { className: r["checkbox-button-bar__row-container"], children: [
38
- /* @__PURE__ */ c(
37
+ a && /* @__PURE__ */ r(z, { htmlFor: "", required: u, children: a }),
38
+ /* @__PURE__ */ l("div", { className: t["checkbox-button-bar__row-container"], children: [
39
+ /* @__PURE__ */ r(
39
40
  "div",
40
41
  {
41
- className: l(r["checkbox-button-bar__row"], {
42
- [r["checkbox-button-bar__row--not-validated"]]: x || b
42
+ className: s(t["checkbox-button-bar__row"], {
43
+ [t["checkbox-button-bar__row--not-validated"]]: k || c
43
44
  }),
44
- children: s.map(({ label: n, value: o, disabled: _ }) => /* @__PURE__ */ c(
45
- w,
45
+ children: i.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
46
+ B,
46
47
  {
47
- label: n,
48
+ type: "checkbox",
49
+ label: e,
50
+ forceSquared: !0,
48
51
  value: o,
49
- isChecked: t ? t.includes(o) : !1,
50
- disabled: _ || u,
51
- onSetValue: (f) => d(f, o)
52
+ checked: _.includes(o),
53
+ disabled: b || x,
54
+ onSetValue: (p) => f(p.target.value)
52
55
  },
53
56
  `${o}`
54
57
  ))
55
58
  }
56
59
  ),
57
- b !== "" && /* @__PURE__ */ c(v, { level: "error", feedback: b })
60
+ c !== "" && /* @__PURE__ */ r(v, { level: "error", feedback: c })
58
61
  ] })
59
62
  ]
60
63
  }
61
64
  );
62
65
  };
63
66
  export {
64
- S as CheckboxButtonBar
67
+ F as CheckboxButtonBar
65
68
  };
66
69
  //# sourceMappingURL=CheckboxButtonBar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (setValue: string | null, value: string) => {\n if (setValue === null) {\n values.current = values.current.filter((val) => val !== value);\n } else {\n values.current = [...values.current, value];\n }\n onSetValues(values.current);\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, disabled }) => (\n <CheckboxButton\n key={`${value}`}\n label={label}\n value={value}\n isChecked={defaultValues ? defaultValues.includes(value) : false}\n disabled={disabled || disableGroup}\n onSetValue={(newValue) => handleChange(newValue, value)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBT,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAExEU,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAC5B;AAGE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCd,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAgB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAf,GACf,UACHF,GAAA;AAAA,QAED,gBAAAa,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGZ,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAO,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBAEC,OAAOnB;AAAAA,kBACP,OAAAW;AAAA,kBACA,WAAWZ,IAAgBA,EAAc,SAASY,CAAK,IAAI;AAAA,kBAC3D,UAAUO,KAAYb;AAAA,kBACtB,YAAY,CAACe,MAAaX,EAAaW,GAAUT,CAAK;AAAA,gBAAA;AAAA,gBALjD,GAAGA,CAAK;AAAA,cAOhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAY,EAACK,KAAY,OAAM,SAAQ,UAAUjB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
1
+ {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, disabled }) => (\n <ControlsButton\n type=\"checkbox\"\n key={`${value}`}\n label={label}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBV,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAErGW,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAET,IAAAK,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCf,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAiB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAhB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAc,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGb,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAQ,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,OAAOpB;AAAAA,kBACP,cAAc;AAAA,kBACd,OAAAW;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUQ,KAAYd;AAAA,kBACtB,YAAY,CAACgB,MAAUX,EAAaW,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBANjD,GAAGV,CAAK;AAAA,cAQhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAa,EAACK,KAAY,OAAM,SAAQ,UAAUlB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
@@ -1,5 +1,5 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { fn as t } from "../../index-BCvy9BiK.js";
2
+ import { fn as t } from "../../index-Dwqes6RH.js";
3
3
  import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
4
4
  const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
5
5
  title: "Molecules/CheckboxButtonBar",
@@ -1,5 +1,5 @@
1
1
  import { jsx as _, jsxs as A } from "react/jsx-runtime";
2
- import { fn as w } from "../../index-BCvy9BiK.js";
2
+ import { fn as w } from "../../index-Dwqes6RH.js";
3
3
  import { s as g, j as V, V as j } from "../../index-DH9Vbk37.js";
4
4
  import { useState as D } from "react";
5
5
  import { CheckboxTree as O } from "./CheckboxTree.js";
@@ -1,5 +1,5 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { fn as t } from "../../index-BCvy9BiK.js";
2
+ import { fn as t } from "../../index-Dwqes6RH.js";
3
3
  import { Chip as e } from "./Chip.js";
4
4
  const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
5
5
  title: "Atoms/Chip",
@@ -0,0 +1,18 @@
1
+ import { ChangeEvent } from 'react';
2
+ export interface ControlsButtonProps {
3
+ /** to set type/behaviour of input radio or checkbox */
4
+ type?: 'radio' | 'checkbox';
5
+ label: string;
6
+ value: string;
7
+ /** set if used as radiogroup */
8
+ name?: string;
9
+ /** `true` to set squared button; otherwise, `false`. The default is `false`. */
10
+ forceSquared?: boolean;
11
+ /** to set default status */
12
+ checked?: boolean;
13
+ /** `true` to disable the button; otherwise, `false`. The default is `false`. */
14
+ disabled?: boolean;
15
+ /** The callback function that is invoked when the radio button changes value. */
16
+ onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;
17
+ }
18
+ export declare const ControlsButton: ({ type, label, value, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,46 @@
1
+ import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
2
+ import { useId as b } from "react";
3
+ import { c as d } from "../../clsx-OuTLNxxd.js";
4
+ import '../../assets/ControlsButton.css';const t = {
5
+ "controls-button": "_controls-button_105b3_1",
6
+ "controls-button--squared": "_controls-button--squared_105b3_17",
7
+ "controls-input": "_controls-input_105b3_21"
8
+ }, g = ({
9
+ type: c = "checkbox",
10
+ label: o,
11
+ value: e,
12
+ name: s,
13
+ forceSquared: l = !1,
14
+ checked: u,
15
+ disabled: i,
16
+ onSetValue: a
17
+ }) => {
18
+ const n = b();
19
+ return /* @__PURE__ */ m(p, { children: [
20
+ /* @__PURE__ */ r(
21
+ "input",
22
+ {
23
+ type: c,
24
+ id: `${n}${o.replace(/\s+/g, "_")}`,
25
+ name: s || o.replace(/\s+/g, "_"),
26
+ disabled: i,
27
+ value: e,
28
+ checked: u,
29
+ onChange: (_) => a(_),
30
+ className: t["controls-input"]
31
+ }
32
+ ),
33
+ /* @__PURE__ */ r(
34
+ "label",
35
+ {
36
+ htmlFor: `${n}${o}`,
37
+ className: d(t["controls-button"], [l && t["controls-button--squared"]]),
38
+ children: o
39
+ }
40
+ )
41
+ ] });
42
+ };
43
+ export {
44
+ g as ControlsButton
45
+ };
46
+ //# sourceMappingURL=ControlsButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nexport interface ControlsButtonProps {\r\n /** to set type/behaviour of input radio or checkbox */\r\n type?: 'radio' | 'checkbox';\r\n label: string;\r\n value: string;\r\n /** set if used as radiogroup */\r\n name?: string;\r\n /** `true` to set squared button; otherwise, `false`. The default is `false`. */\r\n forceSquared?: boolean;\r\n /** to set default status */\r\n checked?: boolean;\r\n /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n disabled?: boolean;\r\n /** The callback function that is invoked when the radio button changes value. */\r\n onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n type = 'checkbox',\r\n label,\r\n value,\r\n name,\r\n forceSquared = false,\r\n checked,\r\n disabled,\r\n onSetValue,\r\n}: ControlsButtonProps) => {\r\n const idPrefix = useId();\r\n\r\n return (\r\n <>\r\n <input\r\n type={type}\r\n id={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n name={name ? name : label.replace(/\\s+/g, '_')}\r\n disabled={disabled}\r\n value={value}\r\n checked={checked}\r\n onChange={(event) => onSetValue(event)}\r\n className={styles['controls-input']}\r\n />\r\n <label\r\n htmlFor={`${idPrefix}${label}`}\r\n className={clsx(styles['controls-button'], [forceSquared && styles['controls-button--squared']])}\r\n >\r\n {label}\r\n </label>\r\n </>\r\n );\r\n};\r\n"],"names":["ControlsButton","type","label","value","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx"],"mappings":";;;;;;;GAwBaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM;AAEvB,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAZ;AAAA,QACA,IAAI,GAAGQ,CAAQ,GAAGP,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAME,KAAcF,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAK;AAAA,QACA,OAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IACpC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGJ,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWc,EAAKD,EAAO,iBAAiB,GAAG,CAACV,KAAgBU,EAAO,0BAA0B,CAAC,CAAC;AAAA,QAE9F,UAAAb;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
@@ -0,0 +1,5 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { ControlsButtonProps } from './ControlsButton';
3
+ declare const _default: Meta<ControlsButtonProps>;
4
+ export default _default;
5
+ export declare const ControlsButtonExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;
@@ -0,0 +1,45 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { fn as n } from "../../index-Dwqes6RH.js";
3
+ import { ControlsButton as o } from "./ControlsButton.js";
4
+ const r = "<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
5
+ title: "Atoms/ControlsButton",
6
+ component: o,
7
+ argTypes: {
8
+ label: {
9
+ control: "text"
10
+ },
11
+ value: {
12
+ control: "string"
13
+ },
14
+ forceSquared: {
15
+ control: "boolean"
16
+ },
17
+ isChecked: {
18
+ control: "boolean"
19
+ },
20
+ disabled: {
21
+ control: "boolean"
22
+ },
23
+ onSetValue: {
24
+ table: {
25
+ disable: !0
26
+ }
27
+ }
28
+ },
29
+ parameters: {
30
+ inspectComponent: o,
31
+ codeString: r
32
+ }
33
+ }, l = (t) => /* @__PURE__ */ e(o, { ...t }), a = l.bind({});
34
+ a.args = {
35
+ type: "checkbox",
36
+ label: "1.2",
37
+ value: "1.2",
38
+ forceSquared: !0,
39
+ onSetValue: n()
40
+ };
41
+ export {
42
+ a as ControlsButtonExample,
43
+ u as default
44
+ };
45
+ //# sourceMappingURL=ControlsButton.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n '<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/ControlsButton',\r\n component: ControlsButton,\r\n argTypes: {\r\n label: {\r\n control: 'text',\r\n },\r\n value: {\r\n control: 'string',\r\n },\r\n forceSquared: {\r\n control: 'boolean',\r\n },\r\n isChecked: {\r\n control: 'boolean',\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n },\r\n onSetValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: ControlsButton,\r\n codeString: codeString,\r\n },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n type: 'checkbox',\r\n label: '1.2',\r\n value: '1.2',\r\n forceSquared: true,\r\n onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,qJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}
@@ -0,0 +1 @@
1
+ export * from './ControlsButton';
@@ -0,0 +1,5 @@
1
+ import { ControlsButton as r } from "./ControlsButton.js";
2
+ export {
3
+ r as ControlsButton
4
+ };
5
+ //# sourceMappingURL=index.js.map
@@ -1,6 +1,6 @@
1
1
  import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
2
  import { OverlayProvider as p } from "@react-aria/overlays";
3
- import { fn as m } from "../../index-BCvy9BiK.js";
3
+ import { fn as m } from "../../index-Dwqes6RH.js";
4
4
  import { useState as c } from "react";
5
5
  import { Drawer as r } from "./Drawer.js";
6
6
  import { Button as o } from "../Buttons/Button.js";
@@ -1,5 +1,5 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import { fn as i } from "../../index-BCvy9BiK.js";
2
+ import { fn as i } from "../../index-Dwqes6RH.js";
3
3
  import { FormInput as a } from "./FormInput.js";
4
4
  import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
5
5
  const m = `
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { fn as r } from "../../index-BCvy9BiK.js";
2
+ import { fn as r } from "../../index-Dwqes6RH.js";
3
3
  import { IconButton as t } from "./IconButton.js";
4
4
  import { Icon as i } from "../Icon/Icon.js";
5
5
  const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
@@ -1,6 +1,6 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import { useState as d, useRef as g } from "react";
3
- import { fn as l } from "../../index-BCvy9BiK.js";
3
+ import { fn as l } from "../../index-Dwqes6RH.js";
4
4
  import { InputField as e } from "./InputField.js";
5
5
  import { Container as u } from "../../storyComponents/Container/Container.js";
6
6
  import { Icon as h } from "../Icon/Icon.js";
@@ -1,6 +1,6 @@
1
1
  import { jsxs as a, jsx as e } from "react/jsx-runtime";
2
2
  import { ModalProvider as r } from "@react-aria/overlays";
3
- import { fn as i } from "../../index-BCvy9BiK.js";
3
+ import { fn as i } from "../../index-Dwqes6RH.js";
4
4
  import { ModalDialog as t } from "./ModalDialog.js";
5
5
  import { Button as s } from "../Buttons/Button.js";
6
6
  import "../Buttons/LinkButton.js";
@@ -1,5 +1,5 @@
1
1
  import { jsxs as S, jsx as r } from "react/jsx-runtime";
2
- import { fn as d } from "../../index-BCvy9BiK.js";
2
+ import { fn as d } from "../../index-Dwqes6RH.js";
3
3
  import { useState as p } from "react";
4
4
  import { M as e } from "../../TablePlugin-hxs9O_ox.js";
5
5
  import { Container as M } from "../../storyComponents/Container/Container.js";
@@ -1,5 +1,5 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { fn as o } from "../../index-BCvy9BiK.js";
2
+ import { fn as o } from "../../index-Dwqes6RH.js";
3
3
  import { MultiSelectBox as e } from "./MultiSelectBox.js";
4
4
  const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", b = {
5
5
  title: "Organisms/MultiSelectBox",
@@ -1,5 +1,5 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { fn as a } from "../../index-BCvy9BiK.js";
2
+ import { fn as a } from "../../index-Dwqes6RH.js";
3
3
  import { OverlayCloseButton as o } from "./OverlayCloseButton.js";
4
4
  import { Container as l } from "../../storyComponents/Container/Container.js";
5
5
  const n = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", c = {
@@ -1,5 +1,5 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import { fn as t } from "../../index-BCvy9BiK.js";
2
+ import { fn as t } from "../../index-Dwqes6RH.js";
3
3
  import { PeriodSelector as e } from "./PeriodSelector.js";
4
4
  const i = "<PeriodSelector maxPeriods={} defaultValues={} label={} labelPosition={} required={} onChange={} />", m = {
5
5
  title: "Organisms/PeriodSelector",
@@ -1,5 +1,5 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import { fn as a } from "../../index-BCvy9BiK.js";
2
+ import { fn as a } from "../../index-Dwqes6RH.js";
3
3
  import { RadioGroup as o } from "./RadioGroup.js";
4
4
  const l = `
5
5
  <RadioGroup label={label} options={options}
@@ -0,0 +1,25 @@
1
+ type ButtonProps = {
2
+ label: string;
3
+ value: string;
4
+ disabled?: boolean;
5
+ };
6
+ export interface RadioTabSelectorProps {
7
+ /** array with objects with label, value, disablestate */
8
+ buttons: ButtonProps[];
9
+ /** name of the radiogroup */
10
+ radioGroupName: string;
11
+ /** innitial value */
12
+ defaultValue?: string;
13
+ /** label takst */
14
+ label?: string;
15
+ /** 'top' | 'left' */
16
+ labelPosition?: 'top' | 'left';
17
+ /** show red star */
18
+ required?: boolean;
19
+ /** error text to display if set */
20
+ notValidatedText?: string;
21
+ /** The callback function that is invoked when the radio tab selector changes value. */
22
+ onSetValue: (value: string | null) => void;
23
+ }
24
+ export declare const RadioTabSelector: ({ buttons, radioGroupName, defaultValue, label, labelPosition, required, notValidatedText, onSetValue, }: RadioTabSelectorProps) => import("react/jsx-runtime").JSX.Element;
25
+ export {};
@@ -0,0 +1,89 @@
1
+ import { jsxs as n, jsx as o } from "react/jsx-runtime";
2
+ import { c as b } from "../../clsx-OuTLNxxd.js";
3
+ import { useState as h } from "react";
4
+ import "../Buttons/Button.js";
5
+ import "../Buttons/LinkButton.js";
6
+ import "@react-aria/button";
7
+ import "../Checkbox/Checkbox.js";
8
+ import { Label as v } from "../Label/Label.js";
9
+ import { FeedbackBox as g } from "../FeedbackBox/FeedbackBox.js";
10
+ import { ControlsButton as k } from "../ControlsButton/ControlsButton.js";
11
+ import "@react-aria/dialog";
12
+ import "@react-aria/focus";
13
+ import "@react-aria/overlays";
14
+ import "../OverlayCloseButton/OverlayCloseButton.js";
15
+ import "../GridRow/GridRow.js";
16
+ import "../IconButton/IconButton.js";
17
+ import "../Input/Input.js";
18
+ import "../InputField/InputField.js";
19
+ import "react-router";
20
+ import "../../TablePlugin-hxs9O_ox.js";
21
+ import "../RteEditor/Providers/LanguageProvider.js";
22
+ import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
23
+ import "../RteEditor/hooks/components/Flyout.js";
24
+ import "../../index-DllfJcv4.js";
25
+ import "../SelectListbox/SelectListbox.js";
26
+ import "../SelectListbox/SelectProvider.js";
27
+ import "../Sortable/components/SortableItem.js";
28
+ import "../../SortableProvider-B3_u0pKv.js";
29
+ import '../../assets/RadioTabSelector.css';const t = {
30
+ "radio-tab-selector-button-bar__container": "_radio-tab-selector-button-bar__container_a4wnc_1",
31
+ "radio-tab-selector-button-bar__container--label-left": "_radio-tab-selector-button-bar__container--label-left_a4wnc_6",
32
+ "radio-tab-selector-button-bar__container--label-top": "_radio-tab-selector-button-bar__container--label-top_a4wnc_12",
33
+ "radio-tab-selector-button-bar__row-container": "_radio-tab-selector-button-bar__row-container_a4wnc_18",
34
+ "radio-tab-selector-button-bar__row": "_radio-tab-selector-button-bar__row_a4wnc_18",
35
+ "radio-tab-selector-button-bar__row--not-validated": "_radio-tab-selector-button-bar__row--not-validated_a4wnc_35"
36
+ }, X = ({
37
+ buttons: l,
38
+ radioGroupName: c,
39
+ defaultValue: _,
40
+ label: i,
41
+ labelPosition: m = "top",
42
+ required: s = !1,
43
+ notValidatedText: a = "",
44
+ onSetValue: p
45
+ }) => {
46
+ const [d, u] = h(_ || null), w = (r) => {
47
+ u(r.target.value), p(r.target.value);
48
+ };
49
+ return /* @__PURE__ */ n(
50
+ "div",
51
+ {
52
+ className: b(
53
+ t["radio-tab-selector-button-bar__container"],
54
+ t[`radio-tab-selector-button-bar__container--label-${m}`]
55
+ ),
56
+ children: [
57
+ i && /* @__PURE__ */ o(v, { htmlFor: "", required: s, children: i }),
58
+ /* @__PURE__ */ n("div", { className: t["radio-tab-selector-button-bar__row-container"], children: [
59
+ /* @__PURE__ */ o(
60
+ "div",
61
+ {
62
+ className: b(t["radio-tab-selector-button-bar__row"], {
63
+ [t["radio-tab-selector-button-bar__row--not-validated"]]: a
64
+ }),
65
+ children: l.map(({ label: r, value: e, disabled: f }) => /* @__PURE__ */ o(
66
+ k,
67
+ {
68
+ type: "radio",
69
+ name: c,
70
+ label: r,
71
+ value: e,
72
+ checked: d === e,
73
+ disabled: f,
74
+ onSetValue: w
75
+ },
76
+ `${e}`
77
+ ))
78
+ }
79
+ ),
80
+ a !== "" && /* @__PURE__ */ o(g, { level: "error", feedback: a })
81
+ ] })
82
+ ]
83
+ }
84
+ );
85
+ };
86
+ export {
87
+ X as RadioTabSelector
88
+ };
89
+ //# sourceMappingURL=RadioTabSelector.js.map
@@ -0,0 +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\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 disabled?: boolean;\r\n};\r\n\r\nexport interface RadioTabSelectorProps {\r\n /** array with objects with label, value, disablestate */\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, 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 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","disabled","ControlsButton","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCaA,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;AAC7C,IAAAH,EAAAG,EAAM,OAAO,KAAK,GACvBL,EAAAK,EAAM,OAAO,KAAK;AAAA,EAC/B;AAGE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,0CAA0C;AAAA,QACjDA,EAAO,mDAAmDX,CAAa,EAAE;AAAA,MAC3E;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAa,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAZ,GACf,UACHF,GAAA;AAAA,QAED,gBAAAU,EAAA,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,QAC5B,gBAAAH;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAMnB;AAAA,kBAEN,OAAOE;AAAAA,kBACP,OAAAe;AAAA,kBACA,SAASV,MAAiBU;AAAA,kBAC1B,UAAAC;AAAA,kBACA,YAAYR;AAAA,gBAAA;AAAA,gBALP,GAAGO,CAAK;AAAA,cAOhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCZ,MAAqB,MAAM,gBAAAU,EAACK,KAAY,OAAM,SAAQ,UAAUf,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
@@ -0,0 +1,5 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { RadioTabSelectorProps } from './RadioTabSelector';
3
+ declare const _default: Meta<RadioTabSelectorProps>;
4
+ export default _default;
5
+ export declare const RadioTabSelectorExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, RadioTabSelectorProps>;
@@ -0,0 +1,60 @@
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { fn as o } from "../../index-Dwqes6RH.js";
3
+ import { RadioTabSelector as e } from "./RadioTabSelector.js";
4
+ const l = "<RadioTabSelector radioButtons={} defaultValue={} label={} labelPosition={} required={} notValidatedText={} onSetValue={} />", u = {
5
+ title: "Molecules/RadioTabSelector",
6
+ component: e,
7
+ argTypes: {
8
+ radioButtons: {
9
+ table: {
10
+ disable: !0
11
+ }
12
+ },
13
+ defaultValue: {
14
+ table: {
15
+ disable: !0
16
+ }
17
+ },
18
+ label: {
19
+ control: "text"
20
+ },
21
+ labelPosition: {
22
+ control: "radio",
23
+ options: ["top", "left"]
24
+ },
25
+ required: {
26
+ control: "boolean"
27
+ },
28
+ notValidatedText: {
29
+ control: "text"
30
+ },
31
+ onSetValue: {
32
+ table: {
33
+ disable: !0
34
+ }
35
+ }
36
+ },
37
+ parameters: {
38
+ inspectComponent: e,
39
+ codeString: l
40
+ }
41
+ }, i = (t) => /* @__PURE__ */ a(e, { ...t }), r = i.bind({});
42
+ r.args = {
43
+ buttons: [
44
+ { label: "Digitaal", value: "digitaal" },
45
+ { label: "Schriftelijk", value: "schriftelijk" },
46
+ { label: "Presentatie", value: "presentatie" }
47
+ ],
48
+ defaultValue: "digitaal",
49
+ radioGroupName: "radio-group",
50
+ label: "Toetsvorm",
51
+ labelPosition: "top",
52
+ required: !0,
53
+ notValidatedText: "",
54
+ onSetValue: o()
55
+ };
56
+ export {
57
+ r as RadioTabSelectorExample,
58
+ u as default
59
+ };
60
+ //# sourceMappingURL=RadioTabSelector.stories.js.map