@viasat/beam-web-components 2.69.0 → 2.71.0

package/wip/Form/Form.decorator.d.ts

@@ -20,11 +20,26 @@ export declare class FormField extends LitElement {
     value: string;
     validationRules: Array<FormValidator>;
     inputAriaLabel: Optional<string>;
+    /**
+     * Specify error text and display error state.
+     * Pass a string to show an error message, or `true` to show the error
+     * state without a message.
+     */
+    error?: Optional<boolean | string>;
     formContext: BmFormContext;
     private _validationErrors;
     protected validationErrors: () => Array<Optional<string>>;
+    protected resolveError: () => {
+        invalid: boolean;
+        errorMessage: Optional<string>;
+    };
     protected setAssociatedValue(value: FormValue): void;
     protected requestAssociatedSubmit(): void;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     protected setValidationErrors: (errors: Array<Optional<string>>) => void;
     protected validationErrorShown: () => boolean;
     connectedCallback(): void;
@@ -37,11 +52,13 @@ export declare class FormField extends LitElement {
     protected forwardLabelFocus: () => void;
     protected validateFieldOnBlur: (event: FocusEvent) => void;
     protected validateFieldOnChange: (event: Event) => void;
+    protected syncValidity: () => void;
+    updated(cP: Map<string, unknown>): void;
     protected getContextValue: () => string;
     protected setContextValue: () => void;
     protected setContextValidation: () => void;
     protected contextInitialsChanged: () => boolean;
-    protected renderError: (error: Optional<string>, disabled: boolean) => typeof nothing | import('lit').TemplateResult<1>;
-    protected renderValidationErrors: () => typeof nothing | import('lit').TemplateResult<1>;
+    protected renderError: (error: Optional<string>, disabled: boolean) => import('lit').TemplateResult<1> | typeof nothing;
+    protected renderValidationErrors: () => import('lit').TemplateResult<1> | typeof nothing;
 }
 //# sourceMappingURL=Form.decorator.d.ts.map

package/wip/Form/Form.decorator.js

@@ -1,65 +1,88 @@
-var V = (a) => {
-  throw TypeError(a);
+var C = (e) => {
+  throw TypeError(e);
 };
-var y = (a, r, t) => r.has(a) || V("Cannot " + t);
-var f = (a, r, t) => (y(a, r, "read from private field"), t ? t.call(a) : r.get(a)), b = (a, r, t) => r.has(a) ? V("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), m = (a, r, t, e) => (y(a, r, "write to private field"), e ? e.call(a, t) : r.set(a, t), t);
-import { consume as E } from "@lit/context";
-import { LitElement as k, nothing as v, html as x } from "lit";
-import { property as d, state as A } from "lit/decorators.js";
-import { createRef as F } from "lit/directives/ref.js";
-import { b as I } from "../../chunks/tokens.CTW8Tt94.js";
-import { bmFormInitials as u, bmFormContext as S } from "./Form.context.js";
-import { createId as p } from "./Form.utils.js";
+var E = (e, s, t) => s.has(e) || C("Cannot " + t);
+var h = (e, s, t) => (E(e, s, "read from private field"), t ? t.call(e) : s.get(e)), y = (e, s, t) => s.has(e) ? C("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), f = (e, s, t, i) => (E(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import { consume as k } from "@lit/context";
+import { LitElement as F, nothing as V, html as g } from "lit";
+import { property as u, state as A } from "lit/decorators.js";
+import { createRef as I } from "lit/directives/ref.js";
+import { b as S } from "../../chunks/tokens.CTW8Tt94.js";
+import { bmFormInitials as p, bmFormContext as R } from "./Form.context.js";
+import { createId as b } from "./Form.utils.js";
 import "../../chunks/HelperText.Cc_6DlKP.js";
-var R = Object.defineProperty, l = (a, r, t, e) => {
-  for (var i = void 0, s = a.length - 1, c; s >= 0; s--)
-    (c = a[s]) && (i = c(r, t, i) || i);
-  return i && R(r, t, i), i;
-}, n, h;
-const C = class C extends k {
+var w = Object.defineProperty, l = (e, s, t, i) => {
+  for (var r = void 0, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = n(s, t, r) || r);
+  return r && w(s, t, r), r;
+}, d, c, m;
+const x = class x extends F {
   constructor() {
     super(...arguments);
-    b(this, n);
-    b(this, h);
-    this.labelId = p(), this.errorId = p(), this.helperTextId = p(), this.validationErrorsId = p(), this.internals = this.attachInternals(), this.formFieldRef = F(), this.id = "", this.name = "", this.value = "", this.validationRules = [], this._validationErrors = [], this.validationErrors = () => this._validationErrors, m(this, n, !1), this.setValidationErrors = (t) => {
-      this._validationErrors = t;
-    }, this.validationErrorShown = () => this.validationErrors().some((t) => !!(t != null && t.length)), m(this, h, /* @__PURE__ */ new WeakMap()), this.submitFormByEnter = ({ key: t }) => {
+    y(this, d);
+    // Captured once, on first form association. Native reset restores this
+    // value; bm-form's initialValues seed is a separate concern, handled in
+    // formResetCallback below.
+    y(this, c);
+    y(this, m);
+    this.labelId = b(), this.errorId = b(), this.helperTextId = b(), this.validationErrorsId = b(), this.internals = this.attachInternals(), this.formFieldRef = I(), this.id = "", this.name = "", this.value = "", this.validationRules = [], this._validationErrors = [], this.validationErrors = () => this._validationErrors, this.resolveError = () => ({
+      invalid: !!this.error,
+      errorMessage: typeof this.error == "string" && this.error.length ? this.error : void 0
+    }), f(this, d, !1), this.setValidationErrors = (t) => {
+      this._validationErrors = t, this.syncValidity();
+    }, this.validationErrorShown = () => this.validationErrors().some((t) => !!(t != null && t.length)), f(this, m, /* @__PURE__ */ new WeakMap()), this.submitFormByEnter = ({ key: t }) => {
       t === "Enter" && this.requestAssociatedSubmit();
     }, this.forwardLabelFocus = () => {
       const { value: t } = this.formFieldRef;
       t.focus();
     }, this.validateFieldOnBlur = (t) => {
-      const { formBlurHandler: e } = this.formContext || u;
-      e(t);
+      const { formBlurHandler: i } = this.formContext || p;
+      i(t);
     }, this.validateFieldOnChange = (t) => {
-      const { value: e } = t.target, { formChangeHandler: i } = this.formContext || u;
-      i(t), this.setAssociatedValue(e);
+      const { value: i } = t.target, { formChangeHandler: r } = this.formContext || p;
+      r(t), this.setAssociatedValue(i), this.syncValidity();
+    }, this.syncValidity = () => {
+      const { value: t } = this.formFieldRef;
+      if (!t) return;
+      const i = t, { validity: r, validationMessage: a } = i;
+      if (!r.valid) {
+        this.internals.setValidity(r, a, i);
+        return;
+      }
+      const n = this.validationErrors().find(
+        (v) => !!v
+      );
+      if (n) {
+        this.internals.setValidity({ customError: !0 }, n, i);
+        return;
+      }
+      this.internals.setValidity({});
     }, this.getContextValue = () => {
-      const { initialValues: t } = this.formContext || u;
+      const { initialValues: t } = this.formContext || p;
       return (t == null ? void 0 : t[this.name]) || this.value;
     }, this.setContextValue = () => {
-      const { value: t } = this.formFieldRef, { ctxValue: e, finalizeCallback: i = () => {
-      } } = this.finalizeAssociatedCallback(this.getContextValue()), s = t;
-      s.value !== e && (s.value = e), this.setAssociatedValue(e), i();
+      const { value: t } = this.formFieldRef, { ctxValue: i, finalizeCallback: r = () => {
+      } } = this.finalizeAssociatedCallback(this.getContextValue()), a = t;
+      a.value !== i && (a.value = i, r()), this.setAssociatedValue(i), this.syncValidity();
     }, this.setContextValidation = () => {
-      const { value: t } = this.formFieldRef, { registerField: e } = this.formContext || u;
-      e({
+      const { value: t } = this.formFieldRef, { registerField: i } = this.formContext || p;
+      i({
         field: t,
         validators: this.validationRules,
         initializer: this.setContextValue,
         errorSetter: this.setValidationErrors
       });
     }, this.contextInitialsChanged = () => {
-      const { initialValues: t } = this.formContext || u, e = t == null ? void 0 : t[this.name], i = e !== this.contextInitialValue;
-      return i && (this.contextInitialValue = e), i;
-    }, this.renderError = (t, e) => t ? x`
+      const { initialValues: t } = this.formContext || p, i = t == null ? void 0 : t[this.name], r = i !== this.contextInitialValue;
+      return r && (this.contextInitialValue = i), r;
+    }, this.renderError = (t, i) => t ? g`
           <bm-helper-text
             text="${t}"
             id="${this.errorId}"
             appearance="negative"
-            .disabled="${e}"
+            .disabled="${i}"
           ></bm-helper-text>
-        ` : v, this.renderValidationErrors = () => this.validationErrorShown() ? x`
+        ` : V, this.renderValidationErrors = () => this.validationErrorShown() ? g`
           <div
             role="log"
             aria-live="polite"
@@ -68,78 +91,111 @@ const C = class C extends k {
             id="${this.validationErrorsId}"
           >
             ${this.validationErrors().map(
-      (t) => t ? x`
+      (t) => t ? g`
                     <bm-helper-text
                       text="${t}"
                       appearance="negative"
-                      style="display: block; margin-top: ${I};"
+                      style="display: block; margin-top: ${S};"
                     ></bm-helper-text>
-                  ` : v
+                  ` : V
     )}
           </div>
-        ` : v;
+        ` : V;
   }
   setAssociatedValue(t) {
     if (typeof t == "string") {
-      if (this.value === t && f(this, n)) return;
+      if (this.value === t && h(this, d)) return;
       this.value = t;
     }
-    let e = null;
+    let i = null;
     if (typeof t == "boolean")
-      e = t ? "on" : null;
+      i = t ? "on" : null;
     else if (typeof t == "number")
-      e = t.toString();
+      i = t.toString();
     else if (Array.isArray(t)) {
-      const i = new FormData();
-      t.forEach((s) => i.append(this.name, s.toString())), e = i;
+      const r = new FormData();
+      t.forEach((a) => r.append(this.name, a.toString())), i = r;
     } else
-      e = t;
-    m(this, n, !0), this.internals.form && this.internals.setFormValue(e);
+      i = t;
+    f(this, d, !0), this.internals.form && this.internals.setFormValue(i);
   }
   requestAssociatedSubmit() {
     this.internals.form && this.internals.form.requestSubmit();
   }
+  // ElementInternals holds the real validity state, but nothing exposes it
+  // on the element unless we delegate it. Without this, field.checkValidity()
+  // and field.validity.valueMissing throw, even though :invalid CSS and
+  // native form submission already work.
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("bm-label-click", this.forwardLabelFocus);
   }
-  ctxValueChanged(t, e) {
-    const { value: i } = e, s = f(this, h).get(i), { initialValues: { [this.name]: c } = {} } = t, g = c !== s;
-    return g && f(this, h).set(i, c), g;
+  ctxValueChanged(t, i) {
+    const { value: r } = i, a = h(this, m).get(r), { initialValues: { [this.name]: n } = {} } = t, v = n !== a;
+    return v && h(this, m).set(r, n), v;
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("bm-label-click", this.forwardLabelFocus);
   }
   formAssociatedCallback() {
-    m(this, n, !1), this.setAssociatedValue(this.value);
+    f(this, d, !1), h(this, c) === void 0 && f(this, c, this.value), this.setAssociatedValue(this.value), this.syncValidity();
   }
   formResetCallback() {
-    this.setContextValue();
+    !this.formContext && h(this, c) !== void 0 && (this.value = h(this, c)), this.setContextValue();
   }
   finalizeAssociatedCallback(t) {
     return { ctxValue: t, finalizeCallback: () => {
     } };
   }
+  // Any reactive prop can change what's valid (required, minLength,
+  // maxLength), not just a keystroke. Owning this here, not in each
+  // subclass's updated(), means every FormField subclass that opts in
+  // gets it as long as it calls super.updated(cP) — see TextField.ts/TextArea.ts.
+  updated(t) {
+    super.updated(t), this.syncValidity();
+  }
 };
-n = new WeakMap(), h = new WeakMap(), C.formAssociated = !0;
-let o = C;
+d = new WeakMap(), c = new WeakMap(), m = new WeakMap(), x.formAssociated = !0;
+let o = x;
 l([
-  d({ type: String })
+  u({ type: String })
 ], o.prototype, "id");
 l([
-  d({ type: String, reflect: !0 })
+  u({ type: String, reflect: !0 })
 ], o.prototype, "name");
 l([
-  d({ type: String })
+  u({ type: String })
 ], o.prototype, "value");
 l([
-  d({ type: Array })
+  u({ type: Array })
 ], o.prototype, "validationRules");
 l([
-  d({ type: String, attribute: "input-aria-label" })
+  u({ type: String, attribute: "input-aria-label" })
 ], o.prototype, "inputAriaLabel");
 l([
-  E({ context: S, subscribe: !0 }),
-  d({ attribute: !1 })
+  u({
+    converter: {
+      fromAttribute: (e) => e === null ? void 0 : e === "" ? !0 : e
+    }
+  })
+], o.prototype, "error");
+l([
+  k({ context: R, subscribe: !0 }),
+  u({ attribute: !1 })
 ], o.prototype, "formContext");
 l([
   A()

package/wip/NativeSelect/NativeSelect.d.ts

@@ -28,10 +28,6 @@ export declare class BmNativeSelect extends FormField {
      * @default false
      */
     disabled: boolean;
-    /**
-     * Specify error text and display error state of a NativeSelect
-     */
-    error: Optional<string>;
     /**
      * Specify if NativeSelect is fluid
      * @default false