@golemui/gui-lit 0.12.1 → 0.13.0

package/{renderer.element-B99qD2mz.js → renderer.element-DMsheQGi.js}

@@ -1,15 +1,17 @@
-import * as n from "@golemui/lit";
-import { consume as c, provide as l } from "@lit/context";
-import { LitElement as u, html as h } from "lit";
-import { property as m, customElement as f } from "lit/decorators.js";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (r, e, a, s) => {
-  for (var t = s > 1 ? void 0 : s ? g(e, a) : e, o = r.length - 1, p; o >= 0; o--)
+import { DisplayWidgetAdapter as d, formContext as c, displayWidgetContext as l } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { consume as u, provide as m } from "@lit/context";
+import { LitElement as h, html as f } from "lit";
+import { property as b, customElement as g } from "lit/decorators.js";
+import "rxjs";
+var x = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (r, e, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? v(e, a) : e, o = r.length - 1, p; o >= 0; o--)
     (p = r[o]) && (t = (s ? p(e, a, t) : p(t)) || t);
-  return s && t && b(e, a, t), t;
+  return s && t && x(e, a, t), t;
 };
-let i = class extends u {
+let i = class extends h {
   constructor() {
-    super(...arguments), this.adapter = new n.DisplayWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.adapter = new d(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -25,7 +27,7 @@ let i = class extends u {
     );
   }
   render() {
-    return h`
+    return f`
       <div class="gui-widget" id=${this.widget.uid}>${this.adapter.templateData.render}</div>
     `;
   }
@@ -33,15 +35,15 @@ let i = class extends u {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((r) => r.unsubscribe());
   }
 };
-d([
-  c({ context: n.formContext }),
-  m({ attribute: !1 })
+n([
+  u({ context: c }),
+  b({ attribute: !1 })
 ], i.prototype, "formContext", 2);
-d([
-  l({ context: n.displayWidgetContext })
+n([
+  m({ context: l })
 ], i.prototype, "adapter", 2);
-i = d([
-  f("gui-renderer-component")
+i = n([
+  g("gui-renderer-component")
 ], i);
 export {
   i as RendererElement

package/{repeater.element-AaifWsOB.js → repeater.element-Ry8HyMfW.js}

@@ -1,19 +1,33 @@
-import * as c from "@golemui/lit";
-import { getItemKey as l } from "@golemui/gui-shared";
-import { consume as h, provide as m } from "@lit/context";
-import { LitElement as g, nothing as n, html as s } from "lit";
-import { repeat as b } from "lit-html/directives/repeat.js";
-import { property as $, state as v, query as f, customElement as _ } from "lit/decorators.js";
-var I = Object.defineProperty, w = Object.getOwnPropertyDescriptor, u = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? w(t, a) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (i = (r ? p(t, a, i) : p(i)) || i);
-  return r && i && I(t, a, i), i;
+import "@golemui/gui-shared";
+import "@golemui/core";
+import "./index.js";
+import { InputWidgetAdapter as c, formContext as l, inputContext as h } from "@golemui/lit";
+import { consume as m, provide as g } from "@lit/context";
+import { LitElement as b, nothing as n, html as s } from "lit";
+import { repeat as f } from "lit-html/directives/repeat.js";
+import { property as _, state as $, query as v, customElement as I } from "lit/decorators.js";
+import "rxjs";
+import "./errors-QjKhr6mA.js";
+function w(e, t) {
+  if (e != null && typeof e == "object" && "__rid" in e)
+    return e.__rid;
+  const r = t();
+  return Object.defineProperty(e, "__rid", {
+    value: r,
+    enumerable: !1,
+    configurable: !1
+  }), r;
+}
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, u = (e, t, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? C(t, r) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (i = (a ? p(t, r, i) : p(i)) || i);
+  return a && i && y(t, r, i), i;
 };
-let C = 0;
-const y = () => C++;
-let o = class extends g {
+let x = 0;
+const F = () => x++;
+let o = class extends b {
   constructor() {
-    super(...arguments), this.adapter = new c.InputWidgetAdapter(), this.isFocused = !1, this.subscriptions = [];
+    super(...arguments), this.adapter = new c(), this.isFocused = !1, this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -52,20 +66,20 @@ let o = class extends g {
           .required=${e.validator?.required}
           .native=${!1}
         ></gui-label>
-        ${e.value ? b(
+        ${e.value ? f(
       e.value,
-      (a) => l(a, y),
-      (a, r) => s`
+      (r) => w(r, F),
+      (r, a) => s`
                 <div class="gui-repeater__card">
                   <div class="gui-repeater__card-header">
                     ${e.title ? s`<span class="gui-repeater__card-title"
-                          >${e.title} ${r + 1}</span
+                          >${e.title} ${a + 1}</span
                         >` : n}
                     <button
                       type="button"
                       tabindex="0"
                       class="gui-button gui-button--sm gui-repeater__remove-btn"
-                      @click=${() => this.removeItem(r)}
+                      @click=${() => this.removeItem(a)}
                     >
                       ${e.removeButtonIcon ? s`<span
                             class="gui-widget-icon gui-button-icon ${e.removeButtonIcon}"
@@ -75,7 +89,7 @@ let o = class extends g {
                     </button>
                   </div>
                   <gui-repeater-widget
-                    .repeaterIndex=${r}
+                    .repeaterIndex=${a}
                     .widget=${e.template}
                   ></gui-repeater-widget>
                 </div>
@@ -111,25 +125,25 @@ let o = class extends g {
     this.adapter.valueChanged(e), this.requestUpdate();
   }
   removeItem(e) {
-    const t = (this.adapter.templateData.value ?? []).filter((a, r) => e !== r);
+    const t = (this.adapter.templateData.value ?? []).filter((r, a) => e !== a);
     "structuredClone" in window ? this.adapter.valueChanged(structuredClone(t)) : this.adapter.valueChanged(JSON.parse(JSON.stringify(t))), this.requestUpdate();
   }
 };
 u([
-  h({ context: c.formContext }),
-  $({ attribute: !1 })
+  m({ context: l }),
+  _({ attribute: !1 })
 ], o.prototype, "formContext", 2);
 u([
-  m({ context: c.inputContext })
+  g({ context: h })
 ], o.prototype, "adapter", 2);
 u([
-  v()
+  $()
 ], o.prototype, "isFocused", 2);
 u([
-  f(".gui-repeater__main-card")
+  v(".gui-repeater__main-card")
 ], o.prototype, "_repeaterRef", 2);
 o = u([
-  _("gui-repeater-input")
+  I("gui-repeater-input")
 ], o);
 export {
   o as RepeaterElement

package/select.element-DuGZjlZY.js

@@ -0,0 +1,257 @@
+import { InputWidgetAdapter as g, formContext as b, inputContext as y } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as m, html as n, nothing as u } from "lit";
+import { repeat as f } from "lit-html/directives/repeat.js";
+import { property as s, customElement as v } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { G as C, a as D, b as w, c as E } from "./templates-Dk1jxLwS.js";
+import { u as S, i as F } from "./one-of-DifUsEYY.js";
+import { consume as x, provide as O } from "@lit/context";
+import "rxjs";
+var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? q(e, r) : e, d = t.length - 1, p; d >= 0; d--)
+    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
+  return i && o && _(e, r, o), o;
+};
+let a = 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 C(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 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,
+      icon: this.icon,
+      autocomplete: this.autocomplete,
+      options: this.options,
+      placeholder: this.placeholder,
+      labelField: this.labelField,
+      valueField: this.valueField
+    }, e = D("select", t);
+    this.options = S(this.options, {
+      labelField: this.labelField,
+      valueField: this.valueField
+    }), this.hasMatchingValue = this.options?.length ? this.options.find(({ value: i }) => i === this.value) !== void 0 : !1;
+    const r = this.optionsLoading ? n`<span>Loading...</span>` : n`
+          <option value="" disabled selected=${this.hasMatchingValue ? u : ""}>
+            ${this.placeholder ?? "Select an option"}
+          </option>
+          ${f(
+      this.options || [],
+      (i) => i?.value,
+      (i) => n`<option
+                value=${i.value}
+                selected=${this.hasMatchingValue && i.value === this.value ? "" : u}
+              >
+                ${i.label}
+              </option>`
+    )}
+        `;
+    return n`
+      ${w(this.uid, t)}
+
+      <div class="gui-widget">
+        <select
+          id=${this.uid}
+          tabindex="0"
+          data-cy=${`${this.uid}_select`}
+          class=${$(e.widgetClasses)}
+          ?required=${t.required}
+          ?disabled=${t.disabled || t.readonly}
+          autocomplete=${this.autocomplete || u}
+          @change=${this.valueChanged}
+          @blur=${this.onBlur}
+        >
+          ${r}
+        </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>
+        ${e.html}
+      </div>
+
+      ${E(this.uid, t)}
+    `;
+  }
+  updated(t) {
+    t.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(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const e = t.target;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: F(e.value, this.options) },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+l([
+  s({ type: String })
+], a.prototype, "uid", 2);
+l([
+  s({ type: String })
+], a.prototype, "label", 2);
+l([
+  s({ type: String, attribute: "locale-id" })
+], a.prototype, "localeId", 2);
+l([
+  s({ type: Array })
+], a.prototype, "errors", 2);
+l([
+  s({ type: Boolean })
+], a.prototype, "touched", 2);
+l([
+  s({ type: Boolean })
+], a.prototype, "required", 2);
+l([
+  s({ type: Boolean })
+], a.prototype, "disabled", 2);
+l([
+  s({ type: Boolean, attribute: "readonly" })
+], a.prototype, "readOnly", 2);
+l([
+  s({ type: String })
+], a.prototype, "value", 2);
+l([
+  s({ type: String })
+], a.prototype, "hint", 2);
+l([
+  s({ type: String })
+], a.prototype, "icon", 2);
+l([
+  s({ type: String })
+], a.prototype, "autocomplete", 2);
+l([
+  s({ type: String })
+], a.prototype, "options", 2);
+l([
+  s({ type: String })
+], a.prototype, "placeholder", 2);
+l([
+  s({ type: String })
+], a.prototype, "labelField", 2);
+l([
+  s({ type: String })
+], a.prototype, "valueField", 2);
+a = l([
+  v("gui-select")
+], a);
+typeof customElements < "u" && !customElements.get("gui-select") && customElements.define("gui-select", a);
+var I = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? P(e, r) : e, d = t.length - 1, p; d >= 0; d--)
+    (p = t[d]) && (o = (i ? p(e, r, o) : p(o)) || o);
+  return i && o && I(e, r, o), o;
+};
+let h = class extends m {
+  constructor() {
+    super(...arguments), this.adapter = new g(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(t) {
+    super.updated(t);
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-select", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), n`
+      <gui-select
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .hint=${this.adapter.templateData.hint}
+        .icon=${this.adapter.templateData.icon}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
+        .options=${this.adapter.templateData.options}
+        .labelField=${this.adapter.templateData.labelField}
+        .valueField=${this.adapter.templateData.valueField}
+        @change=${this.valueChanged}
+        @inputError=${this.onInputError}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-select>
+    `;
+  }
+  valueChanged(t) {
+    const e = t.detail.value;
+    this.adapter.valueChanged(e);
+  }
+  onInputError(t) {
+    this.adapter.injectValidationIssues([t.detail.message]);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+c([
+  x({ context: b }),
+  s({ attribute: !1 })
+], h.prototype, "formContext", 2);
+c([
+  O({ context: y })
+], h.prototype, "adapter", 2);
+h = c([
+  v("gui-select-input")
+], h);
+export {
+  h as SelectElement
+};

package/tabs-DzSCq_98.js

@@ -0,0 +1,13 @@
+function c(e, t, n) {
+  if (!e)
+    throw new TypeError("The element provided to the IntersectionObserver must exist");
+  const r = new IntersectionObserver((s) => {
+    s.forEach((o) => {
+      t(o.isIntersecting);
+    });
+  }, n);
+  return r.observe(e), r;
+}
+export {
+  c
+};

package/{tabs.element-k8JMNDXi.js → tabs.element-VLrtF1j5.js}

@@ -1,18 +1,20 @@
-import * as c from "@golemui/lit";
-import { createIntersectionObserver as p } from "@golemui/gui-components";
-import { consume as m, provide as v } from "@lit/context";
-import { LitElement as w, html as d, nothing as $ } from "lit";
-import { repeat as u } from "lit-html/directives/repeat.js";
-import { query as b, state as g, queryAll as y, property as f, customElement as _ } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-var T = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (s, i, e, t) => {
-  for (var r = t > 1 ? void 0 : t ? x(i, e) : i, a = s.length - 1, l; a >= 0; a--)
+import { LayoutWidgetAdapter as f, formContext as m, layoutContext as v } from "@golemui/lit";
+import { c } from "./tabs-DzSCq_98.js";
+import "@golemui/gui-shared";
+import { consume as w, provide as $ } from "@lit/context";
+import { LitElement as y, html as d, nothing as _ } from "lit";
+import { repeat as p } from "lit-html/directives/repeat.js";
+import { query as h, state as b, queryAll as T, property as g, customElement as x } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import "rxjs";
+var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (s, i, e, t) => {
+  for (var r = t > 1 ? void 0 : t ? O(i, e) : i, a = s.length - 1, l; a >= 0; a--)
     (l = s[a]) && (r = (t ? l(i, e, r) : l(r)) || r);
-  return t && r && T(i, e, r), r;
+  return t && r && C(i, e, r), r;
 };
-let n = class extends w {
+let n = class extends y {
   constructor() {
-    super(...arguments), this.activeTab = "", this.adapter = new c.LayoutWidgetAdapter(), this.subscriptions = [];
+    super(...arguments), this.activeTab = "", this.adapter = new f(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -32,10 +34,10 @@ let n = class extends w {
     );
   }
   firstUpdated(s) {
-    this.startObserver = p(
+    this.startObserver = c(
       this.startSentinel,
       (t) => this.isStartVisible = t
-    ), this.endObserver = p(
+    ), this.endObserver = c(
       this.endSentinel,
       (t) => this.isEndVisible = t
     );
@@ -52,10 +54,10 @@ let n = class extends w {
       "gui-tabs--start-shadow": !this.isStartVisible,
       "gui-tabs--end-shadow": !this.isEndVisible
     };
-    return d`<nav class=${h(i)} id=${this.widget.uid}>
+    return d`<nav class=${u(i)} id=${this.widget.uid}>
         <ul role="tablist">
           <li role="presentation" id="start-sentinel" class="gui-sentinel"></li>
-          ${this.adapter.templateData.tabs ? u(
+          ${this.adapter.templateData.tabs ? p(
       this.adapter.templateData.tabs,
       (e, t) => d`
                   <li role="presentation">
@@ -67,7 +69,7 @@ let n = class extends w {
                       id=${`tab_${this.widget.uid}_${t}`}
                       aria-controls=${`tabpanel_${this.widget.uid}_${t}`}
                       aria-selected=${e.uid === this.activeTab ? "true" : "false"}
-                      class=${h({ active: e.uid === this.activeTab })}
+                      class=${u({ active: e.uid === this.activeTab })}
                       @click=${() => this.onClickTab(e.uid)}
                       @keydown=${this.onKeyDown}
                       @focus=${(r) => r.target.scrollIntoView({
@@ -79,11 +81,11 @@ let n = class extends w {
                     </button>
                   </li>
                 `
-    ) : $}
+    ) : _}
           <li role="presentation" id="end-sentinel" class="gui-sentinel gui-sentinel__end"></li>
         </ul>
       </nav>
-      ${u(
+      ${p(
       s,
       (e) => e?.uid,
       (e, t) => d`<section
@@ -128,32 +130,32 @@ let n = class extends w {
   }
 };
 o([
-  b("#start-sentinel")
+  h("#start-sentinel")
 ], n.prototype, "startSentinel", 2);
 o([
-  b("#end-sentinel")
+  h("#end-sentinel")
 ], n.prototype, "endSentinel", 2);
 o([
-  g()
+  b()
 ], n.prototype, "isStartVisible", 2);
 o([
-  g()
+  b()
 ], n.prototype, "isEndVisible", 2);
 o([
-  y('button[role="tab"]')
+  T('button[role="tab"]')
 ], n.prototype, "tabButtons", 2);
 o([
-  f({ type: String })
+  g({ type: String })
 ], n.prototype, "activeTab", 2);
 o([
-  m({ context: c.formContext }),
-  f({ attribute: !1 })
+  w({ context: m }),
+  g({ attribute: !1 })
 ], n.prototype, "formContext", 2);
 o([
-  v({ context: c.layoutContext })
+  $({ context: v })
 ], n.prototype, "adapter", 2);
 n = o([
-  _("gui-tabs-layout")
+  x("gui-tabs-layout")
 ], n);
 export {
   n as TabsElement

package/templates-Dk1jxLwS.js

@@ -0,0 +1,75 @@
+import { filterTap as A } from "@golemui/core";
+import { html as o, nothing as t } from "lit";
+import { classMap as y } from "lit/directives/class-map.js";
+class T {
+  constructor(r, e) {
+    r.addController(this), this.getTargets = e.getTargets, this.getState = e.getState;
+  }
+  hostConnected() {
+  }
+  hostUpdated() {
+    const r = this.getTargets();
+    if (!r) return;
+    let e = [];
+    r instanceof NodeList ? e = Array.from(r) : Array.isArray(r) ? e = r : e = [r];
+    const { uid: l, templateData: a } = this.getState(), { touched: b, errors: c, readonly: f, disabled: _, hint: v } = a, $ = b && c && c.length > 0;
+    A(
+      e,
+      (i) => !!i,
+      (i) => {
+        const n = (d, g) => {
+          g ? i.setAttribute(d, g) : i.removeAttribute(d);
+        };
+        n("aria-describedby", v ? `${l}_hint` : null), n("aria-invalid", $ ? "true" : null), n("aria-errormessage", $ ? `${l}_errors` : null), n("aria-readonly", _ || f ? "true" : null);
+      }
+    );
+  }
+}
+const q = (s, r, e = !1, l = void 0, a = !0) => a ? r.label ? o`<label
+          class="gui-label"
+          for=${s}
+          data-cy=${`${s}_label`}
+          id=${l ? `${s}_${l}_label` : `${s}_label`}
+        >
+          ${r.label + (r.required ? " *" : "")} ${h(s, r)}
+          ${e ? u(s, r) : t}
+        </label>` : t : r.label ? o`<span
+          class="gui-label"
+          data-cy=${`${s}_label`}
+          id=${l ? `${s}_${l}_label` : `${s}_label`}
+        >
+          ${r.label + (r.required ? " *" : "")} ${h(s, r)}
+          ${e ? u(s, r) : t}
+        </span>` : t, h = (s, r) => r.hint ? o`<div class="gui-widget-hint" id=${`${s}_hint`}>${r.hint}</div>` : o``, E = (s, r) => {
+  const e = {
+    [`gui-${s}--icon`]: !1,
+    [`gui-${s}--icon-right`]: !1
+  };
+  if (r.icon) {
+    e[`gui-${s}--icon`] = !0;
+    const l = {
+      "gui-widget-icon": !0,
+      [r.icon]: !0
+    };
+    return {
+      widgetClasses: e,
+      html: o`<span class=${y(l)} data-icon=${r.icon}></span>`
+    };
+  } else
+    return { widgetClasses: e, html: o`` };
+}, u = (s, r) => {
+  const e = r.touched && r.errors && r.errors.length > 0;
+  return o`${e ? o`<ul class="gui-validator" id=${`${s}_errors`} data-cy=${`${s}_validator-errors`}>
+        ${r.errors?.map(
+    (l) => o`<li class="gui-validator__error" role="alert" data-cy=${`${s}_validator-error`}>
+              ${l}
+            </li>`
+  )}
+      </ul>` : ""}`;
+};
+export {
+  T as G,
+  E as a,
+  q as b,
+  u as c
+};