@golemui/gui-lit 1.2.0 → 1.2.1-rc.0

package/templates-Df7abEkB.js

@@ -1,92 +0,0 @@
-import { filterTap as C } from "@golemui/core";
-import { html as a, nothing as i } from "lit";
-import { classMap as _ } 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: n } = this.getState(), { touched: f, errors: c, readonly: v, disabled: A, hint: y, required: q } = n, d = f && c && c.length > 0;
-    C(
-      e,
-      (t) => !!t,
-      (t) => {
-        const o = ($, u) => {
-          u ? t.setAttribute($, u) : t.removeAttribute($);
-        };
-        o("aria-describedby", y ? `${l}_hint` : null), o("aria-invalid", d ? "true" : null), o("aria-errormessage", d ? `${l}_errors` : null), o("aria-readonly", v ? "true" : null), o("aria-disabled", A ? "true" : null), o("aria-required", q ? "true" : null);
-      }
-    );
-  }
-}
-const g = (s) => s ? a`<span aria-hidden="true"> *</span>` : i, E = (s, r, e = !1, l = void 0, n = !0) => n ? r.label ? a`<label
-          class="gui-label"
-          for=${s}
-          data-cy=${`${s}_label`}
-          id=${l ? `${s}_${l}_label` : `${s}_label`}
-        >
-          <span class="gui-label__text"
-            >${r.label}${g(r.required)}</span
-          >
-          ${h(s, r)} ${e ? b(s, r) : i}
-        </label>` : i : r.label ? a`<span
-          class="gui-label"
-          data-cy=${`${s}_label`}
-          id=${l ? `${s}_${l}_label` : `${s}_label`}
-        >
-          <span class="gui-label__text"
-            >${r.label}${g(r.required)}</span
-          >
-          ${h(s, r)} ${e ? b(s, r) : i}
-        </span>` : i, h = (s, r) => r.hint ? a`<div class="gui-widget-hint" id=${`${s}_hint`}>${r.hint}</div>` : a``, G = (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: a`<span
-        class=${_(l)}
-        data-icon=${r.icon}
-        aria-hidden="true"
-      ></span>`
-    };
-  } else
-    return { widgetClasses: e, html: a`` };
-}, b = (s, r) => {
-  const e = r.touched && r.errors && r.errors.length > 0;
-  return a`<ul
-    class=${_({
-    "gui-validator": !0,
-    "gui-validator--empty": !e
-  })}
-    id=${`${s}_errors`}
-    role="alert"
-    data-cy=${e ? `${s}_validator-errors` : i}
-  >
-    ${e ? r.errors?.map(
-    (n) => a`<li class="gui-validator__error" data-cy=${`${s}_validator-error`}>
-              ${n}
-            </li>`
-  ) : i}
-  </ul>`;
-};
-export {
-  T as G,
-  G as a,
-  E as b,
-  b as c,
-  g as r
-};

package/textarea.element-Dx7eYEnl.js

@@ -1,239 +0,0 @@
-import { InputWidgetAdapter as v, formContext as b, inputContext as $ } from "@golemui/lit";
-import { LitElement as m, html as n, nothing as c } from "lit";
-import { property as i, customElement as g } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
-import { G as f, b as C, c as w } from "./templates-Df7abEkB.js";
-import { styleMap as D } from "lit-html/directives/style-map.js";
-import { consume as _, provide as L } from "@lit/context";
-import "rxjs";
-var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (t, a, d, s) => {
-  for (var e = s > 1 ? void 0 : s ? q(a, d) : a, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
-  return s && e && S(a, d, e), e;
-};
-let r = 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.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.maxLength = void 0, this.ariaController = new f(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,
-          required: this.required
-        }
-      })
-    });
-  }
-  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 a = n``;
-    if (t.counterMode && t.maxLength) {
-      const e = {
-        "gui-textarea--counter": !0,
-        "gui-textarea--counter__error": (t.value?.length ?? 0) > t.maxLength
-      }, l = t.counterMode === "current" ? n`<span>${t.value?.length ?? 0}</span>` : n`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
-      a = n`<div class=${x(e)}>
-        ${l}
-        <span> / ${t.maxLength}</span>
-      </div>`;
-    }
-    const d = {
-      height: `${t.minimumHeight}px`,
-      "min-height": `${t.minimumHeight}px`
-    }, s = this.querySelector(`textarea[id="${this.uid}"]`);
-    if (this.autoGrow && s) {
-      const e = window.getComputedStyle(s), l = parseFloat(e.paddingTop), p = parseFloat(e.paddingBottom), y = l + p;
-      s.style.height = "auto", d.height = `${Math.max(this.minimumHeight ?? 120, s.scrollHeight - y)}px`;
-    }
-    return n`
-      ${C(this.uid, t)}
-
-      <div class="gui-widget">
-        <textarea
-          id=${this.uid}
-          data-cy=${`${this.uid}_textarea`}
-          class="gui-widget-input"
-          style=${D(d)}
-          ?required=${t.required}
-          ?disabled=${t.disabled}
-          ?readonly=${t.readonly}
-          placeholder=${t.placeholder || c}
-          autocomplete=${this.autocomplete || c}
-          .value=${this.value || ""}
-          @input=${this.valueChanged}
-          @blur=${this.onBlur}
-        ></textarea>
-      </div>
-
-      <div class="gui-textarea--validation">
-        <div>${w(this.uid, t)}</div>
-        ${a}
-      </div>
-    `;
-  }
-  valueChanged(t) {
-    if (t.stopPropagation(), !this.readOnly) {
-      const a = t.target;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: { value: a.value },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  onBlur() {
-    this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-o([
-  i({ type: String })
-], r.prototype, "uid", 2);
-o([
-  i({ type: String })
-], r.prototype, "label", 2);
-o([
-  i({ type: String, attribute: "locale-id" })
-], r.prototype, "localeId", 2);
-o([
-  i({ type: Array })
-], r.prototype, "errors", 2);
-o([
-  i({ type: Boolean })
-], r.prototype, "touched", 2);
-o([
-  i({ type: Boolean })
-], r.prototype, "required", 2);
-o([
-  i({ type: Boolean })
-], r.prototype, "disabled", 2);
-o([
-  i({ type: Boolean, attribute: "readonly" })
-], r.prototype, "readOnly", 2);
-o([
-  i({ type: String })
-], r.prototype, "value", 2);
-o([
-  i({ type: String })
-], r.prototype, "hint", 2);
-o([
-  i({ type: String })
-], r.prototype, "placeholder", 2);
-o([
-  i({ type: String })
-], r.prototype, "autocomplete", 2);
-o([
-  i({ type: String, attribute: "countermode" })
-], r.prototype, "counterMode", 2);
-o([
-  i({ type: Number, attribute: "minimumheight" })
-], r.prototype, "minimumHeight", 2);
-o([
-  i({ type: Boolean, attribute: "autogrow" })
-], r.prototype, "autoGrow", 2);
-o([
-  i({ type: Number, attribute: "maxlength" })
-], r.prototype, "maxLength", 2);
-r = o([
-  g("gui-textarea")
-], r);
-typeof customElements < "u" && !customElements.get("gui-textarea") && customElements.define("gui-textarea", r);
-var O = Object.defineProperty, E = Object.getOwnPropertyDescriptor, h = (t, a, d, s) => {
-  for (var e = s > 1 ? void 0 : s ? E(a, d) : a, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (e = (s ? p(a, d, e) : p(e)) || e);
-  return s && e && O(a, d, e), e;
-};
-let u = class extends m {
-  constructor() {
-    super(...arguments), this.adapter = new v(), this.subscriptions = [];
-  }
-  createRenderRoot() {
-    return this;
-  }
-  updated(t) {
-    super.updated(t);
-    const a = this.adapter.templateData.size;
-    a ? this.style.flex = String(a) : this.style.removeProperty("flex");
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-textarea", "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-textarea
-        .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}
-        .placeholder=${this.adapter.templateData.placeholder}
-        .autocomplete=${this.adapter.templateData.autocomplete}
-        .counterMode=${this.adapter.templateData.counterMode}
-        .minimumHeight=${this.adapter.templateData.minimumHeight}
-        .autoGrow=${this.adapter.templateData.autoGrow}
-        .maxLength=${this.adapter.templateData.validator?.maxLength}
-        @input=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-textarea>
-    `;
-  }
-  valueChanged(t) {
-    const a = t.detail.value;
-    this.adapter.valueChanged(a);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-};
-h([
-  _({ context: b }),
-  i({ attribute: !1 })
-], u.prototype, "formContext", 2);
-h([
-  L({ context: $ })
-], u.prototype, "adapter", 2);
-u = h([
-  g("gui-textarea-input")
-], u);
-export {
-  u as TextareaElement
-};

package/textinput.element-BnIoDRmY.js

@@ -1,205 +0,0 @@
-import { InputWidgetAdapter as b, formContext as v, inputContext as g } from "@golemui/lit";
-import { LitElement as c, nothing as h, html as m } from "lit";
-import { property as r, customElement as y } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { G as $, a as x, b as C, c as D } from "./templates-Df7abEkB.js";
-import { consume as O, provide as _ } from "@lit/context";
-import "rxjs";
-var q = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
-  for (var a = l > 1 ? void 0 : l ? w(e, o) : e, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
-  return l && a && q(e, o, a), a;
-};
-let i = class extends c {
-  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,
-          required: this.required
-        }
-      })
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.classList.add("gui-field");
-  }
-  render() {
-    super.render();
-    const t = {
-      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
-    }, e = x("textinput", t), o = {
-      "gui-widget-input": !0,
-      "gui-textinput--icon": !!this.icon
-    };
-    return m`
-      ${C(this.uid, t)}
-
-      <div class="gui-widget">
-        <input
-          type="text"
-          id=${this.uid}
-          data-cy=${`${this.uid}_textinput`}
-          class=${f(o)}
-          value=${this.value}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readOnly}
-          placeholder=${this.placeholder || h}
-          autocomplete=${this.autocomplete || h}
-          @input=${this.valueChanged}
-          @blur=${this.onBlur}
-        />
-        ${e.html}
-      </div>
-
-      ${D(this.uid, t)}
-    `;
-  }
-  valueChanged(t) {
-    if (t.stopPropagation(), !this.readOnly) {
-      const e = t.target;
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: { value: e.value },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  onBlur() {
-    this.dispatchEvent(
-      new CustomEvent("blur", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-};
-s([
-  r({ type: String })
-], i.prototype, "uid", 2);
-s([
-  r({ type: String })
-], i.prototype, "label", 2);
-s([
-  r({ type: String, attribute: "locale-id" })
-], i.prototype, "localeId", 2);
-s([
-  r({ type: Array })
-], i.prototype, "errors", 2);
-s([
-  r({ type: Boolean })
-], i.prototype, "touched", 2);
-s([
-  r({ type: Boolean })
-], i.prototype, "required", 2);
-s([
-  r({ type: Boolean })
-], i.prototype, "disabled", 2);
-s([
-  r({ type: Boolean, attribute: "readonly" })
-], i.prototype, "readOnly", 2);
-s([
-  r({ type: String })
-], i.prototype, "value", 2);
-s([
-  r({ type: String })
-], i.prototype, "hint", 2);
-s([
-  r({ type: String })
-], i.prototype, "icon", 2);
-s([
-  r({ type: String })
-], i.prototype, "placeholder", 2);
-s([
-  r({ type: String })
-], i.prototype, "autocomplete", 2);
-i = s([
-  y("gui-textinput")
-], i);
-typeof customElements < "u" && !customElements.get("gui-textinput") && customElements.define("gui-textinput", i);
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, u = (t, e, o, l) => {
-  for (var a = l > 1 ? void 0 : l ? S(e, o) : e, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (a = (l ? d(e, o, a) : d(a)) || a);
-  return l && a && E(e, o, a), a;
-};
-let n = class extends c {
-  constructor() {
-    super(...arguments), this.adapter = new b(), 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-textinput", "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(), m`
-      <gui-textinput
-        .uid=${this.widget.uid}
-        .label=${this.adapter.templateData.label}
-        .hint=${this.adapter.templateData.hint}
-        .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}
-        .icon=${this.adapter.templateData.icon}
-        .placeholder=${this.adapter.templateData.placeholder}
-        .autocomplete=${this.adapter.templateData.autocomplete}
-        @input=${this.valueChanged}
-        @blur=${() => this.adapter.onBlur()}
-      ></gui-textinput>
-    `;
-  }
-  valueChanged(t) {
-    const e = t.detail.value;
-    this.adapter.valueChanged(e);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
-  }
-};
-u([
-  O({ context: v }),
-  r({ attribute: !1 })
-], n.prototype, "formContext", 2);
-u([
-  _({ context: g })
-], n.prototype, "adapter", 2);
-n = u([
-  y("gui-textinput-input")
-], n);
-export {
-  n as TextinputElement
-};