ember-headless-form 0.0.0 → 1.0.0-beta.1

package/dist/components/headless-form.d.ts

@@ -1,23 +1,74 @@
 import Component from '@glimmer/component';
-import FieldComponent from "./-private/field.js";
-import { HeadlessFormFieldComponentSignature } from "./-private/field.js";
-import { ErrorRecord, FieldRegistrationData, FieldValidateCallback, FormData, FormKey, FormValidateCallback, UserData } from "./-private/types.js";
-import { ComponentLike, ModifierLike, WithBoundArgs } from '@glint/template';
+import { TrackedAsyncData } from 'ember-async-data';
+import FieldComponent from "../-private/components/field.js";
+import { ErrorRecord, FieldRegistrationData, FieldValidateCallback, FormData, FormKey, FormValidateCallback, UserData, ValidationError } from "../-private/types.js";
+import { ModifierLike, WithBoundArgs } from '@glint/template';
 type ValidateOn = 'change' | 'focusout' | 'submit' | 'input';
-interface HeadlessFormComponentSignature<DATA extends UserData> {
+interface HeadlessFormComponentSignature<DATA extends UserData, SUBMISSION_VALUE> {
     Element: HTMLFormElement;
     Args: {
+        /**
+         * The initial data the form will use to pre-populate the fields.
+         *
+         * Make sure the type of it matches what you expect the form to represent, i.e. the names of all form fields match the properties of the data and their respective types!
+         */
         data?: DATA;
+        /**
+         * By default the data you pass as `@data` is never mutated by the form component, you will only receive the updated data (a copy) on successful submission via `@onSubmit`.
+         * Setting this to `'mutable'` will mutate the data whenever the user updates a field. This is especially useful when the data already has some "buffering" behavior, like with `ember-changeset`.
+         */
+        dataMode?: 'mutable' | 'immutable';
+        /**
+         * Specify when to dynamically validate a field before even submitting the whole form. By default this is `submit`, which means no dynamic validation happens. Another common setting is to validate on `focusout`.
+         */
         validateOn?: ValidateOn;
+        /**
+         * Specify when to revalidate a previously validated field that is invalid. By default this happens on `change`. Another common setting is to revalidate on `input`.
+         * Mind that text-based inputs don't emit the `change` event on every key stroke, but only on focusing out. Changing this to `input` would make text-based inputs revalidate on every key stroke.
+         */
         revalidateOn?: ValidateOn;
-        validate?: FormValidateCallback<FormData<DATA>>;
-        onSubmit?: (data: FormData<DATA>) => void;
+        /**
+         * Provide a custom validation function, that operates on all fields of the form. Eventual validation errors are merged with native validation errors to determine the effective set of errors rendered in the form.
+         *
+         * Return undefined when no validation errors are present, otherwise an `ErrorRecord` mapping (one or multiple) `ValidationError`s to each invalid field.
+         */
+        validate?: FormValidateCallback<DATA>;
+        /**
+         * Called when the user has submitted the form and no validation errors have been determined. Receives the new form data, or in case of `@dataMode="mutable"` the original data object.
+         */
+        onSubmit?: (data: FormData<DATA>) => SUBMISSION_VALUE | Promise<SUBMISSION_VALUE>;
+        /**
+         * Called when the user tried to submit the form, but validation failed. Receives the new data (or in case of `@dataMode="mutable"` the original data object), and the record of validation errors by field.
+         */
         onInvalid?: (data: FormData<DATA>, errors: ErrorRecord<FormData<DATA>>) => void;
     };
     Blocks: {
         default: [
             {
-                field: WithBoundArgs<typeof FieldComponent<DATA>, 'data' | 'set' | 'errors' | 'registerField' | 'unregisterField' | 'triggerValidationFor' | 'fieldValidationEvent' | 'fieldRevalidationEvent'>;
+                /**
+                 * Field component to define the fields of your form. It yields the further components for the form control, label and validation error.
+                 */
+                Field: WithBoundArgs<typeof FieldComponent<DATA>, 'data' | 'set' | 'errors' | 'registerField' | 'unregisterField' | 'triggerValidationFor' | 'fieldValidationEvent' | 'fieldRevalidationEvent'>;
+                /**
+                 * The (async) validation state as `TrackedAsyncData`.
+                 *
+                 * Use derived state like `.isPending` to render the UI conditionally.
+                 */
+                validationState?: TrackedAsyncData<ErrorRecord<DATA>>;
+                /**
+                 * The (async) submission state as `TrackedAsyncData`.
+                 *
+                 * Use derived state like `.isPending` to render the UI conditionally.
+                 */
+                submissionState?: TrackedAsyncData<SUBMISSION_VALUE>;
+                /**
+                 * Will be true if at least one form field is invalid.
+                 */
+                isInvalid: boolean;
+                /**
+                 * An ErrorRecord, for custom rendering of error output
+                 */
+                rawErrors?: ErrorRecord<DATA>;
             }
         ];
     };
@@ -36,8 +87,51 @@ declare class FieldData<DATA extends FormData, KEY extends FormKey<DATA> = FormK
      */
     validate?: FieldValidateCallback<DATA, KEY>;
 }
-declare class HeadlessFormComponent<DATA extends UserData> extends Component<HeadlessFormComponentSignature<DATA>> {
-    FieldComponent: ComponentLike<HeadlessFormFieldComponentSignature<DATA>>;
+/**
+ * Headless form component.
+ *
+ * @example
+ * Usage example:
+ *
+ * ```hbs
+ * <HeadlessForm
+ *   @data={{this.data}}
+ *   @validateOn="focusout"
+ *   @revalidateOn="input"
+ *   @onSubmit={{this.doSomething}}
+ *   as |form|
+ * >
+ *   <form.Field @name="firstName" as |field|>
+ *     <div>
+ *       <field.Label>First name</field.Label>
+ *       <field.Input
+ *         required
+ *       />
+ *       <field.errors />
+ *     </div>
+ *   </form.Field>
+ *
+ *   <button
+ *     type="submit"
+ *   >Submit</button>
+ * </HeadlessForm>
+ * ```
+ */
+declare class HeadlessFormComponent<DATA extends UserData, SUBMISSION_VALUE> extends Component<HeadlessFormComponentSignature<DATA, SUBMISSION_VALUE>> {
+    FieldComponent: {
+        new (owner: unknown, args: {
+            name: FormKey<FormData<DATA>>;
+            validate?: FieldValidateCallback<FormData<DATA>, FormKey<FormData<DATA>>> | undefined;
+            data: FormData<DATA>;
+            set: (key: FormKey<FormData<DATA>>, value: DATA[FormKey<FormData<DATA>>]) => void;
+            errors?: Partial<Record<FormKey<FormData<DATA>>, ValidationError<DATA[FormKey<FormData<DATA>>]>[]>> | undefined;
+            registerField: import("../-private/types.js").RegisterFieldCallback<FormData<DATA>, FormKey<FormData<DATA>>>;
+            unregisterField: import("../-private/types.js").UnregisterFieldCallback<FormData<DATA>, FormKey<FormData<DATA>>>;
+            triggerValidationFor(name: FormKey<FormData<DATA>>): Promise<void>;
+            fieldValidationEvent: "focusout" | "change" | "input" | undefined;
+            fieldRevalidationEvent: "focusout" | "change" | "input" | undefined;
+        }): FieldComponent<DATA, FormKey<FormData<DATA>>>;
+    };
     on: import("@ember/modifier").OnModifier;
     formElement?: HTMLFormElement;
     registerForm: ModifierLike<unknown>;
@@ -46,10 +140,8 @@ declare class HeadlessFormComponent<DATA extends UserData> extends Component<Hea
      */
     internalData: DATA;
     fields: Map<FormKey<FormData<DATA>>, FieldData<FormData<DATA>, FormKey<FormData<DATA>>>>;
-    /**
-     * The last result of calling `this.validate()`.
-     */
-    lastValidationResult?: ErrorRecord<FormData<DATA>>;
+    validationState?: TrackedAsyncData<ErrorRecord<DATA>>;
+    submissionState?: TrackedAsyncData<SUBMISSION_VALUE>;
     /**
      * When this is set to true by submitting the form, eventual validation errors are show for *all* field, regardless of their individual dynamic validation status in `FieldData#validationEnabled`
      */
@@ -75,6 +167,7 @@ declare class HeadlessFormComponent<DATA extends UserData> extends Component<Hea
      * Call the passed validation callbacks, defined both on the whole form as well as on field level, and return the merged result for all fields.
      */
     validate(): Promise<ErrorRecord<FormData<DATA>>>;
+    _validate(): Promise<ErrorRecord<FormData<DATA>>>;
     validateNative(): ErrorRecord<FormData<DATA>> | undefined;
     /**
      * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.

package/dist/components/headless-form.js

@@ -8,16 +8,16 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { assert, warn } from '@ember/debug';
 import { on } from '@ember/modifier';
-import { action } from '@ember/object';
-import { waitFor } from '@ember/test-waiters';
+import { action, set } from '@ember/object';
+import { TrackedAsyncData } from 'ember-async-data';
 import { modifier } from 'ember-modifier';
 import { TrackedObject } from 'tracked-built-ins';
-import HeadlessFormFieldComponent from './-private/field.js';
-import { mergeErrorRecord } from './-private/utils.js';
+import HeadlessFormFieldComponent from '../-private/components/field.js';
+import { mergeErrorRecord } from '../-private/utils.js';
 
-var TEMPLATE = precompileTemplate("<form\n  novalidate\n  ...attributes\n  {{this.registerForm}}\n  {{on \'submit\' this.onSubmit}}\n  {{(if\n    this.fieldValidationEvent\n    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)\n  )}}\n  {{(if\n    this.fieldRevalidationEvent\n    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)\n  )}}\n>\n  {{yield\n    (hash\n      field=(component\n        (ensure-safe-component this.FieldComponent)\n        data=this.internalData\n        set=this.set\n        errors=this.visibleErrors\n        registerField=this.registerField\n        unregisterField=this.unregisterField\n        triggerValidationFor=this.handleFieldValidation\n        fieldValidationEvent=this.fieldValidationEvent\n        fieldRevalidationEvent=this.fieldRevalidationEvent\n      )\n    )\n  }}\n</form>");
+var TEMPLATE = precompileTemplate("<form\n  novalidate\n  ...attributes\n  {{this.registerForm}}\n  {{on \'submit\' this.onSubmit}}\n  {{(if\n    this.fieldValidationEvent\n    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)\n  )}}\n  {{(if\n    this.fieldRevalidationEvent\n    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)\n  )}}\n>\n  {{yield\n    (hash\n      Field=(component\n        (ensure-safe-component this.FieldComponent)\n        data=this.internalData\n        set=this.set\n        errors=this.visibleErrors\n        registerField=this.registerField\n        unregisterField=this.unregisterField\n        triggerValidationFor=this.handleFieldValidation\n        fieldValidationEvent=this.fieldValidationEvent\n        fieldRevalidationEvent=this.fieldRevalidationEvent\n      )\n      validationState=this.validationState\n      submissionState=this.submissionState\n      isInvalid=this.hasValidationErrors\n      rawErrors=this.visibleErrors\n    )\n  }}\n</form>");
 
-var _class, _descriptor, _class3, _descriptor2, _descriptor3;
+var _class, _descriptor, _class3, _descriptor2, _descriptor3, _descriptor4;
 /**
  * This internal data structure maintains information about each field that is registered to the form by `registerField`.
  */
@@ -39,6 +39,36 @@ let FieldData = (_class = class FieldData {
     return false;
   }
 })), _class);
+/**
+ * Headless form component.
+ *
+ * @example
+ * Usage example:
+ *
+ * ```hbs
+ * <HeadlessForm
+ *   @data={{this.data}}
+ *   @validateOn="focusout"
+ *   @revalidateOn="input"
+ *   @onSubmit={{this.doSomething}}
+ *   as |form|
+ * >
+ *   <form.Field @name="firstName" as |field|>
+ *     <div>
+ *       <field.Label>First name</field.Label>
+ *       <field.Input
+ *         required
+ *       />
+ *       <field.errors />
+ *     </div>
+ *   </form.Field>
+ *
+ *   <button
+ *     type="submit"
+ *   >Submit</button>
+ * </HeadlessForm>
+ * ```
+ */
 let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Component {
   constructor(...args) {
     super(...args);
@@ -48,10 +78,11 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     _defineProperty(this, "registerForm", modifier((el, _p) => {
       this.formElement = el;
     }));
-    _defineProperty(this, "internalData", new TrackedObject(this.args.data ?? {}));
+    _defineProperty(this, "internalData", this.args.dataMode == 'mutable' && this.args.data ? this.args.data : new TrackedObject(this.args.data ?? {}));
     _defineProperty(this, "fields", new Map());
-    _initializerDefineProperty(this, "lastValidationResult", _descriptor2, this);
-    _initializerDefineProperty(this, "showAllValidations", _descriptor3, this);
+    _initializerDefineProperty(this, "validationState", _descriptor2, this);
+    _initializerDefineProperty(this, "submissionState", _descriptor3, this);
+    _initializerDefineProperty(this, "showAllValidations", _descriptor4, this);
   }
   get validateOn() {
     return this.args.validateOn ?? 'submit';
@@ -91,8 +122,12 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
    * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid
    */
   get hasValidationErrors() {
+    const {
+      validationState
+    } = this;
+
     // Only consider validation errors for which we actually have a field rendered
-    return this.lastValidationResult ? Object.keys(this.lastValidationResult).some(name => this.fields.has(name)) : false;
+    return validationState?.isResolved ? Object.keys(validationState.value).some(name => this.fields.has(name)) : false;
   }
 
   /**
@@ -100,7 +135,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
    */
   async validate() {
     const nativeValidation = this.validateNative();
-    const customFormValidation = await this.args.validate?.(this.internalData);
+    const customFormValidation = await this.args.validate?.(this.internalData, Array.from(this.fields.keys()));
     const customFieldValidations = [];
     for (const [name, field] of this.fields) {
       const fieldValidationResult = await field.validate?.(this.internalData[name], name, this.internalData);
@@ -112,6 +147,11 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     }
     return mergeErrorRecord(nativeValidation, customFormValidation, ...customFieldValidations);
   }
+  async _validate() {
+    const promise = this.validate();
+    this.validationState = new TrackedAsyncData(promise, this);
+    return promise;
+  }
   validateNative() {
     const form = this.formElement;
     assert('Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!', form);
@@ -147,11 +187,11 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
    * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.
    */
   get visibleErrors() {
-    if (!this.lastValidationResult) {
+    if (!this.validationState?.isResolved) {
       return undefined;
     }
     const visibleErrors = {};
-    for (const [field, errors] of Object.entries(this.lastValidationResult)) {
+    for (const [field, errors] of Object.entries(this.validationState.value)) {
       if (this.showErrorsFor(field)) {
         visibleErrors[field] = errors;
       }
@@ -167,13 +207,15 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
   }
   async onSubmit(e) {
     e.preventDefault();
-    this.lastValidationResult = await this.validate();
+    await this._validate();
     this.showAllValidations = true;
     if (!this.hasValidationErrors) {
-      this.args.onSubmit?.(this.internalData);
+      if (this.args.onSubmit) {
+        this.submissionState = new TrackedAsyncData(this.args.onSubmit(this.internalData), this);
+      }
     } else {
-      assert('Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!', this.lastValidationResult);
-      this.args.onInvalid?.(this.internalData, this.lastValidationResult);
+      assert('Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!', this.validationState?.isResolved);
+      this.args.onInvalid?.(this.internalData, this.validationState.value);
     }
   }
   registerField(name, field) {
@@ -184,7 +226,8 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     this.fields.delete(name);
   }
   set(key, value) {
-    this.internalData[key] = value;
+    // when @mutableData is set, our internalData is something we don't control, i.e. might require old-school set() to be on the safe side
+    set(this.internalData, key, value);
   }
 
   /**
@@ -205,7 +248,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     if (name) {
       const field = this.fields.get(name);
       if (field) {
-        this.lastValidationResult = await this.validate();
+        await this._validate();
         field.validationEnabled = true;
       }
     } else if (e instanceof Event) {
@@ -231,7 +274,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     } = target;
     if (name) {
       if (this.showErrorsFor(name)) {
-        this.lastValidationResult = await this.validate();
+        await this._validate();
       }
     } else {
       warn(`An event of type "${e.type}" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \`name\` attribute matching the field, or use the yielded \`{{field.captureEvents}}\` to capture the events.`, {
@@ -239,19 +282,24 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
       });
     }
   }
-}, (_descriptor2 = _applyDecoratedDescriptor(_class3.prototype, "lastValidationResult", [tracked], {
+}, (_descriptor2 = _applyDecoratedDescriptor(_class3.prototype, "validationState", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = _applyDecoratedDescriptor(_class3.prototype, "submissionState", [tracked], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class3.prototype, "showAllValidations", [tracked], {
+}), _descriptor4 = _applyDecoratedDescriptor(_class3.prototype, "showAllValidations", [tracked], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function () {
     return false;
   }
-}), _applyDecoratedDescriptor(_class3.prototype, "validate", [waitFor], Object.getOwnPropertyDescriptor(_class3.prototype, "validate"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "onSubmit", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "onSubmit"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "registerField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "registerField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "unregisterField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "unregisterField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "set", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "set"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldValidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldValidation"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldRevalidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldRevalidation"), _class3.prototype)), _class3);
+}), _applyDecoratedDescriptor(_class3.prototype, "onSubmit", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "onSubmit"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "registerField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "registerField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "unregisterField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "unregisterField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "set", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "set"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldValidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldValidation"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldRevalidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldRevalidation"), _class3.prototype)), _class3);
 setComponentTemplate(TEMPLATE, HeadlessFormComponent);
 
 export { HeadlessFormComponent as default };

package/dist/components/headless-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"headless-form.js","sources":["../../src/components/headless-form.hbs.js","../../src/components/headless-form.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"<form\\n  novalidate\\n  ...attributes\\n  {{this.registerForm}}\\n  {{on \\'submit\\' this.onSubmit}}\\n  {{(if\\n    this.fieldValidationEvent\\n    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)\\n  )}}\\n  {{(if\\n    this.fieldRevalidationEvent\\n    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)\\n  )}}\\n>\\n  {{yield\\n    (hash\\n      field=(component\\n        (ensure-safe-component this.FieldComponent)\\n        data=this.internalData\\n        set=this.set\\n        errors=this.visibleErrors\\n        registerField=this.registerField\\n        unregisterField=this.unregisterField\\n        triggerValidationFor=this.handleFieldValidation\\n        fieldValidationEvent=this.fieldValidationEvent\\n        fieldRevalidationEvent=this.fieldRevalidationEvent\\n      )\\n    )\\n  }}\\n</form>\")","import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert, warn } from '@ember/debug';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { waitFor } from '@ember/test-waiters';\n\nimport { modifier } from 'ember-modifier';\nimport { TrackedObject } from 'tracked-built-ins';\n\nimport FieldComponent from './-private/field';\nimport { mergeErrorRecord } from './-private/utils';\n\nimport type { HeadlessFormFieldComponentSignature } from './-private/field';\nimport type {\n  ErrorRecord,\n  FieldRegistrationData,\n  FieldValidateCallback,\n  FormData,\n  FormKey,\n  FormValidateCallback,\n  UserData,\n  ValidationError,\n} from './-private/types';\nimport type {\n  ComponentLike,\n  ModifierLike,\n  WithBoundArgs,\n} from '@glint/template';\n\ntype ValidateOn = 'change' | 'focusout' | 'submit' | 'input';\n\nexport interface HeadlessFormComponentSignature<DATA extends UserData> {\n  Element: HTMLFormElement;\n  Args: {\n    data?: DATA;\n    validateOn?: ValidateOn;\n    revalidateOn?: ValidateOn;\n    validate?: FormValidateCallback<FormData<DATA>>;\n    onSubmit?: (data: FormData<DATA>) => void;\n    onInvalid?: (\n      data: FormData<DATA>,\n      errors: ErrorRecord<FormData<DATA>>\n    ) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        field: WithBoundArgs<\n          typeof FieldComponent<DATA>,\n          | 'data'\n          | 'set'\n          | 'errors'\n          | 'registerField'\n          | 'unregisterField'\n          | 'triggerValidationFor'\n          | 'fieldValidationEvent'\n          | 'fieldRevalidationEvent'\n        >;\n      }\n    ];\n  };\n}\n\n/**\n * This internal data structure maintains information about each field that is registered to the form by `registerField`.\n */\nclass FieldData<\n  DATA extends FormData,\n  KEY extends FormKey<DATA> = FormKey<DATA>\n> {\n  constructor(fieldRegistration: FieldRegistrationData<DATA, KEY>) {\n    this.validate = fieldRegistration.validate;\n  }\n\n  /**\n   * tracked state that enabled a dynamic validation of a field *before* the whole form is submitted, e.g. by `@validateOn=\"blur\" and the blur event being triggered for that particular field.\n   */\n  @tracked validationEnabled = false;\n\n  /**\n   * The *field* level validation callback passed to the field as in `<form.field @name=\"foo\" @validate={{this.validateCallback}}>`\n   */\n  validate?: FieldValidateCallback<DATA, KEY>;\n}\n\nexport default class HeadlessFormComponent<\n  DATA extends UserData\n> extends Component<HeadlessFormComponentSignature<DATA>> {\n  FieldComponent: ComponentLike<HeadlessFormFieldComponentSignature<DATA>> =\n    FieldComponent;\n\n  // we cannot use (modifier \"on\") directly in the template due to https://github.com/emberjs/ember.js/issues/19869\n  on = on;\n\n  formElement?: HTMLFormElement;\n\n  registerForm = modifier((el: HTMLFormElement, _p: []) => {\n    this.formElement = el;\n  }) as unknown as ModifierLike<unknown>; // @todo getting Glint errors without this. Try again with Glint 1.0 (beta)!\n\n  /**\n   * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.\n   */\n  internalData: DATA = new TrackedObject(this.args.data ?? {}) as DATA;\n\n  fields = new Map<FormKey<FormData<DATA>>, FieldData<FormData<DATA>>>();\n\n  /**\n   * The last result of calling `this.validate()`.\n   */\n  @tracked lastValidationResult?: ErrorRecord<FormData<DATA>>;\n\n  /**\n   * When this is set to true by submitting the form, eventual validation errors are show for *all* field, regardless of their individual dynamic validation status in `FieldData#validationEnabled`\n   */\n  @tracked showAllValidations = false;\n\n  get validateOn(): ValidateOn {\n    return this.args.validateOn ?? 'submit';\n  }\n\n  get revalidateOn(): ValidateOn {\n    return this.args.revalidateOn ?? 'change';\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)\n   */\n  get fieldValidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn } = this;\n\n    return validateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : validateOn;\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid\n   */\n  get fieldRevalidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn, revalidateOn } = this;\n\n    return revalidateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : // when validation happens more frequently than revalidation, then we can ignore revalidation, because the validation handler will already cover us\n      validateOn === 'input' ||\n        (validateOn === 'change' && revalidateOn === 'focusout') ||\n        validateOn === revalidateOn\n      ? undefined\n      : revalidateOn;\n  }\n\n  /**\n   * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid\n   */\n  get hasValidationErrors(): boolean {\n    // Only consider validation errors for which we actually have a field rendered\n    return this.lastValidationResult\n      ? Object.keys(this.lastValidationResult).some((name) =>\n          this.fields.has(name as FormKey<FormData<DATA>>)\n        )\n      : false;\n  }\n\n  /**\n   * Call the passed validation callbacks, defined both on the whole form as well as on field level, and return the merged result for all fields.\n   */\n  @waitFor\n  async validate(): Promise<ErrorRecord<FormData<DATA>>> {\n    const nativeValidation = this.validateNative();\n    const customFormValidation = await this.args.validate?.(this.internalData);\n    const customFieldValidations: ErrorRecord<FormData<DATA>>[] = [];\n\n    for (const [name, field] of this.fields) {\n      const fieldValidationResult = await field.validate?.(\n        this.internalData[name],\n        name,\n        this.internalData\n      );\n\n      if (fieldValidationResult) {\n        customFieldValidations.push({\n          [name]: fieldValidationResult,\n        } as ErrorRecord<FormData<DATA>>);\n      }\n    }\n\n    return mergeErrorRecord(\n      nativeValidation,\n      customFormValidation,\n      ...customFieldValidations\n    );\n  }\n\n  validateNative(): ErrorRecord<FormData<DATA>> | undefined {\n    const form = this.formElement;\n\n    assert(\n      'Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n      form\n    );\n\n    if (form.checkValidity()) {\n      return;\n    }\n\n    const errors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const el of form.elements) {\n      // This is just to make TS happy, as we need to access properties on el that only form elements have, but elements in `form.elements` are just typed as plain `Element`. Should never occur in reality.\n      assert(\n        'Unexpected form element. If you see this, please report it as a bug to ember-headless-form!',\n        el instanceof HTMLInputElement ||\n          el instanceof HTMLTextAreaElement ||\n          el instanceof HTMLSelectElement ||\n          el instanceof HTMLButtonElement ||\n          el instanceof HTMLFieldSetElement ||\n          el instanceof HTMLObjectElement ||\n          el instanceof HTMLOutputElement\n      );\n\n      if (el.validity.valid) {\n        continue;\n      }\n\n      const name = el.name as FormKey<FormData<DATA>>;\n\n      if (this.fields.has(name)) {\n        errors[name] = [\n          {\n            type: 'native',\n            value: this.internalData[name],\n            message: el.validationMessage,\n          },\n        ];\n      } else {\n        warn(\n          `An invalid form element with name \"${name}\" was detected, but this name is not used as a form field. It will be ignored for validation. Make sure to apply the correct name to custom form elements that participate in form validation!`,\n          { id: 'headless-form.invalid-control-for-unknown-field' }\n        );\n      }\n    }\n\n    return errors;\n  }\n\n  /**\n   * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.\n   * Validation errors will be visible for a certain field, if validation errors for *all* fields are visible, which is the case when trying to submit the form,\n   * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.\n   */\n  get visibleErrors(): ErrorRecord<FormData<DATA>> | undefined {\n    if (!this.lastValidationResult) {\n      return undefined;\n    }\n\n    const visibleErrors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const [field, errors] of Object.entries(this.lastValidationResult) as [\n      FormKey<FormData<DATA>>,\n      ValidationError<FormData<DATA>[FormKey<FormData<DATA>>]>[]\n    ][]) {\n      if (this.showErrorsFor(field)) {\n        visibleErrors[field] = errors;\n      }\n    }\n\n    return visibleErrors;\n  }\n\n  /**\n   * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.\n   */\n  showErrorsFor(field: FormKey<FormData<DATA>>): boolean {\n    return (\n      this.showAllValidations ||\n      (this.fields.get(field)?.validationEnabled ?? false)\n    );\n  }\n\n  @action\n  async onSubmit(e: Event): Promise<void> {\n    e.preventDefault();\n\n    this.lastValidationResult = await this.validate();\n    this.showAllValidations = true;\n\n    if (!this.hasValidationErrors) {\n      this.args.onSubmit?.(this.internalData);\n    } else {\n      assert(\n        'Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n        this.lastValidationResult\n      );\n      this.args.onInvalid?.(this.internalData, this.lastValidationResult);\n    }\n  }\n\n  @action\n  registerField(\n    name: FormKey<FormData<DATA>>,\n    field: FieldRegistrationData<FormData<DATA>>\n  ): void {\n    assert(\n      `You passed @name=\"${String(\n        name\n      )}\" to the form field, but this is already in use. Names of form fields must be unique!`,\n      !this.fields.has(name)\n    );\n    this.fields.set(name, new FieldData(field));\n  }\n\n  @action\n  unregisterField(name: FormKey<FormData<DATA>>): void {\n    this.fields.delete(name);\n  }\n\n  @action\n  set<KEY extends FormKey<FormData<DATA>>>(key: KEY, value: DATA[KEY]): void {\n    this.internalData[key] = value;\n  }\n\n  /**\n   * Handle the `@validateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * Validation will be triggered, and the particular field will be marked to show eventual validation errors.\n   */\n  @action\n  async handleFieldValidation(e: Event | string): Promise<void> {\n    let name: string;\n\n    if (typeof e === 'string') {\n      name = e;\n    } else {\n      const { target } = e;\n\n      name = (target as HTMLInputElement).name;\n    }\n\n    if (name) {\n      const field = this.fields.get(name as FormKey<FormData<DATA>>);\n\n      if (field) {\n        this.lastValidationResult = await this.validate();\n        field.validationEnabled = true;\n      }\n    } else if (e instanceof Event) {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n\n  /**\n   * Handle the `@revalidateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.\n   *\n   * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn=\"blur\" @revalidateOn=\"change\"`.\n   */\n  @action\n  async handleFieldRevalidation(e: Event): Promise<void> {\n    const { target } = e;\n    const { name } = target as HTMLInputElement;\n\n    if (name) {\n      if (this.showErrorsFor(name as FormKey<FormData<DATA>>)) {\n        this.lastValidationResult = await this.validate();\n      }\n    } else {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n}\n"],"names":["precompileTemplate","FieldData","constructor","fieldRegistration","validate","tracked","HeadlessFormComponent","Component","FieldComponent","on","modifier","el","_p","formElement","TrackedObject","args","data","Map","validateOn","revalidateOn","fieldValidationEvent","undefined","fieldRevalidationEvent","hasValidationErrors","lastValidationResult","Object","keys","some","name","fields","has","nativeValidation","validateNative","customFormValidation","internalData","customFieldValidations","field","fieldValidationResult","push","mergeErrorRecord","form","assert","checkValidity","errors","elements","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLButtonElement","HTMLFieldSetElement","HTMLObjectElement","HTMLOutputElement","validity","valid","type","value","message","validationMessage","warn","id","visibleErrors","entries","showErrorsFor","showAllValidations","get","validationEnabled","onSubmit","e","preventDefault","onInvalid","registerField","String","set","unregisterField","delete","key","handleFieldValidation","target","Event","handleFieldRevalidation","waitFor","action"],"mappings":"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"}
+{"version":3,"file":"headless-form.js","sources":["../../src/components/headless-form.hbs.js","../../src/components/headless-form.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"<form\\n  novalidate\\n  ...attributes\\n  {{this.registerForm}}\\n  {{on \\'submit\\' this.onSubmit}}\\n  {{(if\\n    this.fieldValidationEvent\\n    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)\\n  )}}\\n  {{(if\\n    this.fieldRevalidationEvent\\n    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)\\n  )}}\\n>\\n  {{yield\\n    (hash\\n      Field=(component\\n        (ensure-safe-component this.FieldComponent)\\n        data=this.internalData\\n        set=this.set\\n        errors=this.visibleErrors\\n        registerField=this.registerField\\n        unregisterField=this.unregisterField\\n        triggerValidationFor=this.handleFieldValidation\\n        fieldValidationEvent=this.fieldValidationEvent\\n        fieldRevalidationEvent=this.fieldRevalidationEvent\\n      )\\n      validationState=this.validationState\\n      submissionState=this.submissionState\\n      isInvalid=this.hasValidationErrors\\n      rawErrors=this.visibleErrors\\n    )\\n  }}\\n</form>\")","import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert, warn } from '@ember/debug';\nimport { on } from '@ember/modifier';\nimport { action, set } from '@ember/object';\n\nimport { TrackedAsyncData } from 'ember-async-data';\nimport { modifier } from 'ember-modifier';\nimport { TrackedObject } from 'tracked-built-ins';\n\nimport FieldComponent from '../-private/components/field';\nimport { mergeErrorRecord } from '../-private/utils';\n\nimport type {\n  ErrorRecord,\n  FieldRegistrationData,\n  FieldValidateCallback,\n  FormData,\n  FormKey,\n  FormValidateCallback,\n  UserData,\n  ValidationError,\n} from '../-private/types';\nimport type { ModifierLike, WithBoundArgs } from '@glint/template';\n\ntype ValidateOn = 'change' | 'focusout' | 'submit' | 'input';\n\nexport interface HeadlessFormComponentSignature<\n  DATA extends UserData,\n  SUBMISSION_VALUE\n> {\n  Element: HTMLFormElement;\n  Args: {\n    /**\n     * The initial data the form will use to pre-populate the fields.\n     *\n     * Make sure the type of it matches what you expect the form to represent, i.e. the names of all form fields match the properties of the data and their respective types!\n     */\n    data?: DATA;\n\n    /**\n     * By default the data you pass as `@data` is never mutated by the form component, you will only receive the updated data (a copy) on successful submission via `@onSubmit`.\n     * Setting this to `'mutable'` will mutate the data whenever the user updates a field. This is especially useful when the data already has some \"buffering\" behavior, like with `ember-changeset`.\n     */\n    dataMode?: 'mutable' | 'immutable';\n\n    /**\n     * Specify when to dynamically validate a field before even submitting the whole form. By default this is `submit`, which means no dynamic validation happens. Another common setting is to validate on `focusout`.\n     */\n    validateOn?: ValidateOn;\n\n    /**\n     * Specify when to revalidate a previously validated field that is invalid. By default this happens on `change`. Another common setting is to revalidate on `input`.\n     * Mind that text-based inputs don't emit the `change` event on every key stroke, but only on focusing out. Changing this to `input` would make text-based inputs revalidate on every key stroke.\n     */\n    revalidateOn?: ValidateOn;\n\n    /**\n     * Provide a custom validation function, that operates on all fields of the form. Eventual validation errors are merged with native validation errors to determine the effective set of errors rendered in the form.\n     *\n     * Return undefined when no validation errors are present, otherwise an `ErrorRecord` mapping (one or multiple) `ValidationError`s to each invalid field.\n     */\n    validate?: FormValidateCallback<DATA>;\n\n    /**\n     * Called when the user has submitted the form and no validation errors have been determined. Receives the new form data, or in case of `@dataMode=\"mutable\"` the original data object.\n     */\n    onSubmit?: (\n      data: FormData<DATA>\n    ) => SUBMISSION_VALUE | Promise<SUBMISSION_VALUE>;\n\n    /**\n     * Called when the user tried to submit the form, but validation failed. Receives the new data (or in case of `@dataMode=\"mutable\"` the original data object), and the record of validation errors by field.\n     */\n    onInvalid?: (\n      data: FormData<DATA>,\n      errors: ErrorRecord<FormData<DATA>>\n    ) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        /**\n         * Field component to define the fields of your form. It yields the further components for the form control, label and validation error.\n         */\n        Field: WithBoundArgs<\n          typeof FieldComponent<DATA>,\n          | 'data'\n          | 'set'\n          | 'errors'\n          | 'registerField'\n          | 'unregisterField'\n          | 'triggerValidationFor'\n          | 'fieldValidationEvent'\n          | 'fieldRevalidationEvent'\n        >;\n\n        /**\n         * The (async) validation state as `TrackedAsyncData`.\n         *\n         * Use derived state like `.isPending` to render the UI conditionally.\n         */\n        validationState?: TrackedAsyncData<ErrorRecord<DATA>>;\n\n        /**\n         * The (async) submission state as `TrackedAsyncData`.\n         *\n         * Use derived state like `.isPending` to render the UI conditionally.\n         */\n        submissionState?: TrackedAsyncData<SUBMISSION_VALUE>;\n\n        /**\n         * Will be true if at least one form field is invalid.\n         */\n        isInvalid: boolean;\n\n        /**\n         * An ErrorRecord, for custom rendering of error output\n         */\n        rawErrors?: ErrorRecord<DATA>;\n      }\n    ];\n  };\n}\n\n/**\n * This internal data structure maintains information about each field that is registered to the form by `registerField`.\n */\nclass FieldData<\n  DATA extends FormData,\n  KEY extends FormKey<DATA> = FormKey<DATA>\n> {\n  constructor(fieldRegistration: FieldRegistrationData<DATA, KEY>) {\n    this.validate = fieldRegistration.validate;\n  }\n\n  /**\n   * tracked state that enabled a dynamic validation of a field *before* the whole form is submitted, e.g. by `@validateOn=\"blur\" and the blur event being triggered for that particular field.\n   */\n  @tracked validationEnabled = false;\n\n  /**\n   * The *field* level validation callback passed to the field as in `<form.field @name=\"foo\" @validate={{this.validateCallback}}>`\n   */\n  validate?: FieldValidateCallback<DATA, KEY>;\n}\n\n/**\n * Headless form component.\n *\n * @example\n * Usage example:\n *\n * ```hbs\n * <HeadlessForm\n *   @data={{this.data}}\n *   @validateOn=\"focusout\"\n *   @revalidateOn=\"input\"\n *   @onSubmit={{this.doSomething}}\n *   as |form|\n * >\n *   <form.Field @name=\"firstName\" as |field|>\n *     <div>\n *       <field.Label>First name</field.Label>\n *       <field.Input\n *         required\n *       />\n *       <field.errors />\n *     </div>\n *   </form.Field>\n *\n *   <button\n *     type=\"submit\"\n *   >Submit</button>\n * </HeadlessForm>\n * ```\n */\nexport default class HeadlessFormComponent<\n  DATA extends UserData,\n  SUBMISSION_VALUE\n> extends Component<HeadlessFormComponentSignature<DATA, SUBMISSION_VALUE>> {\n  FieldComponent = FieldComponent<DATA>;\n\n  // we cannot use (modifier \"on\") directly in the template due to https://github.com/emberjs/ember.js/issues/19869\n  on = on;\n\n  formElement?: HTMLFormElement;\n\n  registerForm = modifier((el: HTMLFormElement, _p: []) => {\n    this.formElement = el;\n  }) as unknown as ModifierLike<unknown>; // @todo getting Glint errors without this. Try again with Glint 1.0 (beta)!\n\n  /**\n   * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.\n   */\n  internalData: DATA =\n    this.args.dataMode == 'mutable' && this.args.data\n      ? this.args.data\n      : (new TrackedObject(this.args.data ?? {}) as DATA);\n\n  fields = new Map<FormKey<FormData<DATA>>, FieldData<FormData<DATA>>>();\n\n  @tracked validationState?: TrackedAsyncData<ErrorRecord<DATA>>;\n  @tracked submissionState?: TrackedAsyncData<SUBMISSION_VALUE>;\n\n  /**\n   * When this is set to true by submitting the form, eventual validation errors are show for *all* field, regardless of their individual dynamic validation status in `FieldData#validationEnabled`\n   */\n  @tracked showAllValidations = false;\n\n  get validateOn(): ValidateOn {\n    return this.args.validateOn ?? 'submit';\n  }\n\n  get revalidateOn(): ValidateOn {\n    return this.args.revalidateOn ?? 'change';\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)\n   */\n  get fieldValidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn } = this;\n\n    return validateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : validateOn;\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid\n   */\n  get fieldRevalidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn, revalidateOn } = this;\n\n    return revalidateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : // when validation happens more frequently than revalidation, then we can ignore revalidation, because the validation handler will already cover us\n      validateOn === 'input' ||\n        (validateOn === 'change' && revalidateOn === 'focusout') ||\n        validateOn === revalidateOn\n      ? undefined\n      : revalidateOn;\n  }\n\n  /**\n   * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid\n   */\n  get hasValidationErrors(): boolean {\n    const { validationState } = this;\n\n    // Only consider validation errors for which we actually have a field rendered\n    return validationState?.isResolved\n      ? Object.keys(validationState.value).some((name) =>\n          this.fields.has(name as FormKey<FormData<DATA>>)\n        )\n      : false;\n  }\n\n  /**\n   * Call the passed validation callbacks, defined both on the whole form as well as on field level, and return the merged result for all fields.\n   */\n  async validate(): Promise<ErrorRecord<FormData<DATA>>> {\n    const nativeValidation = this.validateNative();\n    const customFormValidation = await this.args.validate?.(\n      this.internalData,\n      Array.from(this.fields.keys())\n    );\n    const customFieldValidations: ErrorRecord<FormData<DATA>>[] = [];\n\n    for (const [name, field] of this.fields) {\n      const fieldValidationResult = await field.validate?.(\n        this.internalData[name],\n        name,\n        this.internalData\n      );\n\n      if (fieldValidationResult) {\n        customFieldValidations.push({\n          [name]: fieldValidationResult,\n        } as ErrorRecord<FormData<DATA>>);\n      }\n    }\n\n    return mergeErrorRecord(\n      nativeValidation,\n      customFormValidation,\n      ...customFieldValidations\n    );\n  }\n\n  async _validate(): Promise<ErrorRecord<FormData<DATA>>> {\n    const promise = this.validate();\n\n    this.validationState = new TrackedAsyncData(promise, this);\n\n    return promise;\n  }\n\n  validateNative(): ErrorRecord<FormData<DATA>> | undefined {\n    const form = this.formElement;\n\n    assert(\n      'Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n      form\n    );\n\n    if (form.checkValidity()) {\n      return;\n    }\n\n    const errors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const el of form.elements) {\n      // This is just to make TS happy, as we need to access properties on el that only form elements have, but elements in `form.elements` are just typed as plain `Element`. Should never occur in reality.\n      assert(\n        'Unexpected form element. If you see this, please report it as a bug to ember-headless-form!',\n        el instanceof HTMLInputElement ||\n          el instanceof HTMLTextAreaElement ||\n          el instanceof HTMLSelectElement ||\n          el instanceof HTMLButtonElement ||\n          el instanceof HTMLFieldSetElement ||\n          el instanceof HTMLObjectElement ||\n          el instanceof HTMLOutputElement\n      );\n\n      if (el.validity.valid) {\n        continue;\n      }\n\n      const name = el.name as FormKey<FormData<DATA>>;\n\n      if (this.fields.has(name)) {\n        errors[name] = [\n          {\n            type: 'native',\n            value: this.internalData[name],\n            message: el.validationMessage,\n          },\n        ];\n      } else {\n        warn(\n          `An invalid form element with name \"${name}\" was detected, but this name is not used as a form field. It will be ignored for validation. Make sure to apply the correct name to custom form elements that participate in form validation!`,\n          { id: 'headless-form.invalid-control-for-unknown-field' }\n        );\n      }\n    }\n\n    return errors;\n  }\n\n  /**\n   * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.\n   * Validation errors will be visible for a certain field, if validation errors for *all* fields are visible, which is the case when trying to submit the form,\n   * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.\n   */\n  get visibleErrors(): ErrorRecord<FormData<DATA>> | undefined {\n    if (!this.validationState?.isResolved) {\n      return undefined;\n    }\n\n    const visibleErrors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const [field, errors] of Object.entries(\n      this.validationState.value\n    ) as [\n      FormKey<FormData<DATA>>,\n      ValidationError<FormData<DATA>[FormKey<FormData<DATA>>]>[]\n    ][]) {\n      if (this.showErrorsFor(field)) {\n        visibleErrors[field] = errors;\n      }\n    }\n\n    return visibleErrors;\n  }\n\n  /**\n   * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.\n   */\n  showErrorsFor(field: FormKey<FormData<DATA>>): boolean {\n    return (\n      this.showAllValidations ||\n      (this.fields.get(field)?.validationEnabled ?? false)\n    );\n  }\n\n  @action\n  async onSubmit(e: Event): Promise<void> {\n    e.preventDefault();\n\n    await this._validate();\n    this.showAllValidations = true;\n\n    if (!this.hasValidationErrors) {\n      if (this.args.onSubmit) {\n        this.submissionState = new TrackedAsyncData(\n          this.args.onSubmit(this.internalData),\n          this\n        );\n      }\n    } else {\n      assert(\n        'Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n        this.validationState?.isResolved\n      );\n      this.args.onInvalid?.(this.internalData, this.validationState.value);\n    }\n  }\n\n  @action\n  registerField(\n    name: FormKey<FormData<DATA>>,\n    field: FieldRegistrationData<FormData<DATA>>\n  ): void {\n    assert(\n      `You passed @name=\"${String(\n        name\n      )}\" to the form field, but this is already in use. Names of form fields must be unique!`,\n      !this.fields.has(name)\n    );\n    this.fields.set(name, new FieldData(field));\n  }\n\n  @action\n  unregisterField(name: FormKey<FormData<DATA>>): void {\n    this.fields.delete(name);\n  }\n\n  @action\n  set<KEY extends FormKey<FormData<DATA>>>(key: KEY, value: DATA[KEY]): void {\n    // when @mutableData is set, our internalData is something we don't control, i.e. might require old-school set() to be on the safe side\n    set(this.internalData, key, value);\n  }\n\n  /**\n   * Handle the `@validateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * Validation will be triggered, and the particular field will be marked to show eventual validation errors.\n   */\n  @action\n  async handleFieldValidation(e: Event | string): Promise<void> {\n    let name: string;\n\n    if (typeof e === 'string') {\n      name = e;\n    } else {\n      const { target } = e;\n\n      name = (target as HTMLInputElement).name;\n    }\n\n    if (name) {\n      const field = this.fields.get(name as FormKey<FormData<DATA>>);\n\n      if (field) {\n        await this._validate();\n        field.validationEnabled = true;\n      }\n    } else if (e instanceof Event) {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n\n  /**\n   * Handle the `@revalidateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.\n   *\n   * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn=\"blur\" @revalidateOn=\"change\"`.\n   */\n  @action\n  async handleFieldRevalidation(e: Event): Promise<void> {\n    const { target } = e;\n    const { name } = target as HTMLInputElement;\n\n    if (name) {\n      if (this.showErrorsFor(name as FormKey<FormData<DATA>>)) {\n        await this._validate();\n      }\n    } else {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n}\n"],"names":["precompileTemplate","FieldData","constructor","fieldRegistration","validate","tracked","HeadlessFormComponent","Component","FieldComponent","on","modifier","el","_p","formElement","args","dataMode","data","TrackedObject","Map","validateOn","revalidateOn","fieldValidationEvent","undefined","fieldRevalidationEvent","hasValidationErrors","validationState","isResolved","Object","keys","value","some","name","fields","has","nativeValidation","validateNative","customFormValidation","internalData","Array","from","customFieldValidations","field","fieldValidationResult","push","mergeErrorRecord","_validate","promise","TrackedAsyncData","form","assert","checkValidity","errors","elements","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLButtonElement","HTMLFieldSetElement","HTMLObjectElement","HTMLOutputElement","validity","valid","type","message","validationMessage","warn","id","visibleErrors","entries","showErrorsFor","showAllValidations","get","validationEnabled","onSubmit","e","preventDefault","submissionState","onInvalid","registerField","String","set","unregisterField","delete","key","handleFieldValidation","target","Event","handleFieldRevalidation","action"],"mappings":"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"}

package/dist/index.d.ts

@@ -1 +1,3 @@
-export type { InputType } from "./components/-private/control/input.js";
+export type { InputType } from "./-private/components/control/input.js";
+export type { ErrorRecord, FieldValidateCallback, FormData, FormKey, FormValidateCallback, ValidationError } from "./-private/types.js";
+export { default as HeadlessForm } from "./components/headless-form.js";

package/dist/index.js

@@ -1,2 +1,2 @@
-
+export { default as HeadlessForm } from './components/headless-form.js';
 //# sourceMappingURL=index.js.map

package/dist/template-registry.d.ts

@@ -1,5 +1,35 @@
 import HeadlessFormComponent from "./components/headless-form.js";
 interface Registry {
+    /**
+     * Headless form component.
+     *
+     * @example
+     * Usage example:
+     *
+     * ```hbs
+     * <HeadlessForm
+     *   @data={{this.data}}
+     *   @validateOn="focusout"
+     *   @revalidateOn="input"
+     *   @onSubmit={{this.doSomething}}
+     *   as |form|
+     * >
+     *   <form.Field @name="firstName" as |field|>
+     *     <div>
+     *       <field.Label>First name</field.Label>
+     *       <field.Input
+     *         required
+     *       />
+     *       <field.errors />
+     *     </div>
+     *   </form.Field>
+     *
+     *   <button
+     *     type="submit"
+     *   >Submit</button>
+     * </HeadlessForm>
+     * ```
+     */
     HeadlessForm: typeof HeadlessFormComponent;
 }
 export { Registry as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-headless-form",
-  "version": "0.0.0",
+  "version": "1.0.0-beta.1",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -15,14 +15,15 @@
   "dependencies": {
     "@babel/runtime": "^7.20.7",
     "@embroider/addon-shim": "^1.0.0",
-    "@ember/test-waiters": "^3.0.2",
-    "@embroider/util": "^1.9.0",
-    "ember-modifier": "^4.0.0",
+    "@embroider/util": "^1.10.0",
+    "ember-async-data": "^0.7.0",
+    "ember-modifier": "^4.1.0",
     "tracked-built-ins": "^3.1.0"
   },
   "peerDependencies": {
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2"
+    "@glimmer/tracking": "^1.1.2",
+    "ember-source": ">=4.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -33,9 +34,9 @@
     "@embroider/addon-dev": "^3.0.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/core": "^0.9.7",
-    "@glint/environment-ember-loose": "^0.9.7",
-    "@glint/template": "^0.9.7",
+    "@glint/core": "^1.0.0-beta.3",
+    "@glint/environment-ember-loose": "^1.0.0-beta.3",
+    "@glint/template": "^1.0.0-beta.3",
     "@nullvoxpopuli/eslint-configs": "^3.0.2",
     "@tsconfig/ember": "^1.0.0",
     "@types/ember": "^4.0.0",
@@ -59,6 +60,7 @@
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "concurrently": "^7.2.1",
+    "ember-source": "^4.4.0",
     "ember-template-lint": "^4.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -69,7 +71,8 @@
     "rollup": "^2.67.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-ts": "^3.2.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "webpack": "^5.75.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -91,7 +94,8 @@
       "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
     },
-    "./addon-main.js": "./addon-main.js"
+    "./addon-main.js": "./addon-main.js",
+    "./-private/*": null
   },
   "typesVersions": {
     "*": {

package/dist/components/-private/capture-events.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/-private/capture-events.d.ts","sourceRoot":"","sources":["../src/components/-private/capture-events.ts"],"names":[],"mappings":"AAEA,UAAiB,8BAA8B;IAC7C,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,KAAK,EAAE,UAAU,GAAG,QAAQ,CAAC;YAC7B,iBAAiB,IAAI,IAAI,CAAC;SAC3B,CAAC;KACH,CAAC;CACH;AAED,QAAA,MAAM,qBAAqB;;;;mBANd,UAAU,GAAG,QAAQ;iCACP,IAAI;;;;EAa9B,CAAC"}

package/dist/components/-private/capture-events.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"capture-events.js","sources":["../../../src/components/-private/capture-events.ts"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nexport interface CaptureEventsModifierSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      event: 'focusout' | 'change';\n      triggerValidation(): void;\n    };\n  };\n}\n\nconst CaptureEventsModifier = modifier<CaptureEventsModifierSignature>(\n  (element, _pos, { event, triggerValidation }) => {\n    element.addEventListener(event, triggerValidation, { passive: true });\n\n    return () => {\n      element.removeEventListener(event, triggerValidation);\n    };\n  }\n);\n\nexport default CaptureEventsModifier;\n"],"names":["CaptureEventsModifier","modifier","element","_pos","event","triggerValidation","addEventListener","passive","removeEventListener"],"mappings":";;AAYMA,MAAAA,qBAAqB,GAAGC,QAAQ,CACpC,CAACC,OAAO,EAAEC,IAAI,EAAE;EAAEC,KAAK;AAAEC,EAAAA,iBAAAA;AAAkB,CAAC,KAAK;AAC/CH,EAAAA,OAAO,CAACI,gBAAgB,CAACF,KAAK,EAAEC,iBAAiB,EAAE;AAAEE,IAAAA,OAAO,EAAE,IAAA;AAAK,GAAC,CAAC,CAAA;AAErE,EAAA,OAAO,MAAM;AACXL,IAAAA,OAAO,CAACM,mBAAmB,CAACJ,KAAK,EAAEC,iBAAiB,CAAC,CAAA;GACtD,CAAA;AACH,CAAC;;;;"}

package/dist/components/-private/control/checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/-private/control/checkbox.hbs.js","../../../../src/components/-private/control/checkbox.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"<input\\n  name={{@name}}\\n  type=\\'checkbox\\'\\n  checked={{@value}}\\n  id={{@fieldId}}\\n  aria-invalid={{if @invalid \\'true\\'}}\\n  ...attributes\\n  {{on \\'click\\' this.handleInput}}\\n/>\")","import Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport interface HeadlessFormControlCheckboxComponentSignature {\n  Element: HTMLInputElement;\n  Args: {\n    value: boolean;\n    name: string;\n    fieldId: string;\n    setValue: (value: boolean) => void;\n    invalid: boolean;\n    errorId: string;\n  };\n}\n\nexport default class HeadlessFormControlCheckboxComponent extends Component<HeadlessFormControlCheckboxComponentSignature> {\n  @action\n  handleInput(e: Event | InputEvent): void {\n    this.args.setValue((e.target as HTMLInputElement).checked);\n  }\n}\n"],"names":["precompileTemplate","HeadlessFormControlCheckboxComponent","Component","handleInput","e","args","setValue","target","checked","action"],"mappings":";;;;;;AACA,eAAeA,kBAAkB,CAAC,2LAA2L,CAAC;;;ACAvL,IAclBC,oCAAoC,IAA1C,MAAA,GAAA,MAAMA,oCAAoC,SAASC,SAAS,CAAgD;EAEzHC,WAAW,CAACC,CAAqB,EAAQ;IACvC,IAAI,CAACC,IAAI,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAAsBC,OAAO,CAAC,CAAA;AAC5D,GAAA;AACF,CAAC,+DAJEC,MAAM,CAAA,EAAA,MAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,SAAA,EAAA,aAAA,CAAA,EAAA,MAAA,CAAA,SAAA,CAAA,GAAA,MAAA,EAAA;AADgD,oBAAA,CAAA,QAAA,EAAA,oCAAA,CAAA;;;;"}