@golemui/gui-lit 0.12.1 → 0.13.0

package/number.element-HaXEg_7U.js

@@ -0,0 +1,282 @@
+import { InputWidgetAdapter as y, formContext as v, inputContext as $ } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as m, nothing as n, html as c } from "lit";
+import { property as s, customElement as b } from "lit/decorators.js";
+import { G as f, b as g, c as x } from "./templates-Dk1jxLwS.js";
+import { styleMap as w } from "lit-html/directives/style-map.js";
+import { consume as D, provide as C } from "@lit/context";
+import "rxjs";
+var N = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (t, i, e, o) => {
+  for (var u = o > 1 ? void 0 : o ? E(i, e) : i, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (u = (o ? p(i, e, u) : p(u)) || u);
+  return o && u && N(i, e, u), u;
+};
+let a = class extends m {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.hint = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.step = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimum = void 0, this.maximum = void 0, this.autoGrow = !1, this.ariaController = new f(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 t = this.querySelector(`input[id="${this.uid}"]`), i = {
+      "min-width": "23px"
+    };
+    if (this.autoGrow)
+      if (t) {
+        t.style.width = "0px";
+        const o = Math.max(23, t.scrollWidth);
+        i.width = `${o}px`, i.maxWidth = `${o}px`, t.style.width = "";
+      } else
+        i.width = "47px";
+    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,
+      step: this.step,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete
+    };
+    return c`
+      ${g(this.uid, e)}
+
+      <div class="gui-widget">
+        <button
+          type="button"
+          tabindex="-1"
+          class="gui-button gui-number__minus"
+          ?disabled=${this.value <= this.minimum || this.disabled}
+          @click=${this.minus}
+        >
+          -
+        </button>
+
+        <input
+          type="number"
+          inputmode="decimal"
+          id=${this.uid}
+          data-cy=${`${this.uid}_number`}
+          style=${w(i)}
+          value=${this.value}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          step=${typeof this.step == "number" ? this.step : n}
+          placeholder=${this.placeholder || n}
+          autocomplete=${this.autocomplete || n}
+          @input=${this.valueChanged}
+          @keydown=${this.keyDown}
+          @blur=${this.onBlur}
+        />
+
+        <button
+          type="button"
+          tabindex="-1"
+          class="gui-button gui-number__plus"
+          ?disabled=${this.value >= this.maximum || this.disabled}
+          @click=${this.plus}
+        >
+          +
+        </button>
+      </div>
+
+      ${x(this.uid, e)}
+    `;
+  }
+  keyDown(t) {
+    switch (t.stopPropagation(), t.key) {
+      case "ArrowUp":
+        t.preventDefault(), this.plus();
+        break;
+      case "ArrowDown":
+        t.preventDefault(), this.minus();
+        break;
+    }
+  }
+  minus() {
+    if (!this.readOnly) {
+      const t = this.querySelector(`input[id="${this.uid}"]`), i = typeof this.step == "number" ? this.step : 1;
+      let e = Number(t.valueAsNumber) || Number(t.valueAsNumber) === 0 ? t.valueAsNumber - i : 1;
+      e = Number(this.maximum) ? Math.min(e, this.maximum) : e, e = Number(this.minimum) ? Math.max(e, this.minimum) : e, t.valueAsNumber = e, this.value = e, this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  plus() {
+    if (!this.readOnly) {
+      const t = this.querySelector(`input[id="${this.uid}"]`), i = typeof this.step == "number" ? this.step : 1;
+      let e = Number(t.valueAsNumber) || Number(t.valueAsNumber) === 0 ? t.valueAsNumber + i : 1;
+      e = Number(this.maximum) ? Math.min(e, this.maximum) : e, e = Number(this.minimum) ? Math.max(e, this.minimum) : e, t.valueAsNumber = e, this.value = e, this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  valueChanged(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const i = t.target;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: i.valueAsNumber },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+r([
+  s({ type: String })
+], a.prototype, "uid", 2);
+r([
+  s({ type: String })
+], a.prototype, "label", 2);
+r([
+  s({ type: String })
+], a.prototype, "hint", 2);
+r([
+  s({ type: String, attribute: "locale-id" })
+], a.prototype, "localeId", 2);
+r([
+  s({ type: Array })
+], a.prototype, "errors", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "touched", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "required", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "disabled", 2);
+r([
+  s({ type: Boolean, attribute: "readonly" })
+], a.prototype, "readOnly", 2);
+r([
+  s({ type: Number })
+], a.prototype, "value", 2);
+r([
+  s({ type: Number })
+], a.prototype, "step", 2);
+r([
+  s({ type: String })
+], a.prototype, "placeholder", 2);
+r([
+  s({ type: String })
+], a.prototype, "autocomplete", 2);
+r([
+  s({ type: Number })
+], a.prototype, "minimum", 2);
+r([
+  s({ type: Number })
+], a.prototype, "maximum", 2);
+r([
+  s({ type: Number })
+], a.prototype, "autoGrow", 2);
+a = r([
+  b("gui-number")
+], a);
+typeof customElements < "u" && !customElements.get("gui-number") && customElements.define("gui-number", a);
+var _ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (t, i, e, o) => {
+  for (var u = o > 1 ? void 0 : o ? O(i, e) : i, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (u = (o ? p(i, e, u) : p(u)) || u);
+  return o && u && _(i, e, u), u;
+};
+let d = class extends m {
+  constructor() {
+    super(...arguments), this.adapter = new y(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(t) {
+    super.updated(t);
+    const i = this.adapter.templateData.size;
+    i ? this.style.flex = String(i) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-number", "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(), c`
+      <gui-number
+        .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}
+        .step=${this.adapter.templateData.step}
+        .minimum=${this.adapter.templateData.minimum}
+        .maximum=${this.adapter.templateData.maximum}
+        .autoGrow=${this.adapter.templateData.autoGrow}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
+        @input=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-number>
+    `;
+  }
+  valueChanged(t) {
+    const i = t.detail.value;
+    this.adapter.valueChanged(i);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+h([
+  D({ context: v }),
+  s({ attribute: !1 })
+], d.prototype, "formContext", 2);
+h([
+  C({ context: $ })
+], d.prototype, "adapter", 2);
+d = h([
+  b("gui-number-input")
+], d);
+export {
+  d as NumberElement
+};

package/one-of-DifUsEYY.js

@@ -0,0 +1,48 @@
+import { isOption as c } from "@golemui/gui-shared";
+function l(e) {
+  const r = typeof e;
+  return r === "string" || r === "number";
+}
+function b(e, r) {
+  return r.find((t) => t.value.toString() === e)?.value;
+}
+const h = (e, r) => {
+  if (Array.isArray(e) && e.length > 0 && !c(e[0])) {
+    if (l(e[0]))
+      return e.map((t) => ({
+        label: t.toString(),
+        value: t
+      }));
+    if (u(e[0], r)) {
+      const t = f(e[0], r);
+      return e.map(t);
+    } else
+      throw new Error("Invalid option shape");
+  }
+  return e;
+}, u = (e, { labelField: r, valueField: t }) => {
+  if (e === null || typeof e != "object")
+    return !1;
+  const n = e, o = r ? Object.prototype.hasOwnProperty.call(n, r) : !1, a = t ? Object.prototype.hasOwnProperty.call(n, t) : !1;
+  return r && !o ? !1 : !(t && !a);
+};
+function f(e, { labelField: r, valueField: t }) {
+  if (e === null || typeof e != "object")
+    throw new Error("Provided value is not an object");
+  const n = e, o = r && Object.prototype.hasOwnProperty.call(n, r) ? r : void 0, a = t && Object.prototype.hasOwnProperty.call(n, t) ? t : void 0;
+  if (!o && !a)
+    throw new Error("Neither labelField nor valueField exists on the object");
+  return (i) => {
+    if (i === null || typeof i != "object")
+      throw new Error("Item is not an object");
+    const s = i;
+    return {
+      label: o ? s[o] : "",
+      value: a ? s[a] : ""
+    };
+  };
+}
+export {
+  b as i,
+  h as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/gui-lit",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "type": "module",
   "main": "./index.umd.cjs",
   "module": "./index.js",
@@ -21,11 +21,11 @@
     "*.md"
   ],
   "peerDependencies": {
-    "@golemui/lit": "0.12.1",
-    "@golemui/core": "0.12.1",
-    "@golemui/gui-components": "0.12.1",
-    "@golemui/gui-shared": "0.12.1",
-    "@golemui/gui-validators": "0.12.1",
+    "@golemui/lit": "0.13.0",
+    "@golemui/core": "0.13.0",
+    "@golemui/gui-components": "0.13.0",
+    "@golemui/gui-shared": "0.13.0",
+    "@golemui/gui-validators": "0.13.0",
     "@lit/context": "^1.1.6",
     "lit-html": "^3.3.1",
     "lit": "^3.3.1",

package/password.element-B4-0SCe4.js

@@ -0,0 +1,238 @@
+import { InputWidgetAdapter as m, formContext as y, inputContext as P } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as w, nothing as n, html as u } from "lit";
+import { property as o, state as g, customElement as b } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { G as $, a as f, b as I, c as C } from "./templates-Dk1jxLwS.js";
+import { consume as D, provide as L } from "@lit/context";
+import "rxjs";
+var S = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (t, a, i, d) => {
+  for (var r = d > 1 ? void 0 : d ? _(a, i) : a, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (r = (d ? p(a, i, r) : p(r)) || r);
+  return d && r && S(a, i, r), r;
+};
+let e = 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.icon = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.showPasswordIcon = void 0, this.hidePasswordIcon = void 0, this.showPasswordLabel = void 0, this.hidePasswordLabel = void 0, this.showPassword = !1, 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 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,
+      showPasswordIcon: this.showPasswordIcon,
+      hidePasswordIcon: this.hidePasswordIcon,
+      showPasswordLabel: this.showPasswordLabel,
+      hidePasswordLabel: this.hidePasswordLabel
+    }, a = f("password", t), i = {
+      "gui-password--icon": !!this.icon
+    };
+    return u`
+      ${I(this.uid, t)}
+
+      <div class="gui-widget">
+        <input
+          type=${this.showPassword ? "text" : "password"}
+          id=${this.uid}
+          data-cy=${`${this.uid}_password`}
+          class=${v(i)}
+          value=${this.value}
+          ?required=${this.disabled}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          placeholder=${this.placeholder || n}
+          autocomplete=${this.autocomplete || n}
+          @input=${this.valueChanged}
+          @blur=${this.onBlur}
+        />
+        ${a.html}
+        <button
+          class=${`gui-password__toggle gui-widget-icon ${this.showPassword && t.showPasswordIcon ? t.showPasswordIcon : ""} ${!this.showPassword && t.hidePasswordIcon ? t.hidePasswordIcon : ""}`}
+          data-icon=${this.showPassword ? t.showPasswordIcon : t.hidePasswordIcon}
+          type="button"
+          tabindex="-1"
+          @click=${() => this.showPassword = !this.showPassword}
+        >
+          ${t.showPasswordIcon || t.hidePasswordIcon ? n : u`<span
+                >${this.showPassword ? t.hidePasswordLabel ?? "Hide" : t.showPasswordLabel ?? "Show"}</span
+              >`}
+        </button>
+      </div>
+
+      ${C(this.uid, t)}
+    `;
+  }
+  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
+      })
+    );
+  }
+};
+s([
+  o({ type: String })
+], e.prototype, "uid", 2);
+s([
+  o({ type: String })
+], e.prototype, "label", 2);
+s([
+  o({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+s([
+  o({ type: Array })
+], e.prototype, "errors", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "touched", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "required", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "disabled", 2);
+s([
+  o({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+s([
+  o({ type: String })
+], e.prototype, "value", 2);
+s([
+  o({ type: String })
+], e.prototype, "hint", 2);
+s([
+  o({ type: String })
+], e.prototype, "icon", 2);
+s([
+  o({ type: String })
+], e.prototype, "placeholder", 2);
+s([
+  o({ type: String })
+], e.prototype, "autocomplete", 2);
+s([
+  o({ type: String })
+], e.prototype, "showPasswordIcon", 2);
+s([
+  o({ type: String })
+], e.prototype, "hidePasswordIcon", 2);
+s([
+  o({ type: String })
+], e.prototype, "showPasswordLabel", 2);
+s([
+  o({ type: String })
+], e.prototype, "hidePasswordLabel", 2);
+s([
+  g()
+], e.prototype, "showPassword", 2);
+e = s([
+  b("gui-password")
+], e);
+typeof customElements < "u" && !customElements.get("gui-password") && customElements.define("gui-password", e);
+var x = Object.defineProperty, O = Object.getOwnPropertyDescriptor, c = (t, a, i, d) => {
+  for (var r = d > 1 ? void 0 : d ? O(a, i) : a, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (r = (d ? p(a, i, r) : p(r)) || r);
+  return d && r && x(a, i, r), r;
+};
+let h = class extends w {
+  constructor() {
+    super(...arguments), this.adapter = new m(), 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-password", "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(), u`
+      <gui-password
+        .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}
+        .showPasswordIcon=${this.adapter.templateData.showPasswordIcon}
+        .hidePasswordIcon=${this.adapter.templateData.hidePasswordIcon}
+        .showPasswordLabel=${this.adapter.templateData.showPasswordLabel}
+        .hidePasswordLabel=${this.adapter.templateData.hidePasswordLabel}
+        @input=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-password>
+    `;
+  }
+  valueChanged(t) {
+    const a = t.detail.value;
+    this.adapter.valueChanged(a);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+c([
+  D({ context: y }),
+  o({ attribute: !1 })
+], h.prototype, "formContext", 2);
+c([
+  L({ context: P })
+], h.prototype, "adapter", 2);
+h = c([
+  b("gui-password-input")
+], h);
+export {
+  h as PasswordElement
+};