@golemui/gui-lit 0.12.2 → 0.13.0

package/currency.element-C7SZkoPP.js

@@ -0,0 +1,266 @@
+import { InputWidgetAdapter as g, formContext as b, inputContext as v } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as m, nothing as p, html as d } from "lit";
+import { property as a, state as f, query as $, customElement as y } from "lit/decorators.js";
+import { classMap as D } from "lit/directives/class-map.js";
+import { G as C, a as x, b as F, c as S } from "./templates-Dk1jxLwS.js";
+import { consume as _, provide as w } from "@lit/context";
+import "rxjs";
+var E = Object.defineProperty, I = Object.getOwnPropertyDescriptor, r = (t, i, o, l) => {
+  for (var s = l > 1 ? void 0 : l ? I(i, o) : i, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (s = (l ? u(i, o, s) : u(s)) || s);
+  return l && s && E(i, o, s), s;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = void 0, this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.currency = void 0, this.step = void 0, this.maximumFractionDigits = void 0, this.minimumFractionDigits = void 0, this.hint = void 0, this.icon = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.ariaController = new C(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");
+  }
+  willUpdate(t) {
+    t.has("value") && document.activeElement !== this.inputElement && (this.displayValue = this.formatCurrency(this.value));
+  }
+  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,
+      currency: this.currency,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumFractionDigits: this.minimumFractionDigits,
+      icon: this.icon,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete
+    };
+    this.displayValue = this.formatCurrency(this.value);
+    const i = x("currency", t), o = {
+      "gui-currency--icon": !!this.icon
+    };
+    return d`
+      ${F(this.uid, t)}
+
+      <div class="gui-widget">
+        <input
+          type="number"
+          inputmode="decimal"
+          id=${this.uid}
+          data-cy=${`${this.uid}_currency`}
+          class=${D(o)}
+          step=${this.step && this.step > 0 ? this.step : p}
+          .value=${this.value ?? ""}
+          ?required=${this.disabled}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readOnly}
+          placeholder=${this.placeholder || p}
+          autocomplete=${this.autocomplete || p}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        ${this.displayValue ? d`<label
+              for=${this.uid}
+              class="gui-currency__format-value ${this.icon ? "gui-currency__format-value--icon" : ""}"
+              >${this.displayValue}</label
+            >` : p}
+        ${i.html}
+      </div>
+
+      ${S(this.uid, t)}
+    `;
+  }
+  handleInput(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const i = t.target;
+      this.displayValue = this.formatCurrency(i.valueAsNumber), this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: i.valueAsNumber },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  handleFocus() {
+    this.displayValue = this.formatCurrency(this.value);
+  }
+  handleBlur() {
+    this.displayValue = this.formatCurrency(this.value), this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  formatCurrency(t) {
+    if (t === "" || t === void 0 || t === null || isNaN(t)) return "";
+    try {
+      return new Intl.NumberFormat(this.localeId ?? "en", {
+        style: "currency",
+        currency: this.currency ?? "USD",
+        maximumFractionDigits: this.maximumFractionDigits ?? Math.max(this.minimumFractionDigits ?? 2, 2),
+        minimumFractionDigits: this.minimumFractionDigits ?? 2
+      }).format(t);
+    } catch (i) {
+      return console.warn("Invalid locale or currency", i), t.toString();
+    }
+  }
+  get separators() {
+    const t = new Intl.NumberFormat(this.localeId ?? "en").format(1111.1);
+    return {
+      group: t.replace(/1/g, "").replace(/\d/g, "")[0] || ",",
+      decimal: t.replace(/1/g, "").replace(/\d/g, "").slice(-1) || "."
+    };
+  }
+};
+r([
+  a({ type: String })
+], e.prototype, "uid", 2);
+r([
+  a({ type: String })
+], e.prototype, "label", 2);
+r([
+  a({ type: String, attribute: "locale-id" })
+], e.prototype, "localeId", 2);
+r([
+  a({ type: Array })
+], e.prototype, "errors", 2);
+r([
+  a({ type: Boolean })
+], e.prototype, "touched", 2);
+r([
+  a({ type: Boolean })
+], e.prototype, "required", 2);
+r([
+  a({ type: Boolean })
+], e.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, attribute: "readonly" })
+], e.prototype, "readOnly", 2);
+r([
+  a({ type: String })
+], e.prototype, "value", 2);
+r([
+  a({ type: String })
+], e.prototype, "currency", 2);
+r([
+  a({ type: String })
+], e.prototype, "step", 2);
+r([
+  a({ type: String })
+], e.prototype, "maximumFractionDigits", 2);
+r([
+  a({ type: String })
+], e.prototype, "minimumFractionDigits", 2);
+r([
+  a({ type: String })
+], e.prototype, "hint", 2);
+r([
+  a({ type: String })
+], e.prototype, "icon", 2);
+r([
+  a({ type: String })
+], e.prototype, "placeholder", 2);
+r([
+  a({ type: String })
+], e.prototype, "autocomplete", 2);
+r([
+  f()
+], e.prototype, "displayValue", 2);
+r([
+  $("input")
+], e.prototype, "inputElement", 2);
+e = r([
+  y("gui-currency")
+], e);
+typeof customElements < "u" && !customElements.get("gui-currency") && customElements.define("gui-currency", e);
+var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, h = (t, i, o, l) => {
+  for (var s = l > 1 ? void 0 : l ? q(i, o) : i, n = t.length - 1, u; n >= 0; n--)
+    (u = t[n]) && (s = (l ? u(i, o, s) : u(s)) || s);
+  return l && s && O(i, o, s), s;
+};
+let c = class extends m {
+  constructor() {
+    super(...arguments), this.adapter = new g(), 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-currency", "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(), d`
+      <gui-currency
+        .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}
+        .currency=${this.adapter.templateData.currency}
+        .step=${this.adapter.templateData.step}
+        .maximumFractionDigits=${this.adapter.templateData.maximumFractionDigits}
+        .minimumFractionDigits=${this.adapter.templateData.minimumFractionDigits}
+        .icon=${this.adapter.templateData.icon}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
+        .localeId=${this.adapter.templateData.lang}
+        @input=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-currency>
+    `;
+  }
+  valueChanged(t) {
+    const i = t.detail.value;
+    this.adapter.valueChanged(i);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+h([
+  _({ context: b }),
+  a({ attribute: !1 })
+], c.prototype, "formContext", 2);
+h([
+  w({ context: v })
+], c.prototype, "adapter", 2);
+c = h([
+  y("gui-currency-input")
+], c);
+export {
+  c as CurrencyElement
+};