@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/cre8-form-element.js

@@ -1,47 +1,246 @@
 import { property as h } from "lit/decorators.js";
-import { Cre8Element as d } from "./cre8-element.js";
-var p = Object.defineProperty, o = Object.getOwnPropertyDescriptor, f = (r, t, i, n) => {
-  for (var e = o(t, i), s = r.length - 1, u; s >= 0; s--)
-    (u = r[s]) && (e = u(t, i, e) || e);
-  return e && p(t, i, e), e;
+import { Cre8Element as f } from "./cre8-element.js";
+let b = class extends Event {
+  constructor(t, s, i, e) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = i, this.subscribe = e ?? !1;
+  }
+};
+class v {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, s = !1) {
+    const i = s || !Object.is(t, this.o);
+    this.o = t, i && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [s, { disposer: i }] of this.subscriptions) s(this.o, i);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, s, i) {
+    if (!i) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: s });
+    const { disposer: e } = this.subscriptions.get(t);
+    t(this.value, e);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+let x = class extends Event {
+  constructor(t, s) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
+  }
+};
+class d extends v {
+  constructor(t, s, i) {
+    super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (e) => {
+      if (e.context !== this.context) return;
+      const a = e.contextTarget ?? e.composedPath()[0];
+      a !== this.host && (e.stopPropagation(), this.addCallback(e.callback, a, e.subscribe));
+    }, this.onProviderRequest = (e) => {
+      if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
+      const a = /* @__PURE__ */ new Set();
+      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new b(this.context, l, r, !0)));
+      e.stopPropagation();
+    }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController?.(this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new x(this.context, this.host));
+  }
+}
+function p({ context: n }) {
+  return (t, s) => {
+    const i = /* @__PURE__ */ new WeakMap();
+    if (typeof s == "object") return { get() {
+      return t.get.call(this);
+    }, set(e) {
+      return i.get(this).setValue(e), t.set.call(this, e);
+    }, init(e) {
+      return i.set(this, new d(this, { context: n, initialValue: e })), e;
+    } };
+    {
+      t.constructor.addInitializer(((r) => {
+        i.set(r, new d(r, { context: n }));
+      }));
+      const e = Object.getOwnPropertyDescriptor(t, s);
+      let a;
+      if (e === void 0) {
+        const r = /* @__PURE__ */ new WeakMap();
+        a = { get() {
+          return r.get(this);
+        }, set(l) {
+          i.get(this).setValue(l), r.set(this, l);
+        }, configurable: !0, enumerable: !0 };
+      } else {
+        const r = e.set;
+        a = { ...e, set(l) {
+          i.get(this).setValue(l), r?.call(this, l);
+        } };
+      }
+      return void Object.defineProperty(t, s, a);
+    }
+  };
+}
+const m = Symbol("cre8-form-internals"), y = Symbol("cre8-form-state");
+var V = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (n, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? _(t, s) : t, a = n.length - 1, r; a >= 0; a--)
+    (r = n[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
+  return i && e && V(t, s, e), e;
 };
-const l = class l extends d {
+const c = class c extends f {
+  constructor() {
+    super(), this.internalValue = "", this.defaultValue = "", this._formState = {
+      value: "",
+      disabled: !1,
+      required: !1,
+      isError: !1,
+      isSuccess: !1
+    }, this._internals = this.attachInternals();
+  }
   get value() {
     return this.internalValue;
   }
   /**
    * Sets the value of the form field.
    * 1. Stores the new value so it can be retrieved by the getter.
-   * 2. Sets the current value of the control.
-   * 3. Updates the actual field.
-   * 4. Rerenders the component.
+   * 2. Sets the current value of the control via ElementInternals.
+   * 3. Updates the actual field element.
+   * 4. Updates the form state context.
+   * 5. Triggers a re-render.
    */
   set value(t) {
-    const i = this.value;
-    this.internalValue = t, this.type !== "checkbox" && this.type !== "radio" && this.internals.setFormValue(t), this.updateField(), this.requestUpdate("value", i);
+    const s = this.value;
+    this.internalValue = t, this.type !== "checkbox" && this.type !== "radio" && this._internals?.setFormValue(t), this.updateField(), this.updateFormState(), this.requestUpdate("value", s);
   }
   /**
-   * update the actual field's value
+   * Updates the form state context for descendant consumption
+   */
+  updateFormState() {
+    this._formState = {
+      value: this.internalValue,
+      disabled: this.disabled ?? !1,
+      required: this.required ?? !1,
+      isError: this.isError ?? !1,
+      isSuccess: this.isSuccess ?? !1,
+      name: this.name
+    };
+  }
+  /**
+   * Updates the actual field element's value
    */
   updateField() {
-    this.field && (this.field.value = this.value !== void 0 ? this.value : "");
+    this.field && this.internalValue !== void 0 && (this.field.value = this.internalValue ?? "");
   }
+  /**
+   * Lifecycle hook called after first render
+   */
   firstUpdated() {
-    this.type !== "checkbox" && this.type !== "radio" && (this.defaultValue = this.value || this.getAttribute("value") || ""), this.updateField();
+    this.type !== "checkbox" && this.type !== "radio" && (this.defaultValue = this.value || this.getAttribute("value") || ""), this.updateField(), this.updateFormState();
+  }
+  /**
+   * Called when properties change
+   */
+  updated(t) {
+    super.updated(t), (t.has("disabled") || t.has("required") || t.has("isError") || t.has("isSuccess") || t.has("name")) && this.updateFormState();
   }
+  /**
+   * Form lifecycle callback - called when the form is reset
+   */
   formResetCallback() {
     this.value = this.defaultValue, this.updateField();
   }
-  constructor() {
-    super(), this.internals = this.attachInternals();
+  /**
+   * Form lifecycle callback - called when the element is disabled via fieldset
+   */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
+  /**
+   * Form lifecycle callback - called when form state is restored
+   */
+  formStateRestoreCallback(t, s) {
+    typeof t == "string" && (this.value = t);
+  }
+  /**
+   * Gets the form associated with this element
+   */
+  get form() {
+    return this._internals?.form ?? null;
+  }
+  /**
+   * Gets the validation message
+   */
+  get validationMessage() {
+    return this._internals?.validationMessage ?? "";
+  }
+  /**
+   * Gets the validity state
+   */
+  get validity() {
+    return this._internals?.validity;
+  }
+  /**
+   * Gets whether the element will be validated
+   */
+  get willValidate() {
+    return this._internals?.willValidate ?? !1;
+  }
+  /**
+   * Checks validity and reports to the user
+   */
+  reportValidity() {
+    return this._internals?.reportValidity() ?? !0;
+  }
+  /**
+   * Checks validity without reporting
+   */
+  checkValidity() {
+    return this._internals?.checkValidity() ?? !0;
+  }
+  /**
+   * Sets a custom validity message
+   */
+  setCustomValidity(t) {
+    this._internals && this.field && (t ? this._internals.setValidity({ customError: !0 }, t, this.field) : this._internals.setValidity({}));
   }
 };
-l.formAssociated = !0;
-let a = l;
-f([
+c.formAssociated = !0;
+let o = c;
+u([
+  p({ context: m })
+], o.prototype, "_internals", 2);
+u([
+  p({ context: y })
+], o.prototype, "_formState", 2);
+u([
+  h()
+], o.prototype, "name", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "required", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "isError", 2);
+u([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "isSuccess", 2);
+u([
   h()
-], a.prototype, "value");
+], o.prototype, "value", 1);
 export {
-  a as Cre8FormElement,
-  a as default
+  o as Cre8FormElement,
+  o as default
 };