@uva-glass/component-library 1.61.3 → 1.62.0

package/dist/assets/FormInput.css

@@ -0,0 +1 @@
+._form-field__container_13mc2_1{display:flex;flex-wrap:wrap;align-items:center}._form-field__container--label-left_13mc2_13{flex-direction:row;gap:1rem;line-height:2.5rem;align-items:flex-start}._form-field__container--label-left_13mc2_13>label:after{line-height:3.6}._form-field__container--label-top_13mc2_35{align-items:flex-start;flex-direction:column;gap:.5rem;line-height:normal}._form-field__input-container_13mc2_49{display:flex;flex-direction:column;flex:1;position:relative;width:100%}._form-field__input_13mc2_49{-webkit-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit;min-height:2.5rem;-moz-appearance:textfield}._form-field__input_13mc2_49::-webkit-outer-spin-button,._form-field__input_13mc2_49::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._form-field__input--error_13mc2_111{border-color:var(--color-red-500)}._form-field__error_13mc2_119{align-items:center;color:var(--color-red-500);display:flex;font-size:var(--font-size-small);gap:.5rem;line-height:normal;margin-top:.5rem;background-color:var(--color-red-50);width:100%;padding:.5rem}

package/dist/components/Buttons/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
-import { fn as l } from "../../index-MQ0yPLdl.js";
+import { fn as l } from "../../index-C9QoqAAt.js";
 import { Button as n } from "./Button.js";
 const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
   title: "Atoms/Buttons/Button",

package/dist/components/Buttons/LinkButton.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
-import { fn as s } from "../../index-MQ0yPLdl.js";
+import { fn as s } from "../../index-C9QoqAAt.js";
 import { BrowserRouter as c } from "react-router-dom";
 import { LinkButton as n } from "./LinkButton.js";
 const d = `

package/dist/components/Buttons/MenuButton.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as l, jsx as n } from "react/jsx-runtime";
-import { fn as c } from "../../index-MQ0yPLdl.js";
+import { fn as c } from "../../index-C9QoqAAt.js";
 import { MenuButton as t } from "./MenuButton.js";
 const d = `
 // Has all LabelHTMLAttributes props available except "className" and "style" 

package/dist/components/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { fn as e } from "../../index-MQ0yPLdl.js";
+import { fn as e } from "../../index-C9QoqAAt.js";
 import { Checkbox as n } from "./Checkbox.js";
 import { FormField as t } from "../FormField/FormField.js";
 import { Label as i } from "../Label/Label.js";

package/dist/components/CheckboxButton/CheckboxButton.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { fn as n } from "../../index-MQ0yPLdl.js";
+import { fn as n } from "../../index-C9QoqAAt.js";
 import { CheckboxButton as o } from "./CheckboxButton.js";
 const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
   title: "Atoms/CheckboxButton",

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { fn as l } from "../../index-MQ0yPLdl.js";
+import { fn as l } from "../../index-C9QoqAAt.js";
 import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
 const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
   title: "Molecules/CheckboxButtonBar",

package/dist/components/CheckboxTree/CheckboxTree.stories.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { fn as m } from "../../index-MQ0yPLdl.js";
+import { fn as m } from "../../index-C9QoqAAt.js";
 import { CheckboxTree as e } from "./CheckboxTree.js";
 const i = [
   {

package/dist/components/Drawer/Drawer.stories.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { OverlayProvider as p } from "@react-aria/overlays";
-import { fn as m } from "../../index-MQ0yPLdl.js";
+import { fn as m } from "../../index-C9QoqAAt.js";
 import { useState as c } from "react";
 import { Drawer as r } from "./Drawer.js";
 import { Button as o } from "../Buttons/Button.js";

package/dist/components/FormInput/FormInput.d.ts

@@ -0,0 +1,17 @@
+export interface FormInputProps {
+    /** The id of the input element. */
+    id: string;
+    /** label text if empthy the label is not renderd */
+    label: string;
+    /** label position `top` or `left`. The default is `top`. */
+    labelPosition?: 'top' | 'left';
+    /** The type of the input element. */
+    type?: 'text' | 'password' | 'email' | 'number';
+    /** Shows red * */
+    required?: boolean;
+    /** error text to display if set */
+    notValidatedText?: string;
+    /** Returns array of selected values as number */
+    onChange: (value: string) => void;
+}
+export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormInput/FormInput.js

@@ -0,0 +1,68 @@
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
+import { c as l } from "../../clsx-OuTLNxxd.js";
+import "react";
+import { Icon as s } from "../Icon/Icon.js";
+import "../Buttons/Button.js";
+import "../Buttons/LinkButton.js";
+import "@react-aria/button";
+import { Label as u } from "../Label/Label.js";
+import "@react-aria/dialog";
+import "@react-aria/focus";
+import "@react-aria/overlays";
+import "../OverlayCloseButton/OverlayCloseButton.js";
+import "../GridRow/GridRow.js";
+import "../IconButton/IconButton.js";
+import "../Input/Input.js";
+import "../InputField/InputField.js";
+import "react-router-dom";
+import "../../TablePlugin-BvwAKpcu.js";
+import "../RteEditor/Providers/LanguageProvider.js";
+import "../RteEditor/hooks/components/Flyout.js";
+import "../SelectListbox/SelectListbox.js";
+import "../SelectListbox/SelectProvider.js";
+import "../Sortable/components/SortableItem.js";
+import "../../SortableProvider-BUsvniX7.js";
+import '../../assets/FormInput.css';const r = {
+  "form-field__container": "_form-field__container_13mc2_1",
+  "form-field__container--label-left": "_form-field__container--label-left_13mc2_13",
+  "form-field__container--label-top": "_form-field__container--label-top_13mc2_35",
+  "form-field__input-container": "_form-field__input-container_13mc2_49",
+  "form-field__input": "_form-field__input_13mc2_49",
+  "form-field__input--error": "_form-field__input--error_13mc2_111",
+  "form-field__error": "_form-field__error_13mc2_119"
+}, J = ({
+  id: _,
+  label: t,
+  labelPosition: p = "top",
+  type: n = "text",
+  required: c = !1,
+  notValidatedText: i = "",
+  onChange: f
+}) => {
+  const a = (o) => ["e", "E", "+", "-"].includes(o.key) && o.preventDefault(), d = (o) => {
+    typeof f == "function" && f(o.target.value);
+  };
+  return /* @__PURE__ */ e("div", { className: l(r["form-field__container"], r[`form-field__container--label-${p}`]), children: [
+    t && /* @__PURE__ */ m(u, { htmlFor: _, required: c, children: t }),
+    /* @__PURE__ */ e("div", { className: r["form-field__input-container"], children: [
+      /* @__PURE__ */ m(
+        "input",
+        {
+          id: _,
+          type: n,
+          ...n === "number" && { onKeyDown: a },
+          onChange: d,
+          className: l(r["form-field__input"], [i !== "" && r["form-field__input--error"]])
+        }
+      ),
+      i !== "" && /* @__PURE__ */ e("div", { className: r["form-field__error"], children: [
+        /* @__PURE__ */ m(s, { name: "ExclamationTriangleFill", size: 24 }),
+        i
+      ] })
+    ] })
+  ] });
+};
+export {
+  J as FormInput
+};
+//# sourceMappingURL=FormInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\r\n\r\nimport styles from './FormInput.module.css';\r\n\r\nimport { Icon, Label } from 'components';\r\n\r\nexport interface FormInputProps {\r\n  /** The id of the input element. */\r\n  id: string;\r\n  /** label text if empthy the label is not renderd */\r\n  label: string;\r\n  /** label position `top` or `left`. The default is `top`. */\r\n  labelPosition?: 'top' | 'left';\r\n  /** The type of the input element. */\r\n  type?: 'text' | 'password' | 'email' | 'number';\r\n  /** Shows red * */\r\n  required?: boolean;\r\n  /** error text to display if set */\r\n  notValidatedText?: string;\r\n  /** Returns array of selected values as number */\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nexport const FormInput = ({\r\n  id,\r\n  label,\r\n  labelPosition = 'top',\r\n  type = 'text',\r\n  required = false,\r\n  notValidatedText = '',\r\n  onChange,\r\n}: FormInputProps) => {\r\n  const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\r\n    ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\r\n\r\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (typeof onChange === 'function') {\r\n      onChange(event.target.value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\r\n      {label && (\r\n        <Label htmlFor={id} required={required}>\r\n          {label}\r\n        </Label>\r\n      )}\r\n\r\n      <div className={styles['form-field__input-container']}>\r\n        <input\r\n          id={id}\r\n          type={type}\r\n          {...(type === 'number' && { onKeyDown: blockInvalidChar })}\r\n          onChange={handleChange}\r\n          className={clsx(styles['form-field__input'], [notValidatedText !== '' && styles['form-field__input--error']])}\r\n        />\r\n        {notValidatedText !== '' && (\r\n          <div className={styles['form-field__error']}>\r\n            <Icon name=\"ExclamationTriangleFill\" size={24} />\r\n            {notValidatedText}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuBaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAe,GAE7DC,IAAe,CAACD,MAA+C;AAC/D,IAAA,OAAOF,KAAa,cACbA,EAAAE,EAAM,OAAO,KAAK;AAAA,EAC7B;AAGF,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAKC,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCV,CAAa,EAAE,CAAC,GAC1G,UAAA;AAAA,IAAAD,KACE,gBAAAY,EAAAC,GAAA,EAAM,SAASd,GAAI,UAAAI,GACjB,UACHH,GAAA;AAAA,IAGD,gBAAAS,EAAA,OAAA,EAAI,WAAWE,EAAO,6BAA6B,GAClD,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAb;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWI,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWE,EAAKC,EAAO,mBAAmB,GAAG,CAACP,MAAqB,MAAMO,EAAO,0BAA0B,CAAC,CAAC;AAAA,QAAA;AAAA,MAC9G;AAAA,MACCP,MAAqB,MACpB,gBAAAK,EAAC,SAAI,WAAWE,EAAO,mBAAmB,GACxC,UAAA;AAAA,QAAA,gBAAAC,EAACE,GAAK,EAAA,MAAK,2BAA0B,MAAM,IAAI;AAAA,QAC9CV;AAAA,MAAA,GACH;AAAA,IAAA,GAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/FormInput/FormInput.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { FormInputProps } from './FormInput';
+declare const _default: Meta<FormInputProps>;
+export default _default;
+export declare const FromInputExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, FormInputProps>;

package/dist/components/FormInput/FormInput.stories.js

@@ -0,0 +1,28 @@
+import { jsx as n } from "react/jsx-runtime";
+import { fn as a } from "../../index-C9QoqAAt.js";
+import { FormInput as t } from "./FormInput.js";
+const o = `
+// Has all HTMLInputElement props available except "className" and "style" 
+<FormInput  />
+`, i = {
+  title: "Organisms/FormInput",
+  component: t,
+  argTypes: {},
+  args: {},
+  parameters: {
+    inspectComponent: t,
+    codeString: o
+  }
+}, r = (e) => /* @__PURE__ */ n(t, { ...e }), s = r.bind({});
+s.args = {
+  id: "vak",
+  label: "Vaknaam (NL)",
+  labelPosition: "left",
+  required: !0,
+  onChange: a()
+};
+export {
+  s as FromInputExample,
+  i as default
+};
+//# sourceMappingURL=FormInput.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.stories.js","sources":["../../../src/components/FormInput/FormInput.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { FormInputProps } from './FormInput';\r\n\r\nimport { FormInput } from './FormInput';\r\n\r\nconst codeString = `\r\n// Has all HTMLInputElement props available except \"className\" and \"style\" \r\n<FormInput  />\r\n`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Organisms/FormInput',\r\n  component: FormInput,\r\n  argTypes: {},\r\n  args: {},\r\n  parameters: {\r\n    inspectComponent: FormInput,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<FormInputProps>;\r\n\r\nconst Template: StoryFn<FormInputProps> = (args) => {\r\n  return <FormInput {...args} />;\r\n};\r\n\r\nexport const FromInputExample = Template.bind({});\r\n\r\nFromInputExample.args = {\r\n  id: 'vak',\r\n  label: 'Vaknaam (NL)',\r\n  labelPosition: 'left',\r\n  required: true,\r\n  onChange: fn(),\r\n};\r\n"],"names":["codeString","FormInput_stories","FormInput","Template","args","jsx","FromInputExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA;AAAA,GAMJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAoC,CAACC,MAClC,gBAAAC,EAACH,GAAW,EAAA,GAAGE,EAAM,CAAA,GAGjBE,IAAmBH,EAAS,KAAK,EAAE;AAEhDG,EAAiB,OAAO;AAAA,EACtB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAUC,EAAG;AACf;"}

package/dist/components/FormInput/index.d.ts

@@ -0,0 +1 @@
+export * from './FormInput';

package/dist/components/FormInput/index.js

@@ -0,0 +1,5 @@
+import { FormInput as m } from "./FormInput.js";
+export {
+  m as FormInput
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}