@uva-glass/component-library 1.64.7 → 1.65.0

package/dist/assets/Label.css

@@ -1 +1 @@
-._label_ok9qo_1{font-weight:var(--semibold);text-align:left}._label--required_ok9qo_6:after{color:var(--color-red-500);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._label--unset-font-weight_ok9qo_14{font-weight:unset}
+._label_16gis_1{font-weight:var(--semibold);text-align:left}._label--required_16gis_6:after{color:var(--color-red-500);content:"★";font-size:.5rem;margin-left:.25rem;vertical-align:top}._label--unset-font-weight_16gis_14{font-weight:unset}._label--align-right_16gis_18{text-align:right}

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

@@ -13,5 +13,7 @@ export interface FormInputProps {
     notValidatedText?: string;
     /** Returns array of selected values as number */
     onChange: (value: string) => void;
+    /** Determines if the container wrapper is rendered. */
+    noContainer?: boolean;
 }
-export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormInput: ({ id, label, labelPosition, type, required, notValidatedText, onChange, noContainer, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormInput/FormInput.js

@@ -1,15 +1,15 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../clsx-OuTLNxxd.js";
+import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { c } from "../../clsx-OuTLNxxd.js";
 import "react";
 import "../Buttons/Button.js";
 import "../Buttons/LinkButton.js";
 import "@react-aria/button";
-import { Label as s } from "../Label/Label.js";
+import { Label as h } from "../Label/Label.js";
 import "@react-aria/dialog";
 import "@react-aria/focus";
 import "@react-aria/overlays";
 import "../OverlayCloseButton/OverlayCloseButton.js";
-import { FeedbackBox as u } from "../FeedbackBox/FeedbackBox.js";
+import { FeedbackBox as j } from "../FeedbackBox/FeedbackBox.js";
 import "../GridRow/GridRow.js";
 import "../IconButton/IconButton.js";
 import "../Input/Input.js";
@@ -32,38 +32,39 @@ import '../../assets/FormInput.css';const r = {
   "form-field__input-container": "_form-field__input-container_c9jem_34",
   "form-field__input": "_form-field__input_c9jem_25",
   "form-field__input--error": "_form-field__input--error_c9jem_60"
-}, O = ({
+}, Q = ({
   id: t,
   label: m,
   labelPosition: p = "top",
-  type: _ = "text",
-  required: c = !1,
+  type: n = "text",
+  required: a = !1,
   notValidatedText: i = "",
-  onChange: n
+  onChange: _,
+  noContainer: d = !1
 }) => {
-  const a = (e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault(), d = (e) => {
-    typeof n == "function" && n(e.target.value);
-  };
-  return /* @__PURE__ */ f("div", { className: l(r["form-field__container"], r[`form-field__container--label-${p}`]), children: [
-    m && /* @__PURE__ */ o(s, { htmlFor: t, required: c, children: m }),
-    /* @__PURE__ */ f("div", { className: r["form-field__input-feedback-container"], children: [
-      /* @__PURE__ */ o("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ o(
+  const s = (o) => ["e", "E", "+", "-"].includes(o.key) && o.preventDefault(), u = (o) => {
+    typeof _ == "function" && _(o.target.value);
+  }, f = /* @__PURE__ */ l(b, { children: [
+    m && /* @__PURE__ */ e(h, { htmlFor: t, required: a, alignRight: !0, children: m }),
+    /* @__PURE__ */ l("div", { className: r["form-field__input-feedback-container"], children: [
+      /* @__PURE__ */ e("div", { className: r["form-field__input-container"], children: /* @__PURE__ */ e(
         "input",
         {
           id: t,
-          type: _,
-          ..._ === "number" && { onKeyDown: a },
-          onChange: d,
-          className: l(r["form-field__input"], [
+          type: n,
+          ...n === "number" && { onKeyDown: s },
+          onChange: u,
+          className: c(r["form-field__input"], [
             i !== "" && r["form-field__input--error"]
           ])
         }
       ) }),
-      i !== "" && /* @__PURE__ */ o(u, { level: "error", feedback: i })
+      i !== "" && /* @__PURE__ */ e(j, { level: "error", feedback: i })
     ] })
   ] });
+  return d ? f : /* @__PURE__ */ e("div", { className: c(r["form-field__container"], r[`form-field__container--label-${p}`]), children: f });
 };
 export {
-  O as FormInput
+  Q 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 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}\n\nexport const FormInput = ({\n  id,\n  label,\n  labelPosition = 'top',\n  type = 'text',\n  required = false,\n  notValidatedText = '',\n  onChange,\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  return (\n    <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n      {label && (\n        <Label htmlFor={id} required={required}>\n          {label}\n        </Label>\n      )}\n\n      <div className={styles['form-field__input-feedback-container']}>\n        <div className={styles['form-field__input-container']}>\n          <input\n            id={id}\n            type={type}\n            {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n            onChange={handleChange}\n            className={clsx(styles['form-field__input'], [\n              notValidatedText !== '' && styles['form-field__input--error'],\n            ])}\n          />\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","blockInvalidChar","event","handleChange","jsxs","clsx","styles","jsx","Label","FeedbackBox"],"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,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,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;AAAA,YAC3CP,MAAqB,MAAMO,EAAO,0BAA0B;AAAA,UAAA,CAC7D;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCP,MAAqB,MAAM,gBAAAQ,EAACE,KAAY,OAAM,SAAQ,UAAUV,GAAkB;AAAA,IAAA,GACrF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import clsx from 'clsx';\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}\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}: 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-field__input-feedback-container']}>\n        <div className={styles['form-field__input-container']}>\n          <input\n            id={id}\n            type={type}\n            {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n            onChange={handleChange}\n            className={clsx(styles['form-field__input'], [\n              notValidatedText !== '' && styles['form-field__input--error'],\n            ])}\n          />\n        </div>\n        {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n      </div>\n    </>\n  );\n\n  return noContainer ? (\n    componentContent\n  ) : (\n    <div className={clsx(styles['form-field__container'], styles[`form-field__container--label-${labelPosition}`])}>\n      {componentContent}\n    </div>\n  );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","clsx","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBaA,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;AAChB,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,OAAOH,KAAa,cACbA,EAAAG,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IAED,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAZ,uBACEa,GAAM,EAAA,SAASd,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UACHH,EAAA,CAAA;AAAA,IAGD,gBAAAW,EAAA,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC3D,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAhB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWK,EAAiB;AAAA,UACxD,UAAUE;AAAA,UACV,WAAWO,EAAKF,EAAO,mBAAmB,GAAG;AAAA,YAC3CV,MAAqB,MAAMU,EAAO,0BAA0B;AAAA,UAAA,CAC7D;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACCV,MAAqB,MAAM,gBAAAW,EAACE,KAAY,OAAM,SAAQ,UAAUb,GAAkB;AAAA,IAAA,GACrF;AAAA,EACF,EAAA,CAAA;AAGF,SAAOE,IACLI,IAEC,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAKF,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCb,CAAa,EAAE,CAAC,GAC1G,UACHS,EAAA,CAAA;AAEJ;"}

package/dist/components/Label/Label.d.ts

@@ -6,6 +6,8 @@ export interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>,
     noFontWeight?: boolean;
     /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
     required?: boolean;
+    /** `true` to align text right; otherwise, `false`. */
+    alignRight?: boolean;
 }
 /** Represents a component that renders a label for an input element. */
-export declare const Label: ({ children, htmlFor, noFontWeight, required, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ children, htmlFor, noFontWeight, required, alignRight, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.js

@@ -1,19 +1,21 @@
-import { jsx as b } from "react/jsx-runtime";
-import { c as r } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Label.css';const n = "_label_ok9qo_1", e = {
+import { jsx as r } from "react/jsx-runtime";
+import { c as g } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Label.css';const n = "_label_16gis_1", l = {
   label: n,
-  "label--required": "_label--required_ok9qo_6",
-  "label--unset-font-weight": "_label--unset-font-weight_ok9qo_14"
-}, c = ({ children: l, htmlFor: o, noFontWeight: a, required: t = !1, ...s }) => /* @__PURE__ */ b(
+  "label--required": "_label--required_16gis_6",
+  "label--unset-font-weight": "_label--unset-font-weight_16gis_14",
+  "label--align-right": "_label--align-right_16gis_18"
+}, c = ({ children: e, htmlFor: a, noFontWeight: t, required: i = !1, alignRight: s, ...b }) => /* @__PURE__ */ r(
   "label",
   {
-    ...s,
-    htmlFor: o,
-    className: r(e.label, {
-      [e["label--unset-font-weight"]]: a,
-      [e["label--required"]]: t
+    ...b,
+    htmlFor: a,
+    className: g(l.label, {
+      [l["label--unset-font-weight"]]: t,
+      [l["label--required"]]: i,
+      [l["label--align-right"]]: s
     }),
-    children: l
+    children: e
   }
 );
 export {

package/dist/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  /** The id of the element for which the label is intended. */\n  htmlFor: string;\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noFontWeight?: boolean;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n      [styles['label--required']]: required,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","required","restProps","jsx","clsx","styles"],"mappings":";;;;;;GAgBaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,UAAAC,IAAW,IAAO,GAAGC,EAAA,MAC5E,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAH;AAAA,IACA,WAAWK,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGL;AAAA,MACtC,CAACK,EAAO,iBAAiB,CAAC,GAAGJ;AAAA,IAAA,CAC9B;AAAA,IAEA,UAAAH;AAAA,EAAA;AACH;"}
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { LabelHTMLAttributes } from 'react';\n\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> {\n  /** The id of the element for which the label is intended. */\n  htmlFor: string;\n  /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n  noFontWeight?: boolean;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to align text right; otherwise, `false`. */\n  alignRight?: boolean;\n}\n\n/** Represents a component that renders a label for an input element. */\nexport const Label = ({ children, htmlFor, noFontWeight, required = false, alignRight, ...restProps }: LabelProps) => (\n  <label\n    {...restProps}\n    htmlFor={htmlFor}\n    className={clsx(styles['label'], {\n      [styles['label--unset-font-weight']]: noFontWeight,\n      [styles['label--required']]: required,\n      [styles['label--align-right']]: alignRight,\n    })}\n  >\n    {children}\n  </label>\n);\n"],"names":["Label","children","htmlFor","noFontWeight","required","alignRight","restProps","jsx","clsx","styles"],"mappings":";;;;;;;GAkBaA,IAAQ,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,cAAAC,GAAc,UAAAC,IAAW,IAAO,YAAAC,GAAY,GAAGC,EAAA,MACxF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,SAAAJ;AAAA,IACA,WAAWM,EAAKC,EAAO,OAAU;AAAA,MAC/B,CAACA,EAAO,0BAA0B,CAAC,GAAGN;AAAA,MACtC,CAACM,EAAO,iBAAiB,CAAC,GAAGL;AAAA,MAC7B,CAACK,EAAO,oBAAoB,CAAC,GAAGJ;AAAA,IAAA,CACjC;AAAA,IAEA,UAAAJ;AAAA,EAAA;AACH;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.64.7",
+  "version": "1.65.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",