@golemui/gui-react 0.0.2

package/Currency-Bj2yx0JY.js

@@ -0,0 +1,36 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useInputWidget as q } from "@golemui/react";
+import { useCallback as I } from "react";
+/* empty css                */
+function z(t) {
+  const o = t.widget, { uid: c, errors: r, value: a, isTouched: s, templateData: e, onValueChanged: i, onBlur: l } = q(o), d = I(
+    (F) => i(F.nativeEvent.detail.value),
+    [i]
+  ), u = e.label, m = e.hint, g = e.placeholder, p = e.currency, h = e.step, y = e.maximumFractionDigits, v = e.minimumFractionDigits, b = e.icon, D = e.disabled, f = e.readonly, x = e.validator?.required, C = e.lang;
+  return /* @__PURE__ */ n("div", { className: "gui-currency", style: { flex: e.size }, children: /* @__PURE__ */ n(
+    "gui-currency",
+    {
+      uid: c,
+      label: u,
+      hint: m,
+      errors: r,
+      touched: s,
+      required: x,
+      disabled: D,
+      readOnly: f,
+      value: a,
+      currency: p,
+      step: h,
+      maximumFractionDigits: y,
+      minimumFractionDigits: v,
+      icon: b,
+      placeholder: g ?? void 0,
+      localeId: C,
+      onInput: d,
+      onBlur: l
+    }
+  ) });
+}
+export {
+  z as Currency
+};

package/DateInput-B4S5ssKR.js

@@ -0,0 +1,48 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useInputWidget as x } from "@golemui/react";
+import { useCallback as D } from "react";
+/* empty css                */
+function H(c) {
+  const u = c.widget, {
+    uid: g,
+    errors: m,
+    value: v,
+    isTouched: h,
+    templateData: e,
+    onValueChanged: a,
+    onBlur: n,
+    injectValidationIssues: r
+  } = x(u), p = D(
+    (o) => {
+      const t = o, s = (i) => {
+        r(null), a(i.detail.value);
+      }, l = (i) => {
+        r([i.detail.message]);
+      };
+      return o && (t.addEventListener("change", s), t.addEventListener("blur", n), t.addEventListener("inputError", l)), () => {
+        t.removeEventListener("change", s), t.removeEventListener("blur", n), t.removeEventListener("inputError", l);
+      };
+    },
+    [a, n, r]
+  ), b = e.label, f = e.hint, E = e.icon, L = e.disabled, y = e.readonly, I = e.validator?.required, q = e.lang;
+  return /* @__PURE__ */ d("div", { className: "gui-date", style: { flex: e.size }, children: /* @__PURE__ */ d(
+    "gui-date",
+    {
+      ref: p,
+      uid: g,
+      label: b,
+      hint: f,
+      errors: m,
+      touched: h,
+      required: I,
+      disabled: L,
+      readOnly: y,
+      value: v,
+      icon: E,
+      localeId: q
+    }
+  ) });
+}
+export {
+  H as DateInput
+};

package/DatePicker-C1Qiridi.js

@@ -0,0 +1,130 @@
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+import { useInputWidget as z } from "@golemui/react";
+import { useState as B, useRef as F, useCallback as R, useEffect as K } from "react";
+/* empty css                */
+function S({ errors: g, uid: c }) {
+  return /* @__PURE__ */ i("ul", { className: "gui-validator", id: `${c}_errors`, "data-cy": `${c}_validator-errors`, children: g.map((r, s) => /* @__PURE__ */ i(
+    "li",
+    {
+      className: "gui-validator__error",
+      role: "alert",
+      "data-cy": `${c}_validator-error`,
+      children: r
+    },
+    s
+  )) });
+}
+function J(g) {
+  const c = g.widget, {
+    uid: r,
+    errors: s,
+    value: I,
+    isTouched: p,
+    templateData: e,
+    onValueChanged: m,
+    onBlur: d,
+    injectValidationIssues: u
+  } = z(c), [h, v] = B(!1), b = F(null), E = F(null), _ = R(
+    (t) => {
+      const n = t, a = (y) => {
+        u(null), m(y.detail.value);
+      }, o = (y) => {
+        u([y.detail.message]);
+      }, l = () => {
+        v(!0);
+      };
+      return b.current = t, t && (n.addEventListener("change", a), n.addEventListener("focus", l), n.addEventListener("blur", d), n.addEventListener("inputError", o)), () => {
+        n.removeEventListener("change", a), n.removeEventListener("focus", l), n.removeEventListener("blur", d), n.removeEventListener("inputError", o);
+      };
+    },
+    [m, d, u]
+  ), D = R(
+    (t) => {
+      const n = t, a = (l) => {
+        u(null), m(l.detail.value);
+      }, o = (l) => {
+        d(), v(!1);
+      };
+      return E.current = t, t && (n.addEventListener("blur", o), n.addEventListener("change", a)), () => {
+        n.addEventListener("blur", o), n.addEventListener("change", a);
+      };
+    },
+    [m, u, d]
+  );
+  K(() => {
+    const t = (n) => {
+      if (!h) return;
+      const a = n.composedPath(), o = b.current && a.includes(b.current), l = E.current && a.includes(E.current);
+      !o && !l && v(!1);
+    };
+    return document.addEventListener("click", t), () => {
+      document.removeEventListener("click", t);
+    };
+  }, [h]);
+  const C = () => {
+    h || v(!0);
+  }, f = e.hint, N = e.icon, H = e.prevMonthIcon, $ = e.nextMonthIcon, q = e.prevMonthAriaLabel, A = e.nextMonthAriaLabel, O = e.dayFormat, j = e.weekdayFormat, P = e.monthFormat, V = p && s && s.length > 0, x = e.disabled, w = e.readonly, L = e.validator?.required, M = e.lang;
+  return /* @__PURE__ */ k("div", { className: "gui-date-picker", style: { flex: e.size }, children: [
+    e.label && /* @__PURE__ */ k("label", { className: "gui-label", htmlFor: r, "data-cy": `${r}_label`, children: [
+      e.label + (L ? " *" : ""),
+      f && /* @__PURE__ */ i("div", { className: "gui-widget-hint", id: `${r}_hint`, children: f })
+    ] }),
+    /* @__PURE__ */ k(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        className: "gui-widget",
+        onClick: C,
+        onKeyUp: (t) => {
+          (t.key === "Enter" || t.key === " ") && C();
+        },
+        "aria-expanded": h,
+        children: [
+          /* @__PURE__ */ i(
+            "gui-date",
+            {
+              ref: _,
+              uid: r,
+              hint: f,
+              showErrors: !1,
+              errors: s,
+              touched: p,
+              required: L,
+              disabled: x,
+              readOnly: w,
+              value: I,
+              icon: N,
+              localeId: M
+            }
+          ),
+          h && /* @__PURE__ */ i(
+            "gui-calendar",
+            {
+              ref: D,
+              uid: r,
+              hint: f,
+              touched: p,
+              required: L,
+              disabled: x,
+              readOnly: w,
+              value: I,
+              prevMonthIcon: H,
+              nextMonthIcon: $,
+              prevMonthAriaLabel: q,
+              nextMonthAriaLabel: A,
+              dayFormat: O,
+              weekdayFormat: j,
+              monthFormat: P,
+              localeId: M
+            }
+          )
+        ]
+      }
+    ),
+    V && /* @__PURE__ */ i(S, { errors: s, uid: r })
+  ] });
+}
+export {
+  J as DatePicker
+};

package/DefaultListItemRenderer-lNc9Kk7x.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+function a({
+  template: i,
+  selected: e,
+  disabled: t,
+  focused: s
+}) {
+  const l = [
+    "gui-list__item",
+    t ? "gui-list__item-disabled" : "",
+    e ? "gui-list__item-selected" : "",
+    s ? "gui-list__item-focused" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { role: "option", className: l, "aria-selected": e, children: i });
+}
+export {
+  a as D
+};

package/Dropdown-Dd50Psea.js

@@ -0,0 +1,196 @@
+import { jsxs as K, jsx as h } from "react/jsx-runtime";
+import { useInputWidget as le, useDebounceCallback as ce, useItemRenderer as ae } from "@golemui/react";
+import { useState as m, useRef as O, useMemo as oe, useCallback as x, useEffect as k } from "react";
+import { D as de } from "./DefaultListItemRenderer-lNc9Kk7x.js";
+function ve(P) {
+  const p = P.widget, { uid: o, errors: _, value: C, isTouched: w, templateData: t, onFilter: F, onValueChanged: E, onBlur: j } = le(p), [I, z] = m({ start: 0, end: 10 }), [b, M] = m([]), [U, B] = m([]), [W, H] = m(-1), [J, g] = m(!1), [y, d] = m(!1), [D, N] = m(void 0), r = O(null), c = O(null), R = O(null), Q = oe(() => b.slice(I.start, I.end), [b, I]), S = x(() => {
+    j(), d(!1), g(!1);
+  }, [j]), v = x(
+    (e) => {
+      if (E(e), c.current) {
+        const s = (t.items || []).find(
+          (i) => t.valueField ? i[t.valueField] === e : i === e
+        );
+        if (s) {
+          const i = t.valueField ? s[t.valueField] : s;
+          c.current.value = String(i);
+        } else e || (c.current.value = "");
+      }
+      d(!1), g(!1);
+    },
+    [E, t]
+  ), X = x(
+    (e, n) => {
+      t.readonly || (v(e.value), F(""), H(n), N(e), g(!1), d(!1), r.current && r.current.focusItemAtIndex(n));
+    },
+    [v, F, t.readonly]
+  );
+  k(() => {
+    const e = r.current;
+    if (!e) return;
+    const n = (a) => {
+      const { startIndex: l, endIndex: f } = a.detail;
+      z({ start: l, end: f });
+    }, s = (a) => {
+      const l = a.detail;
+      M(l ? [...l] : []);
+    }, i = (a) => {
+      const l = a.detail.index;
+      H(l);
+    }, u = (a) => {
+      const l = a.detail.value;
+      v(l), N(b.find((f) => f.value === l)), g(!1), d(!1);
+    };
+    return e.addEventListener("gui-range-change", n), e.addEventListener("gui-update-items", s), e.addEventListener("gui-focus-change", i), e.addEventListener("change", u), () => {
+      e.removeEventListener("gui-range-change", n), e.removeEventListener("gui-update-items", s), e.removeEventListener("gui-focus-change", i), e.removeEventListener("change", u);
+    };
+  }, [v, b, E]), k(() => {
+    const e = (n) => {
+      if (!y) return;
+      const s = n.target, i = c.current && c.current.contains(s), u = r.current && r.current.contains(s);
+      !i && !u && S();
+    };
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, [S, y]), k(() => {
+    const e = t.labelField ?? t.valueField, n = e ? D?.template[e] : D?.template;
+    c.current.value = n ?? "";
+  }, [D, t.labelField, t.valueField]), k(() => {
+    R.current && c.current && r.current && (R.current.targetElement = [c.current, r.current]);
+  }, []);
+  const Y = async (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), d(!0), setTimeout(() => {
+          r.current && (r.current.focus(), r.current.scrollToSelectedIndex());
+        }, 0);
+        break;
+      case "Enter":
+        c.current?.value || v(null);
+        break;
+    }
+  }, Z = x(
+    (e) => {
+      const n = !!p.on?.filter;
+      if (F(e), e && !n) {
+        g(!0), d(!0);
+        const s = t.searchFields ?? [t.labelField, t.valueField].filter(
+          (l) => !!l
+        ), i = s.length > 0, a = (t.items || []).filter((l) => {
+          const f = Object.keys(l);
+          if (!f.length)
+            return l.toString().toLowerCase().includes(e.toLowerCase());
+          const G = (q, re) => q || l[re].toString().toLowerCase().includes(e.toLowerCase());
+          return i ? f.filter((q) => s.includes(q)).reduce(G, !1) : f.reduce(G, !1);
+        });
+        B(a);
+      } else
+        g(!1), B([...t.items || []]);
+    },
+    [
+      p.on?.filter,
+      F,
+      t.items,
+      t.labelField,
+      t.searchFields,
+      t.valueField
+    ]
+  ), ee = ce(Z, t.inputDebounce ?? 500), te = (e) => {
+    const n = e.target.value;
+    y || d(!0), ee(n);
+  }, V = () => {
+    d(!0), setTimeout(() => {
+      r.current && r.current.scrollToSelectedIndex();
+    }, 0);
+  }, A = (e) => {
+    const n = e.relatedTarget, s = c.current && c.current.contains(n), i = r.current && r.current.contains(n);
+    s || i || S();
+  }, ne = ae(t.itemRenderer) || de, se = t.label, T = t.validator?.required, $ = t.disabled, L = t.readonly, ie = !!p.on?.filter;
+  return /* @__PURE__ */ K("div", { className: "gui-dropdown", style: { flex: t.size }, children: [
+    /* @__PURE__ */ h(
+      "gui-label",
+      {
+        ref: R,
+        uid: o,
+        label: se,
+        hint: t.hint,
+        errors: _,
+        touched: w,
+        required: T,
+        native: !1
+      }
+    ),
+    /* @__PURE__ */ K("div", { className: "gui-widget", children: [
+      /* @__PURE__ */ h(
+        "input",
+        {
+          ref: c,
+          type: "text",
+          id: o,
+          "data-cy": `${o}_textinput`,
+          defaultValue: C ?? "",
+          required: T,
+          disabled: $,
+          readOnly: L,
+          placeholder: t.placeholder ?? "",
+          onKeyDown: Y,
+          onInput: te,
+          onFocus: V,
+          onBlur: A,
+          "aria-labelledby": t.label ? `${o}_label` : void 0,
+          "aria-describedby": t.hint ? `${o}_hint` : void 0
+        }
+      ),
+      /* @__PURE__ */ h(
+        "gui-list",
+        {
+          ref: r,
+          id: `${o}-list`,
+          uid: o,
+          value: C ?? "",
+          valueField: t.valueField,
+          items: J && !ie ? U : t.items,
+          itemHeight: t.itemHeight,
+          height: t.height,
+          required: T,
+          touched: w,
+          disabled: $ || L,
+          readOnly: L,
+          hidden: !y,
+          onFocus: V,
+          onBlur: A,
+          children: Q.map((e, n) => {
+            const s = I.start + n, i = C === e.value, u = W === s;
+            return /* @__PURE__ */ h(
+              "div",
+              {
+                role: "option",
+                tabIndex: -1,
+                className: "gui-list__item-wrapper",
+                id: `${o}-item-${s}`,
+                style: { height: `${t.itemHeight || 40}px` },
+                "aria-selected": i,
+                onClick: () => X(e, s),
+                children: /* @__PURE__ */ h(
+                  ne,
+                  {
+                    template: e.template,
+                    value: e.value,
+                    index: s,
+                    selected: i,
+                    disabled: $ || L,
+                    focused: u
+                  }
+                )
+              },
+              s
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h("gui-errors", { errors: _, touched: w })
+  ] });
+}
+export {
+  ve as Dropdown
+};

package/Flex-DPIzOItG.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useLayoutWidget as s, WidgetRenderer as c } from "@golemui/react";
+import { useCallback as u } from "react";
+/* empty css                */
+function _(n) {
+  const l = n.widget, { uid: o, children: t, templateData: i } = s(l), d = u(() => t.map((r) => /* @__PURE__ */ e(c, { widget: r }, r.uid)), [t]), a = i.direction === "horizontal" ? "gui-flex__widget--horizontal" : "", g = i.align ? `gui-flex__widget--align-${i.align}` : "";
+  return /* @__PURE__ */ e("div", { className: "gui-flex", style: { flex: i.size }, children: /* @__PURE__ */ e("div", { className: `gui-flex__widget ${a} ${g}`, id: o, children: d() }) });
+}
+export {
+  _ as Flex
+};

package/List-CLplkkLa.js

@@ -0,0 +1,103 @@
+import { jsxs as $, jsx as d } from "react/jsx-runtime";
+import { useCallback as E, useRef as j, useState as f, useMemo as O, useEffect as S } from "react";
+import { useInputWidget as _, useItemRenderer as z } from "@golemui/react";
+import { D as A } from "./DefaultListItemRenderer-lNc9Kk7x.js";
+function G(R) {
+  const C = R.widget, { uid: u, errors: p, value: I, isTouched: g, templateData: t, onValueChanged: c, onBlur: b } = _(C), y = E(
+    (e) => {
+      i.current && e.relatedTarget && i.current.contains(e.relatedTarget) || b();
+    },
+    [b]
+  ), [o, F] = f({ start: 0, end: 10 }), [h, q] = f([]), [w, x] = f(-1), i = j(null), D = O(() => (h.length > 0 ? h : t.items || []).slice(o.start, o.end), [h, t.items, o]);
+  S(() => {
+    const e = i.current;
+    if (!e) return;
+    const n = (a) => {
+      const { startIndex: s, endIndex: T } = a.detail;
+      F({ start: s, end: T });
+    }, r = (a) => {
+      const s = a.detail;
+      q(s ? [...s] : []);
+    }, l = (a) => {
+      const s = a.detail.index;
+      x(s);
+    }, m = (a) => {
+      const s = a.detail.value;
+      c(s);
+    };
+    return e.addEventListener("change", m), e.addEventListener("gui-update-items", r), e.addEventListener("gui-range-change", n), e.addEventListener("gui-focus-change", l), () => {
+      e.removeEventListener("change", m), e.removeEventListener("gui-update-items", r), e.removeEventListener("gui-range-change", n), e.removeEventListener("gui-focus-change", l);
+    };
+  }, [c]);
+  const k = E(
+    (e, n) => {
+      t.disabled || (c(e.value), x(n), i.current && i.current.focusItemAtIndex(n));
+    },
+    [c]
+  ), B = z(t.itemRenderer) || A, H = t.label, L = t.validator?.required, v = t.disabled, N = t.readonly;
+  return /* @__PURE__ */ $("div", { className: "gui-list", style: { flex: t.size }, children: [
+    /* @__PURE__ */ d(
+      "gui-label",
+      {
+        targetElement: i.current || void 0,
+        uid: u,
+        label: H,
+        hint: t.hint,
+        errors: p,
+        touched: g,
+        required: L,
+        native: !1
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "gui-widget", children: /* @__PURE__ */ d(
+      "gui-list",
+      {
+        ref: i,
+        id: u,
+        uid: u,
+        value: I ?? "",
+        valueField: t.valueField,
+        items: t.items,
+        itemHeight: t.itemHeight,
+        height: t.height,
+        required: L,
+        touched: g,
+        disabled: v,
+        readOnly: N,
+        onBlur: y,
+        children: D.map((e, n) => {
+          const r = o.start + n, l = I === e.value, m = w === r;
+          return /* @__PURE__ */ d(
+            "div",
+            {
+              role: "option",
+              tabIndex: -1,
+              id: `${u}-item-${r}`,
+              className: "gui-list__item-wrapper",
+              style: { height: `${t.itemHeight || 40}px` },
+              "aria-selected": l,
+              "aria-disabled": v ? "true" : "false",
+              onClick: () => k(e, r),
+              children: /* @__PURE__ */ d(
+                B,
+                {
+                  template: e.template,
+                  value: e.value,
+                  index: n,
+                  selected: l,
+                  disabled: v,
+                  focused: m
+                }
+              )
+            },
+            r
+          );
+        })
+      }
+    ) }),
+    /* @__PURE__ */ d("gui-errors", { errors: p, touched: g })
+  ] });
+}
+export {
+  G as List
+};

package/Number-DsIN4V1r.js

@@ -0,0 +1,34 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useInputWidget as q } from "@golemui/react";
+import { useCallback as C } from "react";
+/* empty css                */
+function R(n) {
+  const i = n.widget, { uid: a, errors: r, value: l, isTouched: s, templateData: e, onValueChanged: t, onBlur: u } = q(i), d = C(
+    (y) => t(y.nativeEvent.detail.value),
+    [t]
+  ), m = e.label, c = e.hint, p = e.placeholder, h = e.step, b = e.minimum, g = e.maximum, v = e.autoGrow, f = e.disabled, x = e.readonly, w = e.validator?.required;
+  return /* @__PURE__ */ o("div", { className: "gui-number", style: { flex: e.size }, children: /* @__PURE__ */ o(
+    "gui-number",
+    {
+      uid: a,
+      label: m,
+      hint: c,
+      errors: r,
+      touched: s,
+      required: w,
+      disabled: f,
+      readOnly: x,
+      value: l,
+      step: h,
+      minimum: b,
+      maximum: g,
+      autoGrow: v,
+      placeholder: p ?? void 0,
+      onInput: d,
+      onBlur: u
+    }
+  ) });
+}
+export {
+  R as NumberInput
+};

package/Password-B_QkZ1WU.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useInputWidget as L } from "@golemui/react";
+import { useCallback as q } from "react";
+/* empty css                */
+function j(a) {
+  const d = a.widget, { uid: n, errors: r, value: t, isTouched: i, templateData: o, onValueChanged: s, onBlur: l } = L(d), c = q(
+    (y) => s(y.nativeEvent.detail.value),
+    [s]
+  ), h = o.label, u = o.hint, w = o.placeholder, p = o.showPasswordIcon, b = o.hidePasswordIcon, m = o.showPasswordLabel, P = o.hidePasswordLabel, g = o.icon, v = o.disabled, I = o.readonly, f = o.validator?.required;
+  return /* @__PURE__ */ e("div", { className: "gui-password", style: { flex: o.size }, children: /* @__PURE__ */ e(
+    "gui-password",
+    {
+      uid: n,
+      label: h,
+      hint: u,
+      errors: r,
+      touched: i,
+      required: f,
+      disabled: v,
+      readOnly: I,
+      value: t,
+      icon: g,
+      placeholder: w ?? void 0,
+      showPasswordIcon: p,
+      hidePasswordIcon: b,
+      showPasswordLabel: m,
+      hidePasswordLabel: P,
+      onInput: c,
+      onBlur: l
+    }
+  ) });
+}
+export {
+  j as Password
+};

package/README.md

@@ -0,0 +1,7 @@
+# gui-react
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test gui-react` to execute the unit tests via [Vitest](https://vitest.dev/).

package/RadioGroup-BPhyHxKf.js

@@ -0,0 +1,32 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useInputWidget as C } from "@golemui/react";
+import { useCallback as F } from "react";
+/* empty css                */
+function D(t) {
+  const l = t.widget, { uid: a, errors: n, value: d, isTouched: r, templateData: e, onValueChanged: o, onBlur: s } = C(l), u = F(
+    (y) => o(y.nativeEvent.detail.value),
+    [o]
+  ), c = e.label, p = e.hint, g = e.options, h = e.labelField, m = e.valueField, b = e.disabled, v = e.readonly, f = e.validator?.required;
+  return /* @__PURE__ */ i("div", { className: "gui-radiogroup", style: { flex: e.size }, children: /* @__PURE__ */ i(
+    "gui-radiogroup",
+    {
+      uid: a,
+      label: c,
+      errors: n,
+      touched: r,
+      required: f,
+      disabled: b,
+      readOnly: v,
+      value: d,
+      hint: p,
+      options: g,
+      labelField: h,
+      valueField: m,
+      onChange: u,
+      onBlur: s
+    }
+  ) });
+}
+export {
+  D as RadioGroup
+};