@golemui/gui-react 0.12.2 → 0.13.1

package/TextArea-BlRaVCon.js

@@ -0,0 +1,202 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useInputWidget as B } from "@golemui/react";
+import "@golemui/gui-shared";
+import { useCallback as H } from "react";
+import { i as O, b as u, A as c, n as r, t as E } from "./directive-1yd1wdny.js";
+import { e as M } from "./class-map-DrTVAYz_.js";
+import { G as _, b as D, c as P } from "./templates-DBGyvZtc.js";
+import { o as T } from "./style-map-C_0XzJlx.js";
+/* empty css                */
+var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, i = (t, s, d, n) => {
+  for (var a = n > 1 ? void 0 : n ? I(s, d) : s, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (a = (n ? o(s, d, a) : o(a)) || a);
+  return n && a && A(s, d, a), a;
+};
+let e = class extends O {
+  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.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.maxLength = void 0, this.ariaController = new _(this, {
+      getTargets: () => this.querySelectorAll(`textarea[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 t = {
+      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,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete,
+      counterMode: this.counterMode ?? "remaining",
+      minimumHeight: this.minimumHeight ?? 120,
+      autoGrow: this.autoGrow ?? !1,
+      maxLength: this.maxLength
+    };
+    let s = u``;
+    if (t.counterMode && t.maxLength) {
+      const a = {
+        "gui-textarea--counter": !0,
+        "gui-textarea--counter__error": (t.value?.length ?? 0) > t.maxLength
+      }, l = t.counterMode === "current" ? u`<span>${t.value?.length ?? 0}</span>` : u`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
+      s = u`<div class=${M(a)}>
+        ${l}
+        <span> / ${t.maxLength}</span>
+      </div>`;
+    }
+    const d = {
+      height: `${t.minimumHeight}px`,
+      "min-height": `${t.minimumHeight}px`
+    }, n = this.querySelector(`textarea[id="${this.uid}"]`);
+    if (this.autoGrow && n) {
+      const a = window.getComputedStyle(n), l = parseFloat(a.paddingTop), o = parseFloat(a.paddingBottom), h = l + o;
+      n.style.height = "auto", d.height = `${Math.max(this.minimumHeight ?? 120, n.scrollHeight - h)}px`;
+    }
+    return u`
+      ${D(this.uid, t)}
+
+      <div class="gui-widget">
+        <textarea
+          id=${this.uid}
+          data-cy=${`${this.uid}_textarea`}
+          style=${T(d)}
+          ?required=${t.required}
+          ?disabled=${t.disabled}
+          ?readonly=${t.readonly}
+          placeholder=${t.placeholder || c}
+          autocomplete=${this.autocomplete || c}
+          @input=${this.valueChanged}
+          @blur=${this.onBlur}
+        ></textarea>
+      </div>
+
+      <div class="gui-textarea--validation">
+        <div>${P(this.uid, t)}</div>
+        ${s}
+      </div>
+    `;
+  }
+  valueChanged(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const s = t.target;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: s.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+i([
+  r({ type: String })
+], e.prototype, "uid", 2);
+i([
+  r({ type: String })
+], e.prototype, "label", 2);
+i([
+  r({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+i([
+  r({ type: Array })
+], e.prototype, "errors", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "touched", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "required", 2);
+i([
+  r({ type: Boolean })
+], e.prototype, "disabled", 2);
+i([
+  r({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+i([
+  r({ type: String })
+], e.prototype, "value", 2);
+i([
+  r({ type: String })
+], e.prototype, "hint", 2);
+i([
+  r({ type: String })
+], e.prototype, "placeholder", 2);
+i([
+  r({ type: String })
+], e.prototype, "autocomplete", 2);
+i([
+  r({ type: String, attribute: "countermode" })
+], e.prototype, "counterMode", 2);
+i([
+  r({ type: Number, attribute: "minimumheight" })
+], e.prototype, "minimumHeight", 2);
+i([
+  r({ type: Boolean, attribute: "autogrow" })
+], e.prototype, "autoGrow", 2);
+i([
+  r({ type: Number, attribute: "maxlength" })
+], e.prototype, "maxLength", 2);
+e = i([
+  E("gui-textarea")
+], e);
+typeof customElements < "u" && !customElements.get("gui-textarea") && customElements.define("gui-textarea", e);
+function K(t) {
+  const s = t.widget, { uid: d, errors: n, value: a, isTouched: l, templateData: o, onValueChanged: h, onBlur: m } = B(s), g = H(
+    (G) => h(G.nativeEvent.detail.value),
+    [h]
+  ), y = o.label, v = o.hint, b = o.placeholder, x = o.validator?.maxLength, f = o.counterMode, $ = o.autocomplete, w = o.autoGrow, C = o.minimumHeight, S = o.disabled, L = o.readonly, q = o.validator?.required;
+  return /* @__PURE__ */ p("div", { className: "gui-textarea gui-field", style: { flex: o.size }, children: /* @__PURE__ */ p(
+    "gui-textarea",
+    {
+      uid: d,
+      label: y,
+      errors: n,
+      touched: l,
+      required: q,
+      disabled: S,
+      readOnly: L,
+      value: a,
+      hint: v,
+      placeholder: b,
+      autocomplete: $ ?? void 0,
+      counterMode: f,
+      minimumHeight: C,
+      autoGrow: w,
+      maxLength: x,
+      onInput: g,
+      onBlur: m
+    }
+  ) });
+}
+export {
+  K as TextArea
+};

package/TextInput-KuHLSN2X.js

@@ -0,0 +1,169 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useInputWidget as S } from "@golemui/react";
+import "@golemui/gui-shared";
+import { useCallback as q } from "react";
+import { i as E, A as h, b as w, n as o, t as I } from "./directive-1yd1wdny.js";
+import { e as B } from "./class-map-DrTVAYz_.js";
+import { G as _, a as D, b as P, c as A } from "./templates-DBGyvZtc.js";
+/* empty css                */
+var R = Object.defineProperty, T = Object.getOwnPropertyDescriptor, e = (r, s, a, d) => {
+  for (var l = d > 1 ? void 0 : d ? T(s, a) : s, n = r.length - 1, i; n >= 0; n--)
+    (i = r[n]) && (l = (d ? i(s, a, l) : i(l)) || l);
+  return d && l && R(s, a, l), l;
+};
+let t = class extends E {
+  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.placeholder = void 0, this.autocomplete = void 0, this.ariaController = new _(this, {
+      getTargets: () => this.querySelectorAll(`input[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 r = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      icon: this.icon,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete
+    }, s = D("textinput", r), a = {
+      "gui-textinput--icon": !!this.icon
+    };
+    return w`
+      ${P(this.uid, r)}
+
+      <div class="gui-widget">
+        <input
+          type="text"
+          id=${this.uid}
+          data-cy=${`${this.uid}_textinput`}
+          class=${B(a)}
+          value=${this.value}
+          ?required=${this.disabled}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          placeholder=${this.placeholder || h}
+          autocomplete=${this.autocomplete || h}
+          @input=${this.valueChanged}
+          @blur=${this.onBlur}
+        />
+        ${s.html}
+      </div>
+
+      ${A(this.uid, r)}
+    `;
+  }
+  valueChanged(r) {
+    if (r.stopPropagation(), !this.readOnly) {
+      const s = r.target;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: s.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+e([
+  o({ type: String })
+], t.prototype, "uid", 2);
+e([
+  o({ type: String })
+], t.prototype, "label", 2);
+e([
+  o({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
+e([
+  o({ type: Array })
+], t.prototype, "errors", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "touched", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  o({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
+e([
+  o({ type: String })
+], t.prototype, "value", 2);
+e([
+  o({ type: String })
+], t.prototype, "hint", 2);
+e([
+  o({ type: String })
+], t.prototype, "icon", 2);
+e([
+  o({ type: String })
+], t.prototype, "placeholder", 2);
+e([
+  o({ type: String })
+], t.prototype, "autocomplete", 2);
+t = e([
+  I("gui-textinput")
+], t);
+typeof customElements < "u" && !customElements.get("gui-textinput") && customElements.define("gui-textinput", t);
+function F(r) {
+  const s = r.widget, { uid: a, errors: d, value: l, isTouched: n, templateData: i, onValueChanged: u, onBlur: c } = S(s), y = q(
+    (O) => u(O.nativeEvent.detail.value),
+    [u]
+  ), m = i.label, b = i.hint, v = i.placeholder, g = i.autocomplete, f = i.icon, x = i.disabled, $ = i.readonly, C = i.validator?.required;
+  return /* @__PURE__ */ p("div", { className: "gui-textinput gui-field", style: { flex: i.size }, children: /* @__PURE__ */ p(
+    "gui-textinput",
+    {
+      uid: a,
+      label: m,
+      hint: b,
+      errors: d,
+      touched: n,
+      required: C,
+      disabled: x,
+      readOnly: $,
+      value: l,
+      icon: f,
+      placeholder: v ?? void 0,
+      autocomplete: g ?? void 0,
+      onInput: y,
+      onBlur: c
+    }
+  ) });
+}
+export {
+  F as TextInput
+};

package/Toggle-D-bglMPv.js

@@ -0,0 +1,166 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useInputWidget as C } from "@golemui/react";
+import "@golemui/gui-shared";
+import { useCallback as P } from "react";
+import { G as _, c as q } from "./templates-DBGyvZtc.js";
+import { i as w, A as E, b as O, n as o, t as S } from "./directive-1yd1wdny.js";
+/* empty css                */
+var B = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (e, l, d, a) => {
+  for (var s = a > 1 ? void 0 : a ? x(l, d) : l, n = e.length - 1, u; n >= 0; n--)
+    (u = e[n]) && (s = (a ? u(l, d, s) : u(s)) || s);
+  return a && s && B(l, d, s), s;
+};
+let t = class extends w {
+  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.togglePosition = "left", this.ariaController = new _(this, {
+      getTargets: () => this.querySelectorAll('span[role="presentation"]'),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          touched: this.touched,
+          // Checkboxes can't have aria-readonly
+          readonly: !1,
+          disabled: !1
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  render() {
+    super.render();
+    const e = {
+      uid: this.uid,
+      label: this.label,
+      hint: this.hint,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      togglePosition: this.togglePosition
+    };
+    return e.togglePosition === "right" ? this.classList.add("gui-toggle--right") : this.classList.contains("gui-toggle--right") && this.classList.remove("gui-toggle--right"), O`
+      <label
+        class="gui-label"
+        for=${this.uid}
+        data-cy=${`${this.uid}_label`}
+        id=${`${this.uid}_label`}
+      >
+        <div class="gui-widget gui-widget--horizontal gui-toggle--switch">
+          <input
+            type="checkbox"
+            tabindex="0"
+            id=${this.uid}
+            data-cy=${`${this.uid}_toggle`}
+            ?checked=${e.value}
+            ?required=${e.required}
+            ?disabled=${e.disabled || e.readonly}
+            @change=${this.valueChanged}
+            @blur=${this.onBlur}
+          />
+
+          <span class="gui-toggle--slider" role="presentation"></span>
+        </div>
+
+        <span class="gui-label__container">
+          ${e.label + (e.required ? " *" : "")}
+        </span>
+      </label>
+
+      <div class="gui-widget-hint" id=${`${e.uid}_hint`}>
+        ${e.hint ?? E} ${q(this.uid, e)}
+      </div>
+    `;
+  }
+  valueChanged(e) {
+    if (e?.stopPropagation(), !this.readOnly) {
+      const l = e?.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: l.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+i([
+  o({ type: String })
+], t.prototype, "uid", 2);
+i([
+  o({ type: String })
+], t.prototype, "label", 2);
+i([
+  o({ type: String, attribute: "locale-id" })
+], t.prototype, "localeId", 2);
+i([
+  o({ type: Array })
+], t.prototype, "errors", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "touched", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "disabled", 2);
+i([
+  o({ type: Boolean, attribute: "readonly" })
+], t.prototype, "readOnly", 2);
+i([
+  o({ type: String })
+], t.prototype, "value", 2);
+i([
+  o({ type: String })
+], t.prototype, "hint", 2);
+i([
+  o({ type: String })
+], t.prototype, "togglePosition", 2);
+t = i([
+  S("gui-toggle")
+], t);
+typeof customElements < "u" && !customElements.get("gui-toggle") && customElements.define("gui-toggle", t);
+function G(e) {
+  const l = e.widget, { uid: d, errors: a, value: s, onValueChanged: n, onBlur: u, templateData: r, isTouched: h } = C(l), c = P(
+    ($) => n($.nativeEvent.detail.value),
+    [n]
+  ), p = r.label, b = r.hint, y = r.togglePosition, v = r.disabled, f = r.readonly, m = r.validator?.required;
+  return /* @__PURE__ */ g("div", { className: "gui-toggle gui-field", style: { flex: r.size }, children: /* @__PURE__ */ g(
+    "gui-toggle",
+    {
+      uid: d,
+      label: p,
+      errors: a,
+      touched: h,
+      required: m,
+      disabled: v,
+      readOnly: f,
+      value: s,
+      hint: b,
+      togglePosition: y,
+      onChange: c,
+      onBlur: u
+    }
+  ) });
+}
+export {
+  G as Toggle
+};