@hokulea/ember 0.7.2 → 0.8.0

package/dist/components/form.js

@@ -1,836 +1,2 @@
-import Component from '@glimmer/component';
-import { tracked, cached } from '@glimmer/tracking';
-import { assert, warn } from '@ember/debug';
-import { hash, fn, uniqueId } 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-DS9du02l.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 RangeInput from './range-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-esm';
-
-const CaptureEventsModifier = modifier(
-// eslint-disable-next-line @typescript-eslint/unbound-method
-(element, _pos, {
-  event,
-  triggerValidation
-}) => {
-  if (event) {
-    element.addEventListener(event, triggerValidation, {
-      passive: true
-    });
-    return () => {
-      element.removeEventListener(event, triggerValidation);
-    };
-  }
-  return;
-});
-
-// import { modifier } from 'ember-modifier';
-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.dataset.invalid = invalid ? 'true' : 'false';
-      }
-    }
-    return;
-  }
-}
-
-const Description = setComponentTemplate(precompileTemplate("\n  <p class={{styles.description}} data-test-description ...attributes>\n    {{yield}}\n  </p>\n", {
-  strictMode: true,
-  scope: () => ({
-    styles
-  })
-}), 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  ", {
-      strictMode: true,
-      scope: () => ({
-        styles
-      })
-    }), this);
-  }
-}
-
-const Label = setComponentTemplate(precompileTemplate("\n  {{#let (if @element @element (element \"label\")) as |Element|}}\n    <Element class={{styles.label}} data-test-label ...attributes>\n      {{yield}}\n    </Element>\n  {{/let}}\n", {
-  strictMode: true,
-  scope: () => ({
-    element,
-    styles
-  })
-}), templateOnly());
-
-class Field extends Component {
-  // Label = this.args.labelComponent ?? Label;
-  ManagaValidationModifier = ManageValidationModifier;
-  constructor(owner, args) {
-    super(owner, args);
-    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}`,
-    // eslint-disable-next-line unicorn/no-typeof-undefined
-    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}`,
-    // eslint-disable-next-line unicorn/no-typeof-undefined
-    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}`,
-    // eslint-disable-next-line unicorn/no-typeof-undefined
-    typeof this.value === 'undefined' || typeof this.value === 'boolean');
-    return this.value;
-  }
-  setValue = value => {
-    this.args.set(this.args.name, value);
-  };
-  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 this.ManagaValidationModifier invalid=this.invalid errorMessageId=errorId name=@name showErrorsFor=@showErrorsFor))}}\n\n        {{#if this.errors}}\n          <Errors @id={{errorId}} @errors={{this.errors}} />\n        {{/if}}\n      </Element>\n    {{/let}}\n  ", {
-      strictMode: true,
-      scope: () => ({
-        uniqueId,
-        fn,
-        element,
-        styles,
-        Label,
-        Description,
-        hash,
-        CaptureEventsModifier,
-        Errors
-      })
-    }), this);
-  }
-}
-
-class RadioField extends Component {
-  Field = this.args.Field;
-  setBooleanValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        styles,
-        Checkbox,
-        asBoolean,
-        Label,
-        Description
-      })
-    }), this);
-  }
-}
-
-class CurrencyField extends Component {
-  Field = this.args.Field;
-  setNumberValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        CurrencyInput,
-        asNumber
-      })
-    }), this);
-  }
-}
-
-class DateField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        DateInput,
-        asString
-      })
-    }), this);
-  }
-}
-
-class EmailField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        EmailInput,
-        asString
-      })
-    }), this);
-  }
-}
-
-const ListLabel = setComponentTemplate(precompileTemplate("\n  <Label @element={{element \"span\"}} id={{@id}}>{{yield}}</Label>\n", {
-  strictMode: true,
-  scope: () => ({
-    Label,
-    element
-  })
-}), templateOnly());
-class ListField extends Component {
-  Field = this.args.Field;
-  List = List;
-  setValue = setValue => {
-    return value => setValue(value);
-  };
-  asValue = value => value;
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        uniqueId,
-        ListLabel
-      })
-    }), this);
-  }
-}
-
-let Option$1 = class Option extends Component {
-  select = checked => {
-    if (checked) {
-      this.args.field.setValue([...(this.args.field.value ?? []), this.args.value]);
-    } else {
-      const values = this.args.field.value;
-      const index = this.args.field.value?.indexOf(this.args.value);
-      if (Array.isArray(values) && index) {
-        values.splice(index, 1);
-        this.args.field.setValue(values);
-      }
-    }
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        uniqueId,
-        styles,
-        Checkbox,
-        Label,
-        Description
-      })
-    }), this);
-  }
-};
-class MultipleChoiceField extends Component {
-  Field = this.args.Field;
-  Option = Option$1;
-  asMultiField = field => {
-    return field;
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        element,
-        Label,
-        styles,
-        hash
-      })
-    }), this);
-  }
-}
-
-class NumberField extends Component {
-  Field = this.args.Field;
-  setNumberValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        NumberInput,
-        asNumber
-      })
-    }), this);
-  }
-}
-
-class PasswordField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        PasswordInput,
-        asString
-      })
-    }), this);
-  }
-}
-
-class PhoneField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        PhoneInput,
-        asString
-      })
-    }), this);
-  }
-}
-
-class RangeField extends Component {
-  Field = this.args.Field;
-  setNumberValue = setValue => {
-    return value => setValue(value);
-  };
-  static {
-    setComponentTemplate(precompileTemplate("\n    <this.Field @name={{@name}} @label={{@label}} @description={{@description}} @validate={{@validate}} as |f|>\n      <RangeInput @value={{asNumber f.value}} @update={{this.setNumberValue f.setValue}} @disabled={{@disabled}} @orientation={{@orientation}} @min={{@min}} @max={{@max}} @step={{@step}} name={{@name}} id={{f.id}} {{f.manageValidation}} {{f.captureEvents}} ...attributes />\n    </this.Field>\n  ", {
-      strictMode: true,
-      scope: () => ({
-        RangeInput,
-        asNumber
-      })
-    }), this);
-  }
-}
-
-class SelectField extends Component {
-  Field = this.args.Field;
-  setValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        Select,
-        asString
-      })
-    }), this);
-  }
-}
-
-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  ", {
-      strictMode: true,
-      scope: () => ({
-        uniqueId,
-        styles,
-        Radio,
-        eq,
-        Label,
-        Description
-      })
-    }), 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  ", {
-      strictMode: true,
-      scope: () => ({
-        element,
-        Label,
-        styles,
-        hash
-      })
-    }), this);
-  }
-}
-
-let TextField$1 = class TextField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        TextInput,
-        asString
-      })
-    }), this);
-  }
-};
-
-class TextField extends Component {
-  Field = this.args.Field;
-  setStringValue = setValue => {
-    return value => setValue(value);
-  };
-  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  ", {
-      strictMode: true,
-      scope: () => ({
-        TextArea,
-        asString
-      })
-    }), 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", {
-  strictMode: true,
-  scope: () => ({
-    styles: styles$1,
-    disabled
-  })
-}), 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", {
-  strictMode: true,
-  scope: () => ({
-    styles: styles$1,
-    disabled
-  })
-}), templateOnly());
-
-/**
- * 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;
-}
-
-/**
- * This internal data structure maintains information about each field that is registered to the form by `registerField`.
- */
-class FieldData {
-  constructor(fieldRegistration) {
-    this.validate = fieldRegistration.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;
-}
-class Form extends Component {
-  Field = Field;
-  CheckboxField = RadioField;
-  CurrencyField = CurrencyField;
-  DateField = DateField;
-  EmailField = EmailField;
-  ListField = ListField;
-  MultipleChoiceField = MultipleChoiceField;
-  NumberField = NumberField;
-  RangeField = RangeField;
-  PasswordField = PasswordField;
-  PhoneField = PhoneField;
-  SelectField = SelectField;
-  SingularChoiceField = SingularChoiceField;
-  TextField = TextField$1;
-  TextAreaField = TextField;
-  formElement;
-  registerForm = modifier((el, _p) => {
-    this.formElement = el;
-  });
-  submit = async e => {
-    e?.preventDefault();
-    await this.validateWithState();
-    this.showAllValidations = true;
-    if (this.validationErrorsExist) {
-      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);
-    } else {
-      if (this.args.submit) {
-        this.submissionState = new TrackedAsyncData(this.args.submit(this.effectiveData));
-      }
-    }
-  };
-  reset = e => {
-    e?.preventDefault();
-    for (const key of Object.keys(this.internalData)) {
-      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete this.internalData[key];
-    }
-    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() {
-    const obj = this.args.data ?? {};
-    if (this.args.dataMode === 'mutable') {
-      return obj;
-    }
-    const {
-      internalData
-    } = this;
-    return new Proxy(obj, {
-      get(target, prop) {
-        return prop in internalData ? internalData[prop] : Reflect.get(target, prop);
-      },
-      set(_target, property, value) {
-        return Reflect.set(internalData, property, value);
-      },
-      has(target, prop) {
-        return prop in internalData ? true : Reflect.has(target, prop);
-      },
-      getOwnPropertyDescriptor(target, prop) {
-        return Reflect.getOwnPropertyDescriptor(prop in internalData ? internalData : target, prop);
-      },
-      ownKeys(target) {
-        return [...Reflect.ownKeys(target), ...Reflect.ownKeys(internalData)] // return only unique values
-        .filter((value, index, array) => array.indexOf(value) === index);
-      },
-      deleteProperty(_target, prop) {
-        if (prop in internalData) {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete internalData[prop];
-        }
-        return true;
-      }
-    });
-  }
-  static {
-    n(this.prototype, "effectiveData", [cached]);
-  }
-  fields = new Map();
-  registerField = (name, field) => {
-    assert(`You passed @name="${String(name)}" to the form field, but this is already in use. Names of form fields must be unique!`, !this.fields.has(name));
-    this.fields.set(name, new FieldData(field));
-  };
-  unregisterField = name => {
-    this.fields.delete(name);
-  };
-  set = (key, value) => {
-    // 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, key, value);
-    // 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
-    } = this;
-    return validateOn === 'submit' ? undefined : validateOn;
-  }
-  /**
-  * 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,
-      revalidateOn
-    } = this;
-    return revalidateOn === 'submit' ? undefined : validateOn === 'input' || validateOn === 'change' && revalidateOn === 'focusout' || validateOn === revalidateOn ? undefined : revalidateOn;
-  }
-  /**
-  * 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
-    } = this;
-    // Only consider validation errors for which we actually have a field rendered
-    return validationState?.isResolved ? Object.keys(validationState.value).some(name => this.fields.has(name)) : 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 nativeValidation = this.args.ignoreNativeValidation === true ? {} : this.validateNative();
-    const customFormValidation = await this.args.validate?.(this.effectiveData, [...this.fields.keys()]);
-    const customFieldValidations = [];
-    for (const [name, field] of this.fields) {
-      const fieldValidationResult = await field.validate?.(this.effectiveData[name], name, this.effectiveData);
-      if (fieldValidationResult) {
-        customFieldValidations.push({
-          [name]: fieldValidationResult
-        });
-      }
-    }
-    return mergeErrorRecord(nativeValidation, customFormValidation, ...customFieldValidations);
-  }
-  validateWithState = async () => {
-    const promise = this.validate();
-    this.validationState = new TrackedAsyncData(promise);
-    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);
-    if (form.checkValidity()) {
-      return;
-    }
-    const errors = {};
-    for (const el of form.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!', el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || el instanceof HTMLButtonElement || el instanceof HTMLFieldSetElement || el instanceof HTMLObjectElement || el instanceof HTMLOutputElement);
-      if (el.validity.valid) {
-        continue;
-      }
-      const name = el.name;
-      if (this.fields.has(name)) {
-        errors[name] = [{
-          type: 'native',
-          value: this.effectiveData[name],
-          message: el.validationMessage
-        }];
-      } else {
-        warn(`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!`, {
-          id: 'headless-form.invalid-control-for-unknown-field'
-        });
-      }
-    }
-    return errors;
-  }
-  /**
-  * 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 visibleErrors = {};
-    for (const [field, errors] of Object.entries(this.validationState.value)) {
-      if (this.showErrorsFor(field)) {
-        visibleErrors[field] = errors;
-      }
-    }
-    return visibleErrors;
-  }
-  /**
-  * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.
-  */
-  showErrorsFor = field => {
-    return this.showAllValidations || (this.fields.get(field)?.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 e => {
-    let name;
-    if (typeof e === 'string') {
-      name = e;
-    } else {
-      const {
-        target
-      } = e;
-      name = target.name;
-    }
-    if (name) {
-      const field = this.fields.get(name);
-      if (field) {
-        await this.validateWithState();
-        field.validationEnabled = true;
-      }
-    } else if (e instanceof Event) {
-      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.`, {
-        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 e => {
-    const {
-      target
-    } = e;
-    const {
-      name
-    } = target;
-    if (name) {
-      if (this.showErrorsFor(name)) {
-        await this.validateWithState();
-      }
-    } 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.`, {
-        id: 'headless-form.validation-event-for-unknown-field'
-      });
-    }
-  };
-  attachValidation = modifier((el, [eventName, handler]) => {
-    if (eventName) {
-      el.addEventListener(eventName, handler);
-      return () => el.removeEventListener(eventName, handler);
-    }
-    return;
-  });
-  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 showErrorsFor=this.showErrorsFor registerField=this.registerField unregisterField=this.unregisterField triggerValidationFor=this.handleFieldValidation fieldValidationEvent=this.fieldValidationEvent fieldRevalidationEvent=this.fieldRevalidationEvent) 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) Range=(component this.RangeField 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  ", {
-      strictMode: true,
-      scope: () => ({
-        styles,
-        on,
-        hash,
-        Submit,
-        Reset
-      })
-    }), this);
-  }
-}
-
-export { Form as default };
+export { F as default } from '../form-DBuzL4_0.js';
 //# sourceMappingURL=form.js.map