@hokulea/ember 0.0.3 → 0.0.4

package/dist/components/form.js

@@ -0,0 +1,826 @@
+import Component from '@glimmer/component';
+import { tracked, cached } from '@glimmer/tracking';
+import { assert, warn } from '@ember/debug';
+import { uniqueId, fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { get, set } from '@ember/object';
+import { TrackedAsyncData } from 'ember-async-data';
+import Modifier, { modifier } from 'ember-modifier';
+import { TrackedObject } from 'tracked-built-ins';
+import styles from '@hokulea/core/forms.module.css';
+import { element } from 'ember-element-helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import Checkbox from './checkbox.js';
+import { b as asBoolean, c as asNumber, d as asString, e as eq } from '../helpers-DApiJrHl.js';
+import CurrencyInput from './currency-input.js';
+import DateInput from './date-input.js';
+import EmailInput from './email-input.js';
+import List from './list.js';
+import NumberInput from './number-input.js';
+import PasswordInput from './password-input.js';
+import PhoneInput from './phone-input.js';
+import Select from './select.js';
+import Radio from './radio.js';
+import TextInput from './text-input.js';
+import TextArea from './text-area.js';
+import styles$1 from '@hokulea/core/actions.module.css';
+import { d as disabled } from '../disabled-B_FQ0Z51.js';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+/**
+ * What the user can pass as @data
+ */
+
+/**
+ * The subset of properties of DATA, whose keys are strings (and not number or symbol)
+ * Only this data is useable in the form
+ */
+
+/**
+ * Returns the type of all keys of DATA, that are also strings. Only strings can be used as field @name
+ */
+
+/**
+ * Generic interface for all validation errors
+ */
+
+/**
+ * Callback used for form level validation
+ */
+
+/**
+ * Callback used for field level validation
+ */
+
+/**
+ * Internal structure to track used fields
+ * @private
+ */
+
+/**
+ * For internal field registration
+ * @private
+ */
+
+/**
+ * Mapper type to construct subset of objects, whose keys are only strings (and not number or symbol)
+ */
+
+function mergeErrorRecord(...records) {
+  const errors = {};
+  for (const record of records) {
+    if (!record) {
+      continue;
+    }
+    for (const [name, fieldErrors] of Object.entries(record)) {
+      const existingFieldErrors = errors[name];
+      errors[name] = existingFieldErrors ? [...existingFieldErrors, ...fieldErrors] : fieldErrors;
+    }
+  }
+  return errors;
+}
+
+const CaptureEventsModifier = modifier((element, _pos, {
+  event,
+  triggerValidation
+}) => {
+  if (event) {
+    element.addEventListener(event, triggerValidation, {
+      passive: true
+    });
+    return () => {
+      element.removeEventListener(event, triggerValidation);
+    };
+  }
+  return undefined;
+});
+
+const Description = setComponentTemplate(precompileTemplate("\n  <p class={{styles.description}} data-test-description ...attributes>\n    {{yield}}\n  </p>\n", {
+  scope: () => ({
+    styles
+  }),
+  strictMode: true
+}), templateOnly());
+
+class Errors extends Component {
+  static {
+    setComponentTemplate(precompileTemplate("\n    <div id={{@id}} aria-live=\"assertive\" class={{styles.errors}} ...attributes>\n      {{!-- <span><Icon @icon='dismiss-circle' @style='filled' /></span> --}}\n      {{#if (has-block)}}\n        {{yield @errors}}\n      {{else}}\n        <div>\n          {{#each @errors as |e|}}\n            {{#if e.message}}\n              <p data-test-error data-test-error-type=\"{{e.type}}\" data-test-error-value=\"{{e.value}}\">{{e.message}}</p>\n            {{/if}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  ", {
+      scope: () => ({
+        styles
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+const Label = setComponentTemplate(precompileTemplate("\n  {{#let (if @element @element (element \"label\")) as |Element|}}\n    {{!-- @glint-expect-error https://github.com/typed-ember/glint/issues/610 --}}\n    <Element class={{styles.label}} data-test-label ...attributes>\n      {{yield}}\n    </Element>\n  {{/let}}\n", {
+  scope: () => ({
+    element,
+    styles
+  }),
+  strictMode: true
+}), templateOnly());
+
+class Field extends Component {
+  // Label = this.args.labelComponent ?? Label;
+  constructor(owner1, args1) {
+    super(owner1, args1);
+    assert('Nested property paths in @name are not supported.', typeof this.args.name !== 'string' || !this.args.name.includes('.'));
+    this.args.registerField(this.args.name, {
+      validate: this.args.validate
+    });
+  }
+  willDestroy() {
+    this.args.unregisterField(this.args.name);
+    super.willDestroy();
+  }
+  get value() {
+    // when @mutableData is set, data is something we don't control, i.e. might require old-school get() to be on the safe side
+    // we do not want to support nested property paths for now though, see the constructor assertion!
+    return get(this.args.data, this.args.name);
+  }
+  get errors() {
+    return this.args.errors?.[this.args.name];
+  }
+  get invalid() {
+    return this.errors !== undefined;
+  }
+  get valueAsString() {
+    assert(`Only string values are expected for ${String(this.args.name)}, but you passed ${typeof this.value}`, typeof this.value === 'undefined' || typeof this.value === 'string');
+    return this.value;
+  }
+  get valueAsStringOrNumber() {
+    assert(`Only string or number values are expected for ${String(this.args.name)}, but you passed ${typeof this.value}`, typeof this.value === 'undefined' || typeof this.value === 'string' || typeof this.value === 'number');
+    return this.value;
+  }
+  get valueAsBoolean() {
+    assert(`Only boolean values are expected for ${String(this.args.name)}, but you passed ${typeof this.value}`, typeof this.value === 'undefined' || typeof this.value === 'boolean');
+    return this.value;
+  }
+  setValue = value1 => {
+    this.args.set(this.args.name, value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) (uniqueId) (fn @triggerValidationFor @name) (if @element @element (element \"div\")) as |fieldId errorId triggerValidation Element|}}\n      <Element class={{styles.field}} data-test-field={{@name}}>\n        {{#if @label}}\n          {{#let (if @labelComponent @labelComponent Label) as |L|}}\n            <L for={{unless @labelComponent fieldId}}>{{@label}}</L>\n          {{/let}}\n        {{/if}}\n\n        {{#if @description}}\n          <Description>{{@description}}</Description>\n        {{/if}}\n\n        {{yield (hash value=this.value setValue=this.setValue id=fieldId errorId=errorId invalid=this.invalid rawErrors=this.errors triggerValidation=triggerValidation captureEvents=(modifier CaptureEventsModifier event=(if this.invalid @fieldRevalidationEvent @fieldValidationEvent) triggerValidation=triggerValidation) manageValidation=(modifier @manageValidation invalid=this.invalid errorMessageId=errorId name=@name))}}\n\n        {{#if this.errors}}\n          <Errors @id={{errorId}} @errors={{this.errors}} />\n        {{/if}}\n      </Element>\n    {{/let}}\n  ", {
+      scope: () => ({
+        uniqueId,
+        fn,
+        element,
+        styles,
+        Label,
+        Description,
+        hash,
+        CaptureEventsModifier,
+        Errors
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class RadioField extends Component {
+  Field = this.args.Field;
+  setBooleanValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @label @name={{@name}} @validate={{@validate}} as |f|>\n      <div class={{styles.choices}}>\n        <div class={{styles.choice}}>\n          <span>\n            <Checkbox @value={{asBoolean f.value}} @update={{this.setBooleanValue f.setValue}} @disabled={{@disabled}} id={{f.id}} name={{@name}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n          </span>\n\n          <div>\n            <Label for={{f.id}}>{{@label}}</Label>\n\n            {{#if @description}}\n              <Description>{{@description}}</Description>\n            {{/if}}\n          </div>\n        </div>\n      </div>\n    </this.Field>\n  ", {
+      scope: () => ({
+        styles,
+        Checkbox,
+        asBoolean,
+        Label,
+        Description
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class CurrencyField extends Component {
+  Field = this.args.Field;
+  setNumberValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <CurrencyInput @value={{asNumber f.value}} @update={{this.setNumberValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        CurrencyInput,
+        asNumber
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class DateField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <DateInput @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        DateInput,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class EmailField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <EmailInput @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        EmailInput,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+const ListLabel = setComponentTemplate(precompileTemplate("\n  <Label @element={{element \"span\"}} id={{@id}}>{{yield}}</Label>\n", {
+  scope: () => ({
+    Label,
+    element
+  }),
+  strictMode: true
+}), templateOnly());
+class ListField extends Component {
+  Field = this.args.Field;
+  List = List;
+  setValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  asValue = value1 => value1;
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) as |labelId|}}\n      <this.Field @name={{@name}} @label={{@label}} @labelComponent={{component ListLabel id=labelId}} @description={{@description}} @validate={{@validate}} as |f|>\n        <this.List @value={{this.asValue f.value}} @update={{this.setValue f.setValue}} @disabled={{@disabled}} name={{@name}} aria-labelledby={{labelId}} {{f.manageValidation}} {{f.captureEvents}} ...attributes as |s|>\n          {{yield s}}\n        </this.List>\n      </this.Field>\n    {{/let}}\n  ", {
+      scope: () => ({
+        uniqueId,
+        ListLabel
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+let Option$1 = class Option extends Component {
+  select = checked1 => {
+    if (checked1) {
+      this.args.field.setValue([...(this.args.field.value ?? []), this.args.value]);
+    } else {
+      const values1 = this.args.field.value;
+      const index1 = this.args.field.value?.indexOf(this.args.value);
+      if (Array.isArray(values1) && index1) {
+        values1.splice(index1, 1);
+        this.args.field.setValue(values1);
+      }
+    }
+  };
+  get checked() {
+    return this.args.field.value?.includes(this.args.value);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) as |id|}}\n      <div class={{styles.choice}} data-test-option>\n        <span>\n          <Checkbox @value={{this.checked}} @update={{this.select}} @disabled={{@disabled}} id={{id}} name={{@name}} value={{@value}} {{@field.manageValidation}} {{@field.captureEvents}} ...attributes />\n        </span>\n\n        <div>\n          <Label for={{id}}>{{@label}}</Label>\n\n          {{#if @description}}\n            <Description>{{@description}}</Description>\n          {{/if}}\n\n          {{yield}}\n        </div>\n      </div>\n    {{/let}}\n  ", {
+      scope: () => ({
+        uniqueId,
+        styles,
+        Checkbox,
+        Label,
+        Description
+      }),
+      strictMode: true
+    }), this);
+  }
+};
+class MultipleChoiceField extends Component {
+  Field = this.args.Field;
+  Option = Option$1;
+  asMultiField = field1 => {
+    return field1;
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @element={{element \"fieldset\"}} @labelComponent={{component Label element=(element \"legend\")}} @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <div class={{styles.choices}} data-test-choices>\n        {{yield (hash Option=(component this.Option field=(this.asMultiField f) name=@name disabled=@disabled))}}\n      </div>\n    </this.Field>\n  ", {
+      scope: () => ({
+        element,
+        Label,
+        styles,
+        hash
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class NumberField extends Component {
+  Field = this.args.Field;
+  setNumberValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <NumberInput @value={{asNumber f.value}} @update={{this.setNumberValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        NumberInput,
+        asNumber
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class PasswordField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <PasswordInput @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        PasswordInput,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class PhoneField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <PhoneInput @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        PhoneInput,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+class SelectField extends Component {
+  Field = this.args.Field;
+  setValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <Select @value={{asString f.value}} @update={{this.setValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes as |s|>\n        {{yield s}}\n      </Select>\n    </this.Field>\n  ", {
+      scope: () => ({
+        Select,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+let Option = class Option extends Component {
+  select = () => {
+    this.args.field.setValue(this.args.value);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#let (uniqueId) as |id|}}\n      <div class={{styles.choice}} data-test-option>\n        <span>\n          <Radio @value={{eq @field.value @value}} @update={{this.select}} @disabled={{@disabled}} id={{id}} name={{@name}} value={{@value}} {{@field.manageValidation}} {{@field.captureEvents}} ...attributes />\n        </span>\n\n        <div>\n          <Label for={{id}}>{{@label}}</Label>\n\n          {{#if @description}}\n            <Description>{{@description}}</Description>\n          {{/if}}\n\n          {{yield}}\n        </div>\n      </div>\n    {{/let}}\n  ", {
+      scope: () => ({
+        uniqueId,
+        styles,
+        Radio,
+        eq,
+        Label,
+        Description
+      }),
+      strictMode: true
+    }), this);
+  }
+};
+class SingularChoiceField extends Component {
+  Field = this.args.Field;
+  Option = Option;
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @element={{element \"fieldset\"}} @labelComponent={{component Label element=(element \"legend\")}} @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <div class={{styles.choices}} data-test-choices>\n        {{yield (hash Option=(component this.Option field=f name=@name disabled=@disabled))}}\n      </div>\n    </this.Field>\n  ", {
+      scope: () => ({
+        element,
+        Label,
+        styles,
+        hash
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+let TextField$1 = class TextField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <TextInput @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        TextInput,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+};
+
+class TextField extends Component {
+  Field = this.args.Field;
+  setStringValue = setValue1 => {
+    return value1 => setValue1(value1);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <TextArea @value={{asString f.value}} @update={{this.setStringValue f.setValue}} @disabled={{@disabled}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
+      scope: () => ({
+        TextArea,
+        asString
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+const Reset = setComponentTemplate(precompileTemplate("\n  <button type=\"reset\" class={{styles.button}} data-intent={{if @intent @intent \"action\"}} data-importance={{if @importance @importance \"supreme\"}} data-spacing={{@spacing}} {{disabled when=(if @disabled @disabled false)}} data-test-button ...attributes>\n    {{#if (has-block \"before\")}}\n      <span data-test-button=\"before\">\n        {{yield to=\"before\"}}\n      </span>\n    {{/if}}\n\n    <span data-test-button=\"label\">\n      {{#if (has-block \"label\")}}\n        {{yield to=\"label\"}}\n      {{/if}}\n\n      {{#if (has-block)}}\n        {{yield}}\n      {{/if}}\n    </span>\n\n    {{#if (has-block \"after\")}}\n      <span data-test-button=\"after\">\n        {{yield to=\"after\"}}\n      </span>\n    {{/if}}\n  </button>\n", {
+  scope: () => ({
+    styles: styles$1,
+    disabled
+  }),
+  strictMode: true
+}), templateOnly());
+
+const Submit = setComponentTemplate(precompileTemplate("\n  <button type=\"submit\" class={{styles.button}} data-intent={{if @intent @intent \"action\"}} data-importance={{if @importance @importance \"supreme\"}} data-spacing={{@spacing}} {{disabled when=(if @disabled @disabled false)}} data-test-button ...attributes>\n    {{#if (has-block \"before\")}}\n      <span data-test-button=\"before\">\n        {{yield to=\"before\"}}\n      </span>\n    {{/if}}\n\n    <span data-test-button=\"label\">\n      {{#if (has-block \"label\")}}\n        {{yield to=\"label\"}}\n      {{/if}}\n\n      {{#if (has-block)}}\n        {{yield}}\n      {{/if}}\n    </span>\n\n    {{#if (has-block \"after\")}}\n      <span data-test-button=\"after\">\n        {{yield to=\"after\"}}\n      </span>\n    {{/if}}\n  </button>\n", {
+  scope: () => ({
+    styles: styles$1,
+    disabled
+  }),
+  strictMode: true
+}), templateOnly());
+
+// import { modifier } from 'ember-modifier';
+// import Modifier from 'ember-modifier';
+// import { renderToCanvas, VertexArray, RenderOptions } from 'neat-webgl-library';
+
+// type Positional = [model: VertexArray];
+
+// export interface Render3DModelSignature {
+//   Element: HTMLCanvasElement;
+//   Args: {
+//     Positional: Positional;
+//     Named: RenderOptions;
+//   };
+// }
+
+class ManageValidationModifier extends Modifier {
+  modify(element, _pos, {
+    name,
+    showErrorsFor,
+    invalid,
+    errorMessageId
+  }) {
+    if (showErrorsFor(name)) {
+      element.ariaInvalid = invalid ? 'true' : 'false';
+      if (invalid) {
+        element.setAttribute('aria-errormessage', errorMessageId);
+      } else {
+        element.removeAttribute('aria-errormessage');
+      }
+      if (element.parentElement && 'inputBuilder' in element.parentElement.dataset) {
+        element.parentElement.setAttribute('data-invalid', invalid ? 'true' : 'false');
+      }
+    }
+    return undefined;
+  }
+}
+
+/**
+ * This internal data structure maintains information about each field that is registered to the form by `registerField`.
+ */
+let FieldData = class FieldData {
+  constructor(fieldRegistration1) {
+    this.validate = fieldRegistration1.validate;
+  }
+  /**
+  * 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.
+  */
+  static {
+    g(this.prototype, "validationEnabled", [tracked], function () {
+      return false;
+    });
+  }
+  #validationEnabled = (i(this, "validationEnabled"), void 0);
+  /**
+  * The *field* level validation callback passed to the field as in `<form.field @name="foo" @validate={{this.validateCallback}}>`
+  */
+  validate;
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+class Form extends Component {
+  Field = Field;
+  CheckboxField = RadioField;
+  CurrencyField = CurrencyField;
+  DateField = DateField;
+  EmailField = EmailField;
+  ListField = ListField;
+  MultipleChoiceField = MultipleChoiceField;
+  NumberField = NumberField;
+  PasswordField = PasswordField;
+  PhoneField = PhoneField;
+  SelectField = SelectField;
+  SingularChoiceField = SingularChoiceField;
+  TextField = TextField$1;
+  TextAreaField = TextField;
+  ManagaValidationModifier = ManageValidationModifier;
+  formElement;
+  registerForm = modifier((el1, _p1) => {
+    this.formElement = el1;
+  });
+  submit = async e1 => {
+    e1?.preventDefault();
+    await this.validateWithState();
+    this.showAllValidations = true;
+    if (!this.validationErrorsExist) {
+      if (this.args.submit) {
+        this.submissionState = new TrackedAsyncData(this.args.submit(this.effectiveData));
+      }
+    } else {
+      assert('Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!',
+      // with optional chaining this leads to a NPE
+      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+      this.validationState && this.validationState.isResolved);
+      this.args.invalidated?.(this.effectiveData, this.validationState.value);
+    }
+  };
+  reset = async e1 => {
+    e1?.preventDefault();
+    for (const key1 of Object.keys(this.internalData)) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete this.internalData[key1];
+    }
+    this.validationState = undefined;
+    this.submissionState = undefined;
+  };
+  /**
+  * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.
+  */
+  internalData = new TrackedObject({});
+  get effectiveData() {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const obj1 = this.args.data ?? {};
+    if (this.args.dataMode === 'mutable') {
+      return obj1;
+    }
+    const {
+      internalData: internalData1
+    } = this;
+    return new Proxy(obj1, {
+      get(target1, prop1) {
+        return prop1 in internalData1 ? internalData1[prop1] : Reflect.get(target1, prop1);
+      },
+      set(_target1, property1, value1) {
+        return Reflect.set(internalData1, property1, value1);
+      },
+      has(target1, prop1) {
+        return prop1 in internalData1 ? true : Reflect.has(target1, prop1);
+      },
+      getOwnPropertyDescriptor(target1, prop1) {
+        return Reflect.getOwnPropertyDescriptor(prop1 in internalData1 ? internalData1 : target1, prop1);
+      },
+      ownKeys(target1) {
+        return [...Reflect.ownKeys(target1), ...Reflect.ownKeys(internalData1)] // return only unique values
+        .filter((value1, index1, array1) => array1.indexOf(value1) === index1);
+      },
+      deleteProperty(_target1, prop1) {
+        if (prop1 in internalData1) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete internalData1[prop1];
+        }
+        return true;
+      }
+    });
+  }
+  static {
+    n(this.prototype, "effectiveData", [cached]);
+  }
+  fields = new Map();
+  registerField = (name1, field1) => {
+    assert(`You passed @name="${String(name1)}" to the form field, but this is already in use. Names of form fields must be unique!`, !this.fields.has(name1));
+    this.fields.set(name1, new FieldData(field1));
+  };
+  unregisterField = name1 => {
+    this.fields.delete(name1);
+  };
+  set = (key1, value1) => {
+    // when @mutableData is set, our effectiveData is something we don't control, i.e. might require old-school set() to be on the safe side
+    set(this.effectiveData, key1, value1);
+    // console.log('internalData', this.internalData);
+  };
+  static {
+    g(this.prototype, "validationState", [tracked]);
+  }
+  #validationState = (i(this, "validationState"), void 0);
+  static {
+    g(this.prototype, "submissionState", [tracked]);
+  }
+  #submissionState = (i(this, "submissionState"), void 0);
+  static {
+    g(this.prototype, "showAllValidations", [tracked], function () {
+      return false;
+    });
+  }
+  #showAllValidations = (i(this, "showAllValidations"), void 0);
+  /**
+  * 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`
+  */
+  get validateOn() {
+    return this.args.validateOn ?? 'submit';
+  }
+  get revalidateOn() {
+    return this.args.revalidateOn ?? 'change';
+  }
+  /**
+  * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)
+  */
+  get fieldValidationEvent() {
+    const {
+      validateOn: validateOn1
+    } = this;
+    return validateOn1 === 'submit' ? undefined : validateOn1;
+  }
+  /**
+  * 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
+  */
+  get fieldRevalidationEvent() {
+    const {
+      validateOn: validateOn1,
+      revalidateOn: revalidateOn1
+    } = this;
+    return revalidateOn1 === 'submit' ? undefined : validateOn1 === 'input' || validateOn1 === 'change' && revalidateOn1 === 'focusout' || validateOn1 === revalidateOn1 ? undefined : revalidateOn1;
+  }
+  /**
+  * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid
+  */
+  get validationErrorsExist() {
+    const {
+      validationState: validationState1
+    } = this;
+    // Only consider validation errors for which we actually have a field rendered
+    return validationState1?.isResolved ? Object.keys(validationState1.value).some(name1 => this.fields.has(name1)) : false;
+  }
+  /**
+  * 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.
+  */
+  async validate() {
+    const nativeValidation1 = this.args.ignoreNativeValidation !== true ? this.validateNative() : {};
+    const customFormValidation1 = await this.args.validate?.(this.effectiveData, Array.from(this.fields.keys()));
+    const customFieldValidations1 = [];
+    for (const [name1, field1] of this.fields) {
+      const fieldValidationResult1 = await field1.validate?.(this.effectiveData[name1], name1, this.effectiveData);
+      if (fieldValidationResult1) {
+        customFieldValidations1.push({
+          [name1]: fieldValidationResult1
+        });
+      }
+    }
+    return mergeErrorRecord(nativeValidation1, customFormValidation1, ...customFieldValidations1);
+  }
+  validateWithState = async () => {
+    const promise1 = this.validate();
+    this.validationState = new TrackedAsyncData(promise1);
+    return promise1;
+  };
+  validateNative() {
+    const form1 = this.formElement;
+    assert('Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!', form1);
+    if (form1.checkValidity()) {
+      return;
+    }
+    const errors1 = {};
+    for (const el1 of form1.elements) {
+      // 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.
+      assert('Unexpected form element. If you see this, please report it as a bug to ember-headless-form!', el1 instanceof HTMLInputElement || el1 instanceof HTMLTextAreaElement || el1 instanceof HTMLSelectElement || el1 instanceof HTMLButtonElement || el1 instanceof HTMLFieldSetElement || el1 instanceof HTMLObjectElement || el1 instanceof HTMLOutputElement);
+      if (el1.validity.valid) {
+        continue;
+      }
+      const name1 = el1.name;
+      if (this.fields.has(name1)) {
+        errors1[name1] = [{
+          type: 'native',
+          value: this.effectiveData[name1],
+          message: el1.validationMessage
+        }];
+      } else {
+        warn(`An invalid form element with name "${name1}" 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!`, {
+          id: 'headless-form.invalid-control-for-unknown-field'
+        });
+      }
+    }
+    return errors1;
+  }
+  /**
+  * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.
+  * 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,
+  * 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.validationState?.isResolved) {
+      return undefined;
+    }
+    const visibleErrors1 = {};
+    for (const [field1, errors1] of Object.entries(this.validationState.value)) {
+      if (this.showErrorsFor(field1)) {
+        visibleErrors1[field1] = errors1;
+      }
+    }
+    return visibleErrors1;
+  }
+  /**
+  * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.
+  */
+  showErrorsFor = field1 => {
+    return this.showAllValidations || (this.fields.get(field1)?.validationEnabled ?? false);
+  };
+  /**
+  * Handle the `@validateOn` event for a certain field, e.g. "blur".
+  * 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.
+  * Validation will be triggered, and the particular field will be marked to show eventual validation errors.
+  */
+  handleFieldValidation = async e1 => {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let name1;
+    if (typeof e1 === 'string') {
+      name1 = e1;
+    } else {
+      const {
+        target: target1
+      } = e1;
+      name1 = target1.name;
+    }
+    if (name1) {
+      const field1 = this.fields.get(name1);
+      if (field1) {
+        await this.validateWithState();
+        field1.validationEnabled = true;
+      }
+    } else if (e1 instanceof Event) {
+      warn(`An event of type "${e1.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.`, {
+        id: 'headless-form.validation-event-for-unknown-field'
+      });
+    }
+  };
+  /**
+  * Handle the `@revalidateOn` event for a certain field, e.g. "blur".
+  * 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.
+  * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.
+  *
+  * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn="blur" @revalidateOn="change"`.
+  */
+  handleFieldRevalidation = async e1 => {
+    const {
+      target: target1
+    } = e1;
+    const {
+      name: name1
+    } = target1;
+    if (name1) {
+      if (this.showErrorsFor(name1)) {
+        await this.validateWithState();
+      }
+    } else {
+      warn(`An event of type "${e1.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.`, {
+        id: 'headless-form.validation-event-for-unknown-field'
+      });
+    }
+  };
+  attachValidation = modifier((el1, [eventName1, handler1]) => {
+    if (eventName1) {
+      el1.addEventListener(eventName1, handler1);
+      return () => el1.removeEventListener(eventName1, handler1);
+    }
+    return undefined;
+  });
+  static {
+    setComponentTemplate(precompileTemplate("\n    <form novalidate class={{styles.form}} data-test-form ...attributes {{this.registerForm}} {{on \"submit\" this.submit}} {{on \"reset\" this.reset}} {{this.attachValidation this.fieldValidationEvent this.handleFieldValidation}} {{this.attachValidation this.fieldRevalidationEvent this.handleFieldRevalidation}}>\n      {{#let (component this.Field data=this.effectiveData set=this.set errors=this.visibleErrors registerField=this.registerField unregisterField=this.unregisterField triggerValidationFor=this.handleFieldValidation fieldValidationEvent=this.fieldValidationEvent fieldRevalidationEvent=this.fieldRevalidationEvent manageValidation=(modifier this.ManagaValidationModifier showErrorsFor=this.showErrorsFor)) as |WiredField|}}\n        {{yield (hash Submit=Submit Reset=Reset Field=WiredField Checkbox=(component this.CheckboxField Field=WiredField) Currency=(component this.CurrencyField Field=WiredField) Date=(component this.DateField Field=WiredField) Email=(component this.EmailField Field=WiredField) List=(component this.ListField Field=WiredField) MultipleChoice=(component this.MultipleChoiceField Field=WiredField) Number=(component this.NumberField Field=WiredField) Password=(component this.PasswordField Field=WiredField) Phone=(component this.PhoneField Field=WiredField) Select=(component this.SelectField Field=WiredField) SingularChoice=(component this.SingularChoiceField Field=WiredField) Text=(component this.TextField Field=WiredField) TextArea=(component this.TextAreaField Field=WiredField) validationState=this.validationState submissionState=this.submissionState invalid=this.validationErrorsExist rawErrors=this.visibleErrors submit=this.submit reset=this.reset)}}\n      {{/let}}\n    </form>\n  ", {
+      scope: () => ({
+        styles,
+        on,
+        hash,
+        Submit,
+        Reset
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Form as default };
+//# sourceMappingURL=form.js.map