@uva-glass/component-library 3.51.0 → 3.52.0

package/dist/components/FormInput/FormInput.js

@@ -1,5 +1,5 @@
-import { jsxs as u, jsx as t, Fragment as b } from "react/jsx-runtime";
-import { c as h } from "../../clsx-OuTLNxxd.js";
+import { jsxs as c, Fragment as v, jsx as r } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
 import "../Accordion/Accordion.js";
 import "react";
 import "../Buttons/Button.js";
@@ -7,7 +7,7 @@ import "../Buttons/LinkButton.js";
 import "@react-aria/button";
 import "../Checkbox/Checkbox.js";
 import { Label as k } from "../Label/Label.js";
-import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
+import { FeedbackBox as g } from "../FeedbackBox/FeedbackBox.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
@@ -17,7 +17,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CeZO4BR1.js";
+import "../../TablePlugin-BLbsvcuu.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -29,45 +29,49 @@ import "../SelectListbox/SelectProvider.js";
 import "../Sortable/components/SortableItem.js";
 import "../../SortableProvider-BbwlEPIr.js";
 import "../WeekSelector/components/WeekSelectorOptionContainer.js";
-import '../../assets/FormInput.css';const o = {
-  "form-input__container": "_form-input__container_aau49_1",
-  "form-input__container--label-left": "_form-input__container--label-left_aau49_7",
-  "form-input__container--label-top": "_form-input__container--label-top_aau49_18",
-  "form-input__input-feedback-container": "_form-input__input-feedback-container_aau49_25",
-  "form-input__input-container": "_form-input__input-container_aau49_35",
-  "form-input__input": "_form-input__input_aau49_25"
-}, Z = ({
-  id: i,
-  label: n,
-  labelPosition: c = "top",
+import '../../assets/FormInput.css';const t = {
+  "form-input__container": "_form-input__container_rt0pn_1",
+  "form-input__container--label-left": "_form-input__container--label-left_rt0pn_7",
+  "form-input__container--label-top": "_form-input__container--label-top_rt0pn_18",
+  "form-input__input-feedback-container": "_form-input__input-feedback-container_rt0pn_25",
+  "form-input__input-container": "_form-input__input-container_rt0pn_35",
+  "form-input__input": "_form-input__input_rt0pn_25",
+  "not-valid": "_not-valid_rt0pn_60"
+}, T = ({
+  id: o,
+  label: i,
+  labelPosition: f = "top",
   type: p = "text",
-  required: f = !1,
+  required: u = !1,
+  notValid: s = !1,
   notValidatedText: e = "",
   onChange: m,
-  noContainer: l = !1,
-  customInput: a
+  noContainer: d = !1,
+  customInput: _
 }) => {
-  const s = (r) => ["e", "E", "+", "-"].includes(r.key) && r.preventDefault(), d = (r) => {
-    typeof m == "function" && m(r.target.value);
-  }, _ = /* @__PURE__ */ u(b, { children: [
-    n && /* @__PURE__ */ t(k, { htmlFor: i, required: f, alignRight: !0, children: n }),
-    /* @__PURE__ */ u("div", { className: o["form-input__input-feedback-container"], children: [
-      a || /* @__PURE__ */ t("div", { className: o["form-input__input-container"], children: /* @__PURE__ */ t(
+  const b = (n) => ["e", "E", "+", "-"].includes(n.key) && n.preventDefault(), h = (n) => {
+    typeof m == "function" && m(n.target.value);
+  }, a = /* @__PURE__ */ c(v, { children: [
+    i && /* @__PURE__ */ r(k, { htmlFor: o, required: u, alignRight: !0, children: i }),
+    /* @__PURE__ */ c("div", { className: t["form-input__input-feedback-container"], children: [
+      _ || /* @__PURE__ */ r("div", { className: t["form-input__input-container"], children: /* @__PURE__ */ r(
         "input",
         {
-          id: i,
+          id: o,
           type: p,
-          ...p === "number" && { onKeyDown: s },
-          onChange: d,
-          className: o["form-input__input"]
+          ...p === "number" && { onKeyDown: b },
+          onChange: h,
+          className: l(t["form-input__input"], {
+            [t["not-valid"]]: s
+          })
         }
       ) }),
-      e !== "" && /* @__PURE__ */ t(v, { level: "error", feedback: e })
+      e !== "" && /* @__PURE__ */ r(g, { level: "error", feedback: e })
     ] })
   ] });
-  return l ? _ : /* @__PURE__ */ t("div", { className: h(o["form-input__container"], o[`form-input__container--label-${c}`]), children: _ });
+  return d ? a : /* @__PURE__ */ r("div", { className: l(t["form-input__container"], t[`form-input__container--label-${f}`]), children: a });
 };
 export {
-  Z as FormInput
+  T as FormInput
 };
 //# sourceMappingURL=FormInput.js.map

package/dist/components/FormInput/FormInput.js.map

@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,EAE/B,GAEME,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;"}
+{"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  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: 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  notValid = 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={clsx(styles['form-input__input'], {\n                [styles['not-valid']]: notValid,\n              })}\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","notValid","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,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,EAE/B,GAEME,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAd,uBACEe,GAAA,EAAM,SAAShB,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAa,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,IAAAlB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWO,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3C,CAACA,EAAO,WAAW,CAAC,GAAGZ;AAAA,UAAA,CACxB;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MAEDC,MAAqB,MAAM,gBAAAY,EAACE,KAAY,OAAM,SAAQ,UAAUd,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCf,CAAa,EAAE,CAAC,GAC1G,UAAAW,GACH;AAEJ;"}

package/dist/components/InputField/InputField.d.ts

@@ -12,6 +12,8 @@ export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     id: string;
     /** An element that represents a clear button. */
     clearTrigger?: ReactNode;
+    /** `true` to color border red to show not valid; otherwise, `false`. */
+    notValid?: boolean;
     /** The callback that is invoked when the clear button is triggered. */
     onClear?: () => void;
 }

package/dist/components/InputField/InputField.js

@@ -1,60 +1,63 @@
-import { jsxs as b, jsx as c } from "react/jsx-runtime";
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import { forwardRef as g, useState as x, useRef as B, useEffect as y } from "react";
 import { c as C } from "../../clsx-OuTLNxxd.js";
 import '../../assets/InputField.css';const t = {
-  "input-field-wrapper": "_input-field-wrapper_1tir9_1",
-  "input-field": "_input-field_1tir9_1",
-  "input-field--large": "_input-field--large_1tir9_22",
-  "input-field--small": "_input-field--small_1tir9_26",
-  "input-field--compact": "_input-field--compact_1tir9_30",
-  "input-field--white": "_input-field--white_1tir9_34",
-  "input-field__clear-button": "_input-field__clear-button_1tir9_42"
+  "input-field-wrapper": "_input-field-wrapper_13cvp_1",
+  "input-field": "_input-field_13cvp_1",
+  "input-field--large": "_input-field--large_13cvp_22",
+  "input-field--small": "_input-field--small_13cvp_26",
+  "input-field--compact": "_input-field--compact_13cvp_30",
+  "input-field--white": "_input-field--white_13cvp_34",
+  "input-field--not-valid": "_input-field--not-valid_13cvp_38",
+  "input-field__clear-button": "_input-field__clear-button_13cvp_46"
 }, j = g(
   ({
-    autoComplete: s = "off",
-    id: r,
+    autoComplete: _ = "off",
+    id: p,
     value: e,
-    variant: _,
+    variant: o,
     width: u,
-    type: o = "text",
-    background: p,
+    type: s = "text",
+    background: c,
     clearTrigger: l,
+    notValid: a = !1,
     onClear: f,
-    ...a
+    ...d
   }, i) => {
-    const [d, m] = x(0), n = B(null);
+    const [m, v] = x(0), n = B(null);
     y(() => {
-      n.current && m(n.current.offsetWidth);
+      n.current && v(n.current.offsetWidth);
     }, [e]);
     const h = () => {
       f && i && "current" in i && i.current && (f(), i.current.focus());
     };
     return /* @__PURE__ */ b("div", { className: t["input-field-wrapper"], children: [
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ r(
         "input",
         {
-          ...a,
-          autoComplete: s,
+          ...d,
+          autoComplete: _,
           ref: i,
-          id: r,
+          id: p,
           className: C(t["input-field"], {
-            [t["input-field--large"]]: _ === "large",
+            [t["input-field--large"]]: o === "large",
             [t[`input-field--${u}`]]: u,
-            [t[`input-field--${p}`]]: p
+            [t[`input-field--${c}`]]: c,
+            [t["input-field--not-valid"]]: a
           }),
-          type: o,
+          type: s,
           value: e,
-          style: { paddingRight: e && l ? d : void 0 }
+          style: { paddingRight: e && l ? m : void 0 }
         }
       ),
-      !!e && l && /* @__PURE__ */ c(
+      !!e && l && /* @__PURE__ */ r(
         "button",
         {
           type: "button",
           className: t["input-field__clear-button"],
           onClick: h,
           ref: n,
-          "aria-label": `clear trigger for ${r}`,
+          "aria-label": `clear trigger for ${p}`,
           children: l
         }
       )

package/dist/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {Boolean(value) && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACjBF,EAAoBE,EAAe,QAAQ,WAAW;AAAA,IAE1D,GAAG,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YACvEF,EAAA,GACAE,EAAa,QAAQ,MAAA;AAAA,IAEzB;AAEA,WACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAA;AAAA,QAAU;AAAA,MAAA;AAAA,MAE7E,EAAQT,KAAUK,KACjB,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n  /** The variant to render. */\n  variant?: 'large';\n  /** The width to render. */\n  width?: 'small' | 'compact';\n  /** The type of the input element. */\n  type?: 'text' | 'password' | 'email';\n  /** The background color of the input. InputField is by default transparent. */\n  background?: 'white';\n  /** The id of the input element. */\n  id: string;\n  /** An element that represents a clear button. */\n  clearTrigger?: ReactNode;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n  /** The callback that is invoked when the clear button is triggered. */\n  onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      autoComplete = 'off',\n      id,\n      value,\n      variant,\n      width,\n      type = 'text',\n      background,\n      clearTrigger,\n      notValid = false,\n      onClear,\n      ...restProps\n    }: InputFieldProps,\n    forwardedRef\n  ) => {\n    const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n    const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n      if (clearButtonRef.current) {\n        setClearButtonWidth(clearButtonRef.current.offsetWidth);\n      }\n    }, [value]);\n\n    const handleClearTriggerClick = () => {\n      if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n        onClear();\n        forwardedRef.current.focus();\n      }\n    };\n\n    return (\n      <div className={styles['input-field-wrapper']}>\n        <input\n          {...restProps}\n          autoComplete={autoComplete}\n          ref={forwardedRef}\n          id={id}\n          className={clsx(styles['input-field'], {\n            [styles['input-field--large']]: variant === 'large',\n            [styles[`input-field--${width}`]]: width,\n            [styles[`input-field--${background}`]]: background,\n            [styles[`input-field--not-valid`]]: notValid,\n          })}\n          type={type}\n          value={value}\n          style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n        />\n        {Boolean(value) && clearTrigger && (\n          <button\n            type=\"button\"\n            className={styles['input-field__clear-button']}\n            onClick={handleClearTriggerClick}\n            ref={clearButtonRef}\n            aria-label={`clear trigger for ${id}`}\n          >\n            {clearTrigger}\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","notValid","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;;GA2BaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACjBF,EAAoBE,EAAe,QAAQ,WAAW;AAAA,IAE1D,GAAG,CAACb,CAAK,CAAC;AAEV,UAAMgB,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YACvEF,EAAA,GACAE,EAAa,QAAQ,MAAA;AAAA,IAEzB;AAEA,WACE,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAV;AAAA,UACA,KAAKW;AAAA,UACL,IAAAV;AAAA,UACA,WAAWqB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGjB,MAAY;AAAA,YAC5C,CAACiB,EAAO,gBAAgBhB,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACgB,EAAO,gBAAgBd,CAAU,EAAE,CAAC,GAAGA;AAAA,YACxC,CAACc,EAAO,wBAAwB,CAAC,GAAGZ;AAAA,UAAA,CACrC;AAAA,UACD,MAAAH;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeK,IAAmB,OAAA;AAAA,QAAU;AAAA,MAAA;AAAA,MAE7E,EAAQV,KAAUK,KACjB,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBd,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;"}

package/dist/components/InputField/InputField.stories.js

@@ -17,7 +17,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "react-router";
-import "../../TablePlugin-CeZO4BR1.js";
+import "../../TablePlugin-BLbsvcuu.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../clsx-OuTLNxxd.js";
 import "../../MultiSelectItem-BzBmsKof.js";
-import { M as p } from "../../TablePlugin-CeZO4BR1.js";
+import { M as p } from "../../TablePlugin-BLbsvcuu.js";
 export {
   p as MultiSelect
 };

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,7 +1,7 @@
 import { jsxs as S, jsx as r } from "react/jsx-runtime";
 import { l as d } from "../../index-DvUwfXNb.js";
 import { useState as p } from "react";
-import { M as e } from "../../TablePlugin-CeZO4BR1.js";
+import { M as e } from "../../TablePlugin-BLbsvcuu.js";
 import { Container as M } from "../../storyComponents/Container/Container.js";
 const C = `
   // MultiSelectHeader can be added optionally

package/dist/components/MultiSelect/components/MultiSelectHeader.js

@@ -16,7 +16,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import { a as C } from "../../../TablePlugin-CeZO4BR1.js";
+import { a as C } from "../../../TablePlugin-BLbsvcuu.js";
 import "../../RteEditor/Providers/LanguageProvider.js";
 import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../RteEditor/hooks/components/Flyout.js";

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as l } from "../../TablePlugin-CeZO4BR1.js";
+import { M as l } from "../../TablePlugin-BLbsvcuu.js";
 export {
   l as MultiSelect
 };

package/dist/components/PeriodSelector/PeriodSelector.js

@@ -18,7 +18,7 @@ import "../Input/Input.js";
 import "../InputField/InputField.js";
 import { Label as I } from "../Label/Label.js";
 import "react-router";
-import "../../TablePlugin-CeZO4BR1.js";
+import "../../TablePlugin-BLbsvcuu.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";
@@ -38,27 +38,27 @@ import '../../assets/PeriodSelector.css';const l = {
   "period-selector__selector-row": "_period-selector__selector-row_1txwd_24"
 }, f = 0, h = 1, S = 2, E = 3, j = 7, A = (c) => {
   const n = [];
-  for (let o = 0; o < c.length; o += E)
-    n.push(c.slice(o, o + E));
+  for (let t = 0; t < c.length; t += E)
+    n.push(c.slice(t, t + E));
   return n;
 }, ar = ({
   maxPeriods: c = j,
   defaultValues: n,
-  label: o,
+  label: t,
   labelPosition: b = "top",
   required: _ = !1,
   notValidatedText: p = "",
   onChange: x
 }) => {
-  const g = Array.from({ length: c }, (r, e) => e + 1), m = A(g), w = m.map((r, e) => r.map((t) => ({
-    label: t.toString(),
-    value: t.toString()
+  const g = Array.from({ length: c }, (r, e) => e + 1), m = A(g), w = m.map((r, e) => r.map((o) => ({
+    label: o.toString(),
+    value: o.toString()
   }))), i = v(
     m.map(
-      (r) => r.reduce((e, t) => (n?.includes(t) && e.push(t), e), [])
+      (r) => r.reduce((e, o) => (n?.includes(o) && e.push(o), e), [])
     )
   ), [R, a] = M([]), d = (r) => r[f].length !== 0 || r[h].length !== 0 ? [S] : r[S].length !== 0 ? [f, h] : [], P = (r, e) => {
-    i.current[e] = r.map((t) => Number(t)), a(d(i.current)), x([...i.current.flat()].sort());
+    i.current[e] = r.map((o) => Number(o)), a(d(i.current)), x([...i.current.flat()].sort());
   };
   return N(() => {
     a(d(i.current));
@@ -70,17 +70,17 @@ import '../../assets/PeriodSelector.css';const l = {
         l[`period-selector__container--label-${b}`]
       ),
       children: [
-        o && /* @__PURE__ */ s(I, { htmlFor: "", required: _, children: o }),
+        t && /* @__PURE__ */ s(I, { htmlFor: "", required: _, children: t }),
         /* @__PURE__ */ u("div", { className: l["period-selector__selector-container"], children: [
           /* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children: w.map((r, e) => /* @__PURE__ */ s(
             B,
             {
               checkboxes: r,
-              defaultValues: i.current[e].map((t) => t.toString()),
+              defaultValues: i.current[e].map((o) => o.toString()),
               disableGroup: R.includes(e),
               required: _,
-              onSetValues: (t) => P(t, e),
-              notValidated: p !== ""
+              onSetValues: (o) => P(o, e),
+              notValid: p !== ""
             },
             `group_${e}`
           )) }),

package/dist/components/PeriodSelector/PeriodSelector.js.map

@@ -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, _) => {\n    return periods.map((period) => ({\n      label: period.toString(),\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","period","returnValues","useRef","semester","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
+{"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, _) => {\n    return periods.map((period) => ({\n      label: period.toString(),\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              notValid={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","period","returnValues","useRef","semester","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,GAASJ,MAC1CI,EAAQ,IAAI,CAACC,OAAY;AAAA,IAC9B,OAAOA,EAAO,SAAA;AAAA,IACd,OAAOA,EAAO,SAAA;AAAA,EAAS,EACvB,CACH,GAEKC,IAAeC;AAAA,IACnBL,EAAe;AAAA,MAAI,CAACM,MAClBA,EAAS,OAAO,CAACJ,GAASC,OACpBZ,GAAe,SAASY,CAAM,KAAGD,EAAQ,KAAKC,CAAM,GACjDD,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,IAAAK,EAAa,QAAQL,CAAK,IAAIc,EAAO,IAAI,CAACC,MAAQ,OAAOA,CAAG,CAAC,GAC7DN,EAAoBE,EAAcN,EAAa,OAAO,CAAC,GACvDR,EAAS,CAAC,GAAGQ,EAAa,QAAQ,MAAM,EAAE,MAAM;AAAA,EAClD;AAEA,SAAAW,EAAU,MAAM;AACd,IAAAP,EAAoBE,EAAcN,EAAa,OAAO,CAAC;AAAA,EACzD,GAAG,CAAA,CAAE,GAGH,gBAAAY;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,GAAYf,MAC9B,gBAAAa;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,YAAAD;AAAA,cACA,eAAejB,EAAa,QAAQE,CAAQ,EAAE,IAAI,CAACQ,MAAQA,EAAI,UAAU;AAAA,cACzE,cAAcP,EAAiB,SAASD,CAAQ;AAAA,cAChD,UAAAZ;AAAA,cACA,aAAa,CAAC6B,MAAUX,EAAaW,GAAOjB,CAAQ;AAAA,cACpD,UAAUX,MAAqB;AAAA,YAAA;AAAA,YAN1B,SAASW,CAAQ;AAAA,UAAA,CAQzB,GACH;AAAA,UACCX,MAAqB,MAAM,gBAAAwB,EAACK,KAAY,OAAM,SAAQ,UAAU7B,EAAA,CAAkB;AAAA,QAAA,EAAA,CACrF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/ProgrammeCard/ProgrammeCard.stories.js

@@ -18,7 +18,7 @@ import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
-import "../../TablePlugin-CeZO4BR1.js";
+import "../../TablePlugin-BLbsvcuu.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RadioTabSelector/RadioTabSelector.js

@@ -18,7 +18,7 @@ import "../IconButton/IconButton.js";
 import "../Input/Input.js";
 import "../InputField/InputField.js";
 import "react-router";
-import "../../TablePlugin-CeZO4BR1.js";
+import "../../TablePlugin-BLbsvcuu.js";
 import "../RteEditor/Providers/LanguageProvider.js";
 import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../RteEditor/hooks/components/Flyout.js";

package/dist/components/RteEditor/EditorHeader/EditorHeader.js

@@ -15,7 +15,7 @@ import "../../IconButton/IconButton.js";
 import "../../Input/Input.js";
 import "../../InputField/InputField.js";
 import "react-router";
-import "../../../TablePlugin-CeZO4BR1.js";
+import "../../../TablePlugin-BLbsvcuu.js";
 import "../Providers/LanguageProvider.js";
 import "../Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../hooks/components/Flyout.js";

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js

@@ -4,7 +4,7 @@ import { c as f } from "../../../../clsx-OuTLNxxd.js";
 import { a as _, h, U as p } from "../../../../Lexical.prod-BAE-wnll.js";
 import { useState as l, useEffect as k } from "react";
 import { Icon as I } from "../../../Icon/Icon.js";
-import { s as a } from "../../../../RteEditor.module-CmYZ4MmA.js";
+import { s as a } from "../../../../RteEditor.module-CUi7Vqe8.js";
 import { useTranslation as B } from "../../hooks/useTranslation.js";
 const C = {
   bold: "Bold",

package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js

@@ -18,8 +18,8 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../TablePlugin-CeZO4BR1.js";
-import { s as r } from "../../../../RteEditor.module-CmYZ4MmA.js";
+import "../../../../TablePlugin-BLbsvcuu.js";
+import { s as r } from "../../../../RteEditor.module-CUi7Vqe8.js";
 import { useTranslation as g } from "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "../../hooks/components/Flyout.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { A as I } from "../../../../../TablePlugin-CeZO4BR1.js";
+import { A as I } from "../../../../../TablePlugin-BLbsvcuu.js";
 import "../helpers.js";
 import "../../../../Accordion/Accordion.js";
 import "../../../../Icon/Icon.js";

package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js

@@ -4,7 +4,7 @@ import { c as W } from "../../../../clsx-OuTLNxxd.js";
 import { w as I, P as Y, J as G } from "../../../../LexicalLink.prod-C6Or2Yo6.js";
 import { useRef as a, useState as Q, useEffect as m } from "react";
 import { a0 as X, a as p, q as Z, as as $, h as w, D as tt, a1 as et, n as ot } from "../../../../Lexical.prod-BAE-wnll.js";
-import { A as rt } from "../../../../TablePlugin-CeZO4BR1.js";
+import { A as rt } from "../../../../TablePlugin-BLbsvcuu.js";
 import { ensureHttps as nt } from "./helpers.js";
 import { LinkContextMenu as it } from "./LinkContextMenu/LinkContextMenu.js";
 import { useFlyout as st } from "../../hooks/useFlyout.js";
@@ -24,7 +24,7 @@ import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
 import { setScrollableContainers as B, removeScrollableContainers as lt } from "../../helpers.js";
-import { s as k } from "../../../../RteEditor.module-CmYZ4MmA.js";
+import { s as k } from "../../../../RteEditor.module-CUi7Vqe8.js";
 import { useTranslation as at } from "../../hooks/useTranslation.js";
 import "react-dom";
 import "../../../../index-yEhaxKq-.js";

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js

@@ -5,7 +5,7 @@ import { useState as p, useEffect as k } from "react";
 import { c as K } from "../../../../clsx-OuTLNxxd.js";
 import { as as y, D as O, X as U, a as v, h as D, F as w } from "../../../../Lexical.prod-BAE-wnll.js";
 import { Icon as B } from "../../../Icon/Icon.js";
-import { s as l } from "../../../../RteEditor.module-CmYZ4MmA.js";
+import { s as l } from "../../../../RteEditor.module-CUi7Vqe8.js";
 import { useTranslation as E } from "../../hooks/useTranslation.js";
 const F = {
   bullet: "BulletList",

package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { b as G } from "../../../../TablePlugin-CeZO4BR1.js";
+import { b as G } from "../../../../TablePlugin-BLbsvcuu.js";
 import "../../../Accordion/Accordion.js";
 import "../../../Buttons/Button.js";
 import "../../../Buttons/LinkButton.js";

package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js

@@ -5,7 +5,7 @@ import "../../../../LexicalTable.prod-BBI7yaOy.js";
 import "../../../../Lexical.prod-BAE-wnll.js";
 import "../../../../LexicalUtils.prod-D8DAKg7O.js";
 import "react";
-import { T as L } from "../../../../TablePlugin-CeZO4BR1.js";
+import { T as L } from "../../../../TablePlugin-BLbsvcuu.js";
 import "./helpers.js";
 import "../../nodes/TableWrapperNode/TableWrapperNode.js";
 import "../../hooks/useFlyout.js";
@@ -24,7 +24,7 @@ import "../../../IconButton/IconButton.js";
 import "../../../Input/Input.js";
 import "../../../InputField/InputField.js";
 import "react-router";
-import "../../../../RteEditor.module-CmYZ4MmA.js";
+import "../../../../RteEditor.module-CUi7Vqe8.js";
 import "../../hooks/useTranslation.js";
 import "../LinkPlugin/LinkContextMenu/LinkContextMenu.js";
 import "react-dom";

package/dist/components/RteEditor/Plugins/TablePlugin/index.js

@@ -1,4 +1,4 @@
-import { T as o } from "../../../../TablePlugin-CeZO4BR1.js";
+import { T as o } from "../../../../TablePlugin-BLbsvcuu.js";
 import { TableCellContextMenu as t } from "./TableCellContextMenu/TableCellContextMenu.js";
 export {
   t as TableCellContextMenu,

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js

@@ -7,11 +7,11 @@ import { BlockFormatPlugin as N } from "../BlockFormatPlugin/BlockFormatPlugin.j
 import { ListPlugin as S } from "../ListPlugin/ListPlugin.js";
 import { LinkPlugin as k } from "../LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as x } from "../HistoryPlugin/HistoryPlugin.js";
-import { T as B } from "../../../../TablePlugin-CeZO4BR1.js";
+import { T as B } from "../../../../TablePlugin-BLbsvcuu.js";
 import { TableCellContextMenu as A } from "../TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import "react-dom";
 import "../../../../index-yEhaxKq-.js";
-import { s as z } from "../../../../RteEditor.module-CmYZ4MmA.js";
+import { s as z } from "../../../../RteEditor.module-CUi7Vqe8.js";
 import { setScrollableContainers as b, removeScrollableContainers as K } from "../../helpers.js";
 const W = ({ editorScrollPosition: m }) => {
   const [t] = y(), [r, i] = L(null), d = E(null), u = T(() => {

package/dist/components/RteEditor/Plugins/index.js

@@ -3,7 +3,7 @@ import { BlockFormatPlugin as t } from "./BlockFormatPlugin/BlockFormatPlugin.js
 import { ListPlugin as n } from "./ListPlugin/ListPlugin.js";
 import { LinkPlugin as g, getLinkNodeTag as m } from "./LinkPlugin/LinkPlugin.js";
 import { HistoryPlugin as f } from "./HistoryPlugin/HistoryPlugin.js";
-import { T as u } from "../../../TablePlugin-CeZO4BR1.js";
+import { T as u } from "../../../TablePlugin-BLbsvcuu.js";
 import { TableCellContextMenu as T } from "./TablePlugin/TableCellContextMenu/TableCellContextMenu.js";
 import { T as b } from "../../../TableCellResizerPlugin-HPo4ZkHo.js";
 import { PasteHandlerPlugin as C } from "./PasteHandlerPlugin/PasteHandlerPlugin.js";

package/dist/components/RteEditor/RteEditor.d.ts

@@ -13,16 +13,18 @@ export interface RteEditorProps {
     info?: string;
     /** 'true' the rte field mandatory */
     required?: boolean;
-    /** max number of words 'allowed' but not enforced */
-    maxWords?: number;
-    /** max height in rem default = 20rem*/
-    maxHeightInRem?: `${number}rem`;
+    /** `true` to color border red to show not valid; otherwise, `false`. */
+    notValid?: boolean;
     /** error text to display if required and field is empty */
     notValidatedText?: string;
+    /** max height in rem default = 20rem*/
+    maxHeightInRem?: `${number}rem`;
+    /** max number of words 'allowed' but not enforced */
+    maxWords?: number;
     /** Ref to the Lexical editor instance */
     rteRef?: RefObject<LexicalEditor> | null;
     /** updated output */
     onChange: (content: string) => void;
 }
-export declare const Rte: ({ currentLanguage, initialValue, placeholder, label, info, required, notValidatedText, maxHeightInRem, maxWords, rteRef, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RteEditor: ({ currentLanguage, initialValue, placeholder, label, info, required, notValidatedText, maxWords, rteRef, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Rte: ({ currentLanguage, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxHeightInRem, maxWords, rteRef, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RteEditor: ({ currentLanguage, initialValue, placeholder, label, info, required, notValid, notValidatedText, maxWords, rteRef, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;