@golemui/gui-react 0.12.2 → 0.13.0

package/{RangeDateInput-CopLdb6J.js → RangeDateInput-DrVR4T_z.js}

@@ -1,45 +1,47 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useInputWidget as j } from "@golemui/react";
+import "@golemui/gui-shared";
 import { useCallback as w } from "react";
+import "./range-date-input-8WtB1urD.js";
 /* empty css                */
-function z(u) {
+function N(u) {
   const g = u.widget, {
-    uid: b,
-    errors: m,
-    value: v,
-    isTouched: p,
+    uid: m,
+    errors: b,
+    value: p,
+    isTouched: v,
     templateData: e,
     onBlur: n,
     onValueChanged: i,
-    injectValidationIssues: a
+    injectValidationIssues: r
   } = j(g), L = w(
-    (l) => {
-      const t = l, o = (r) => {
-        a(null), i(r.detail.value);
+    (o) => {
+      const t = o, l = (a) => {
+        r(null), i(a.detail.value);
       }, s = () => {
         n();
-      }, d = (r) => {
-        a([r.detail.message]);
+      }, d = (a) => {
+        r([a.detail.message]);
       };
-      return l && (t.addEventListener("blur", s), t.addEventListener("change", o), t.addEventListener("inputError", d)), () => {
-        t.removeEventListener("blur", s), t.removeEventListener("change", o), t.removeEventListener("inputError", d);
+      return o && (t.addEventListener("blur", s), t.addEventListener("change", l), t.addEventListener("inputError", d)), () => {
+        t.removeEventListener("blur", s), t.removeEventListener("change", l), t.removeEventListener("inputError", d);
       };
     },
-    [i, n, a]
+    [i, n, r]
   ), h = e.label, f = e.hint, E = e.icon, D = e.lang, A = e.separator, y = e.removePillAriaLabel, I = e.startDateAriaLabel, R = e.endDateAriaLabel, q = e.disabled, x = e.readonly, H = e.validator?.required;
   return /* @__PURE__ */ c("div", { className: "gui-range-date-input gui-field", style: { flex: e.size }, children: /* @__PURE__ */ c(
     "gui-range-date",
     {
       ref: L,
-      uid: b,
+      uid: m,
       label: h,
       hint: f,
-      errors: m,
-      touched: p,
+      errors: b,
+      touched: v,
       required: H,
       disabled: q,
       readOnly: x,
-      value: v,
+      value: p,
       icon: E,
       localeId: D,
       separator: A,
@@ -50,5 +52,5 @@ function z(u) {
   ) });
 }
 export {
-  z as RangeDateInput
+  N as RangeDateInput
 };

package/{RangeDatePicker-DXpV-B_G.js → RangeDatePicker-Cq_Tt6NE.js}

@@ -1,65 +1,68 @@
 import { jsxs as k, jsx as c } from "react/jsx-runtime";
 import { useInputWidget as te } from "@golemui/react";
+import "@golemui/gui-shared";
 import { useState as A, useRef as C, useCallback as M, useEffect as ne } from "react";
+import "./range-date-input-8WtB1urD.js";
+import "./range-calendar-SAyiW3EF.js";
 /* empty css                */
-import { E as ae } from "./Errors-D7gxq0y6.js";
-function ce(R) {
+import { E as re } from "./Errors-D7gxq0y6.js";
+function ge(R) {
   const F = R.widget, {
     uid: d,
-    errors: h,
+    errors: m,
     value: w,
     isTouched: v,
     templateData: t,
-    onValueChanged: m,
+    onValueChanged: h,
     onBlur: u,
     injectValidationIssues: g
-  } = te(F), [i, r] = A(!1), [_, O] = A(void 0), D = C(null), b = C(null), L = C(null), P = M(
+  } = te(F), [l, a] = A(!1), [_, O] = A(void 0), D = C(null), b = C(null), L = C(null), P = M(
     (n) => {
-      const e = n, a = (o) => {
-        g(null), m(o.detail.value);
+      const e = n, r = (o) => {
+        g(null), h(o.detail.value);
       }, s = (o) => {
         g([o.detail.message]);
-      }, l = () => {
-        r(!0);
+      }, i = () => {
+        a(!0);
       }, p = (o) => {
-        O(o.detail.range.start), r(!0);
+        O(o.detail.range.start), a(!0);
       };
-      return b.current = n, n && (e.addEventListener("change", a), e.addEventListener("focus", l), e.addEventListener("blur", u), e.addEventListener("inputError", s), e.addEventListener("pillClick", p)), () => {
-        e.removeEventListener("change", a), e.removeEventListener("focus", l), e.removeEventListener("blur", u), e.removeEventListener("inputError", s), e.removeEventListener("pillClick", p);
+      return b.current = n, n && (e.addEventListener("change", r), e.addEventListener("focus", i), e.addEventListener("blur", u), e.addEventListener("inputError", s), e.addEventListener("pillClick", p)), () => {
+        e.removeEventListener("change", r), e.removeEventListener("focus", i), e.removeEventListener("blur", u), e.removeEventListener("inputError", s), e.removeEventListener("pillClick", p);
       };
     },
-    [m, u, g]
+    [h, u, g]
   ), H = M(
     (n) => {
-      const e = n, a = (l) => {
-        g(null), m(l.detail.value);
-      }, s = (l) => {
-        u(), r(!1);
+      const e = n, r = (i) => {
+        g(null), h(i.detail.value);
+      }, s = (i) => {
+        u(), a(!1);
       };
-      return L.current = n, n && (e.addEventListener("blur", s), e.addEventListener("change", a)), () => {
-        e.addEventListener("blur", s), e.addEventListener("change", a);
+      return L.current = n, n && (e.addEventListener("blur", s), e.addEventListener("change", r)), () => {
+        e.addEventListener("blur", s), e.addEventListener("change", r);
       };
     },
-    [m, g, u]
+    [h, g, u]
   );
   ne(() => {
     const n = (e) => {
-      if (!i) return;
-      const a = e.composedPath(), s = b.current && a.includes(b.current), l = L.current && a.includes(L.current);
-      !s && !l && r(!1);
+      if (!l) return;
+      const r = e.composedPath(), s = b.current && r.includes(b.current), i = L.current && r.includes(L.current);
+      !s && !i && a(!1);
     };
     return document.addEventListener("click", n), () => {
       document.removeEventListener("click", n);
     };
-  }, [i]);
+  }, [l]);
   const N = (n) => {
-    if (!i) return;
+    if (!l) return;
     const e = n.relatedTarget;
-    e && D.current?.contains(e) || r(!1);
+    e && D.current?.contains(e) || a(!1);
   }, q = (n) => {
-    const e = n.target, a = e.closest(".gui-range-date-input__part"), s = e.closest("gui-range-calendar"), l = e.closest(".gui-range-date-input__pill"), p = e.closest(".gui-range-date-input__pill--count");
-    a || s || l ? i || r(!0) : p ? i && r(!1) : r((o) => !o);
-  }, f = t.hint, T = t.icon, j = t.separator, B = t.removePillAriaLabel, V = t.startDateAriaLabel, $ = t.endDateAriaLabel, z = t.prevMonthIcon, K = t.nextMonthIcon, S = t.prevMonthAriaLabel, U = t.nextMonthAriaLabel, W = t.dayFormat, Z = t.weekdayFormat, G = t.monthFormat, J = t.minDate, Q = t.maxDate, X = t.disabledRanges, Y = t.numberOfMonths, ee = v && h && h.length > 0, x = t.disabled, y = t.readonly, E = t.validator?.required, I = t.lang;
+    const e = n.target, r = e.closest(".gui-range-date-input__part"), s = e.closest("gui-range-calendar"), i = e.closest(".gui-range-date-input__pill"), p = e.closest(".gui-range-date-input__pill--count");
+    r || s || i ? l || a(!0) : p ? l && a(!1) : a((o) => !o);
+  }, f = t.hint, T = t.icon, j = t.separator, B = t.removePillAriaLabel, V = t.startDateAriaLabel, $ = t.endDateAriaLabel, z = t.prevMonthIcon, K = t.nextMonthIcon, S = t.prevMonthAriaLabel, U = t.nextMonthAriaLabel, W = t.dayFormat, Z = t.weekdayFormat, G = t.monthFormat, J = t.minDate, Q = t.maxDate, X = t.disabledRanges, Y = t.numberOfMonths, ee = v && m && m.length > 0, x = t.disabled, y = t.readonly, E = t.validator?.required, I = t.lang;
   return /* @__PURE__ */ k(
     "div",
     {
@@ -80,9 +83,9 @@ function ce(R) {
             className: "gui-widget",
             onClick: q,
             onKeyUp: (n) => {
-              n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && r((e) => !e);
+              n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && a((e) => !e);
             },
-            "aria-expanded": i,
+            "aria-expanded": l,
             children: [
               /* @__PURE__ */ c(
                 "gui-range-date",
@@ -91,7 +94,7 @@ function ce(R) {
                   uid: d,
                   hint: f,
                   showErrors: !1,
-                  errors: h,
+                  errors: m,
                   touched: v,
                   required: E,
                   disabled: x,
@@ -106,7 +109,7 @@ function ce(R) {
                 }
               ),
               /* @__PURE__ */ c("span", { className: "gui-range-date-picker__arrow", children: /* @__PURE__ */ c("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 256 256", children: /* @__PURE__ */ c("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) }),
-              i && /* @__PURE__ */ c(
+              l && /* @__PURE__ */ c(
                 "gui-range-calendar",
                 {
                   ref: H,
@@ -136,11 +139,11 @@ function ce(R) {
             ]
           }
         ),
-        ee && /* @__PURE__ */ c(ae, { errors: h, uid: d })
+        ee && /* @__PURE__ */ c(re, { errors: m, uid: d })
       ]
     }
   );
 }
 export {
-  ce as RangeDatePicker
+  ge as RangeDatePicker
 };

package/{Renderer-B6WmwKDv.js → Renderer-CWqudTUu.js}

@@ -1,9 +1,11 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useDisplayWdiget as s } from "@golemui/react";
-function a(r) {
+import "@golemui/gui-shared";
+import "react";
+function c(r) {
   const t = r.widget, { uid: d, templateData: e } = s(t), n = e?.render;
   return /* @__PURE__ */ i("div", { className: "gui-renderer gui-field", style: { flex: e.size }, children: /* @__PURE__ */ i("div", { className: "gui-widget", id: d, children: n }) });
 }
 export {
-  a as Renderer
+  c as Renderer
 };

package/Repeater-DE-DAylQ.js

@@ -0,0 +1,124 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import "@golemui/gui-shared";
+import "@golemui/core";
+import "./index.js";
+import { useInputWidget as B, useRepeaterIndexes as C, RepeaterIndexesContext as F, WidgetRenderer as j } from "@golemui/react";
+import { useRef as O, useCallback as c, useState as P } from "react";
+import "./errors-6UKoJh8Y.js";
+/* empty css                */
+function k(n, m) {
+  if (n != null && typeof n == "object" && "__rid" in n)
+    return n.__rid;
+  const t = m();
+  return Object.defineProperty(n, "__rid", {
+    value: t,
+    enumerable: !1,
+    configurable: !1
+  }), t;
+}
+let q = 0;
+const S = () => q++;
+function T(n) {
+  const m = n.widget, { uid: t, value: s, onValueChanged: u, templateData: e, errors: l, isTouched: p, onBlur: I } = B(m), g = O(null), v = c(
+    (r) => {
+      const o = [...r ?? [], {}];
+      u(o);
+    },
+    [u]
+  ), b = c(
+    (r, o) => {
+      const d = (r ?? []).filter((W, y) => o !== y);
+      "structuredClone" in window ? u(structuredClone(d)) : u(JSON.parse(JSON.stringify(d)));
+    },
+    [u]
+  ), [h, f] = P(!1), N = c((r) => {
+    r.stopPropagation(), f(!0);
+  }, []), x = c((r) => {
+    r.stopPropagation(), I(), f(!1);
+  }, []), _ = C(), w = c(() => s?.map((r, o) => {
+    const d = k(r, S);
+    return /* @__PURE__ */ a(
+      F.Provider,
+      {
+        value: [..._, o],
+        children: /* @__PURE__ */ i("div", { className: "gui-repeater__card", children: [
+          /* @__PURE__ */ i("div", { className: "gui-repeater__card-header", children: [
+            e.title && /* @__PURE__ */ a("span", { className: "gui-repeater__card-title", children: `${e.title} ${o + 1}` }),
+            /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                tabIndex: 0,
+                className: "gui-button gui-button--sm gui-repeater__remove-btn",
+                onClick: () => b(s, o),
+                children: [
+                  e.removeButtonIcon && /* @__PURE__ */ a(
+                    "span",
+                    {
+                      className: `gui-widget-icon gui-button-icon ${e.removeButtonIcon}`,
+                      "data-icon": e.removeButtonIcon
+                    }
+                  ),
+                  e.removeLabel ?? "Remove"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(j, { widget: e.template }, `${t}-${d}`)
+        ] })
+      },
+      `${t}-${d}`
+    );
+  }), [e, s, t, b, _]), R = e.validator?.required, $ = p && l && l.length > 0;
+  return /* @__PURE__ */ i("div", { className: "gui-repeater gui-field", style: { flex: e.size }, children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        ref: g,
+        id: t,
+        className: `gui-repeater__main-card gui-repeater__card${h ? " gui-repeater__card--focused" : ""}`,
+        onFocus: N,
+        onBlur: x,
+        children: [
+          /* @__PURE__ */ a(
+            "gui-label",
+            {
+              targetElement: g.current || void 0,
+              uid: t,
+              label: e.label,
+              errors: l,
+              touched: p,
+              required: R,
+              native: !1
+            }
+          ),
+          w(),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              tabIndex: 0,
+              className: "gui-button gui-repeater__add-btn",
+              onClick: () => v(s || []),
+              disabled: e.limit ? e.limit === (s?.length ?? 0) : !1,
+              children: [
+                e.addButtonIcon && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: `gui-widget-icon gui-button-icon ${e.addButtonIcon}`,
+                    "data-icon": e.addButtonIcon
+                  }
+                ),
+                e.addLabel ?? "Add"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    $ && /* @__PURE__ */ a("gui-errors", { uid: t, errors: l, touched: p })
+  ] });
+}
+export {
+  T as Repeater
+};

package/Select-CCCPYQW6.js

@@ -0,0 +1,238 @@
+import { jsx as y } from "react/jsx-runtime";
+import { useInputWidget as D } from "@golemui/react";
+import "@golemui/gui-shared";
+import { useCallback as m } from "react";
+import { i as M, b as p, A as u, n as s, t as A } from "./directive-1yd1wdny.js";
+import { c as P } from "./repeat-BucBfSPF.js";
+import { e as R } from "./class-map-DrTVAYz_.js";
+import { G as j, a as G, b as T, c as z } from "./templates-DBGyvZtc.js";
+import { u as H, i as N } from "./one-of-DifUsEYY.js";
+/* empty css                */
+var U = Object.defineProperty, W = Object.getOwnPropertyDescriptor, t = (i, a, n, l) => {
+  for (var r = l > 1 ? void 0 : l ? W(a, n) : a, d = i.length - 1, o; d >= 0; d--)
+    (o = i[d]) && (r = (l ? o(a, n, r) : o(r)) || r);
+  return l && r && U(a, n, r), r;
+};
+let e = class extends M {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.icon = void 0, this.autocomplete = void 0, this.options = [], this.placeholder = void 0, this.labelField = void 0, this.valueField = void 0, this.optionsLoading = !1, this.hasMatchingValue = !1, this.ariaController = new j(this, {
+      getTargets: () => this.querySelectorAll(`select[id="${this.uid}"]`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  render() {
+    super.render();
+    const i = {
+      uid: this.uid,
+      label: this.label,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      hint: this.hint,
+      icon: this.icon,
+      autocomplete: this.autocomplete,
+      options: this.options,
+      placeholder: this.placeholder,
+      labelField: this.labelField,
+      valueField: this.valueField
+    }, a = G("select", i);
+    this.options = H(this.options, {
+      labelField: this.labelField,
+      valueField: this.valueField
+    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: l }) => l === this.value) !== void 0 : !1;
+    const n = this.optionsLoading ? p`<span>Loading...</span>` : p`
+          <option value="" disabled selected=${this.hasMatchingValue ? u : ""}>
+            ${this.placeholder ?? "Select an option"}
+          </option>
+          ${P(
+      this.options || [],
+      (l) => l?.value,
+      (l) => p`<option
+                value=${l.value}
+                selected=${this.hasMatchingValue && l.value === this.value ? "" : u}
+              >
+                ${l.label}
+              </option>`
+    )}
+        `;
+    return p`
+      ${T(this.uid, i)}
+
+      <div class="gui-widget">
+        <select
+          id=${this.uid}
+          tabindex="0"
+          data-cy=${`${this.uid}_select`}
+          class=${R(a.widgetClasses)}
+          ?required=${i.required}
+          ?disabled=${i.disabled || i.readonly}
+          autocomplete=${this.autocomplete || u}
+          @change=${this.valueChanged}
+          @blur=${this.onBlur}
+        >
+          ${n}
+        </select>
+        <span class="gui-select__arrow"
+          ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
+            <path
+              d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"
+            ></path></svg
+        ></span>
+        ${a.html}
+      </div>
+
+      ${z(this.uid, i)}
+    `;
+  }
+  updated(i) {
+    i.has("value") && !this.hasMatchingValue && this.value && this.dispatchEvent(
+      new CustomEvent("inputError", {
+        detail: {
+          message: `Invalid selection: '${this.value}' is not a valid option.`
+        },
+        bubbles: !0
+      })
+    );
+  }
+  valueChanged(i) {
+    if (i.stopPropagation(), !this.readOnly) {
+      const a = i.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: N(a.value, this.options) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+t([
+  s({ type: String })
+], e.prototype, "uid", 2);
+t([
+  s({ type: String })
+], e.prototype, "label", 2);
+t([
+  s({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+t([
+  s({ type: Array })
+], e.prototype, "errors", 2);
+t([
+  s({ type: Boolean })
+], e.prototype, "touched", 2);
+t([
+  s({ type: Boolean })
+], e.prototype, "required", 2);
+t([
+  s({ type: Boolean })
+], e.prototype, "disabled", 2);
+t([
+  s({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+t([
+  s({ type: String })
+], e.prototype, "value", 2);
+t([
+  s({ type: String })
+], e.prototype, "hint", 2);
+t([
+  s({ type: String })
+], e.prototype, "icon", 2);
+t([
+  s({ type: String })
+], e.prototype, "autocomplete", 2);
+t([
+  s({ type: String })
+], e.prototype, "options", 2);
+t([
+  s({ type: String })
+], e.prototype, "placeholder", 2);
+t([
+  s({ type: String })
+], e.prototype, "labelField", 2);
+t([
+  s({ type: String })
+], e.prototype, "valueField", 2);
+e = t([
+  A("gui-select")
+], e);
+typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", e);
+function oe(i) {
+  const a = i.widget, {
+    uid: n,
+    errors: l,
+    value: r,
+    isTouched: d,
+    templateData: o,
+    onValueChanged: c,
+    onBlur: f,
+    injectValidationIssues: v
+  } = D(a), $ = m(
+    (h) => c(h.nativeEvent.detail.value),
+    [c]
+  ), w = m(
+    (h) => {
+      const g = h, b = (x) => {
+        v([x.detail.message]);
+      };
+      return h && g.addEventListener("inputError", b), () => {
+        g.removeEventListener("inputError", b);
+      };
+    },
+    [v]
+  ), E = o.options, F = o.label, S = o.hint, C = o.placeholder, O = o.autocomplete, q = o.icon, _ = o.valueField, B = o.labelField, I = o.disabled, L = o.readonly, V = o.validator?.required;
+  return /* @__PURE__ */ y("div", { className: "gui-select gui-field", style: { flex: o.size }, children: /* @__PURE__ */ y(
+    "gui-select",
+    {
+      ref: w,
+      uid: n,
+      label: F,
+      errors: l,
+      touched: d,
+      required: V,
+      disabled: I,
+      readOnly: L,
+      value: r,
+      hint: S,
+      placeholder: C,
+      autocomplete: O ?? void 0,
+      icon: q,
+      options: E,
+      labelField: B,
+      valueField: _,
+      onChange: $,
+      onBlur: f
+    }
+  ) });
+}
+export {
+  oe as Select
+};

package/{Tabs-C2qqi8xO.js → Tabs-BVgVVvnu.js}

@@ -1,8 +1,9 @@
 import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { useLayoutWidget as N, WidgetRenderer as E, cn as A } from "@golemui/react";
-import { createIntersectionObserver as x } from "@golemui/gui-components";
+import { c as x } from "./tabs-DzSCq_98.js";
+import "@golemui/gui-shared";
 import { useRef as u, useState as h, useEffect as b, useCallback as f } from "react";
-function z(y) {
+function K(y) {
   const _ = u(null), r = y.widget, { uid: k, children: g, templateData: e, onChange: m } = N(r), c = u([]), $ = u(null), w = u(null), [O, S] = h(!1), [R, T] = h(!1), [s, p] = h(e.defaultOpen);
   b(() => {
     const a = $.current, t = w.current, i = x(
@@ -125,5 +126,5 @@ function z(y) {
   ] });
 }
 export {
-  z as Tabs
+  K as Tabs
 };