@hokulea/ember 0.6.2 → 0.7.0

package/dist/components/form.js

@@ -1,7 +1,7 @@
 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 { hash, fn, uniqueId } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { get, set } from '@ember/object';
 import { TrackedAsyncData } from 'ember-async-data';
@@ -13,7 +13,7 @@ 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 { 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';
@@ -28,62 +28,11 @@ 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';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-/**
- * 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, {
+const CaptureEventsModifier = modifier(
+// eslint-disable-next-line @typescript-eslint/unbound-method
+(element, _pos, {
   event,
   triggerValidation
 }) => {
@@ -95,39 +44,63 @@ const CaptureEventsModifier = modifier((element, _pos, {
       element.removeEventListener(event, triggerValidation);
     };
   }
-  return undefined;
+  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
-  }),
-  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  ", {
+      strictMode: true,
       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", {
+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
-  }),
-  strictMode: true
+  })
 }), templateOnly());
 
 class Field extends Component {
   // Label = this.args.labelComponent ?? Label;
-  constructor(owner1, args1) {
-    super(owner1, args1);
+  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
@@ -149,22 +122,29 @@ class Field extends Component {
     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');
+    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}`, typeof this.value === 'undefined' || typeof this.value === 'string' || typeof this.value === 'number');
+    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}`, typeof this.value === 'undefined' || typeof this.value === 'boolean');
+    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 = value1 => {
-    this.args.set(this.args.name, value1);
+  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 @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  ", {
+    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,
@@ -175,114 +155,113 @@ class Field extends Component {
         hash,
         CaptureEventsModifier,
         Errors
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class RadioField extends Component {
   Field = this.args.Field;
-  setBooleanValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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  ", {
+    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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class CurrencyField extends Component {
   Field = this.args.Field;
-  setNumberValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class DateField extends Component {
   Field = this.args.Field;
-  setStringValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class EmailField extends Component {
   Field = this.args.Field;
-  setStringValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 const ListLabel = setComponentTemplate(precompileTemplate("\n  <Label @element={{element \"span\"}} id={{@id}}>{{yield}}</Label>\n", {
+  strictMode: true,
   scope: () => ({
     Label,
     element
-  }),
-  strictMode: true
+  })
 }), templateOnly());
 class ListField extends Component {
   Field = this.args.Field;
   List = List;
-  setValue = setValue1 => {
-    return value1 => setValue1(value1);
+  setValue = setValue => {
+    return value => setValue(value);
   };
-  asValue = value1 => value1;
+  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  ", {
+    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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 let Option$1 = class Option extends Component {
-  select = checked1 => {
-    if (checked1) {
+  select = checked => {
+    if (checked) {
       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);
+      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);
       }
     }
   };
@@ -291,122 +270,123 @@ let Option$1 = class Option extends Component {
   }
   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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 };
 class MultipleChoiceField extends Component {
   Field = this.args.Field;
   Option = Option$1;
-  asMultiField = field1 => {
-    return field1;
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class NumberField extends Component {
   Field = this.args.Field;
-  setNumberValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class PasswordField extends Component {
   Field = this.args.Field;
-  setStringValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class PhoneField extends Component {
   Field = this.args.Field;
-  setStringValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class RangeField extends Component {
   Field = this.args.Field;
-  setNumberValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
 class SelectField extends Component {
   Field = this.args.Field;
-  setValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }
 
-let Option = class Option extends Component {
+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,
@@ -414,117 +394,133 @@ let Option = class Option extends Component {
         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  ", {
+      strictMode: true,
       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);
+  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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 };
 
 class TextField extends Component {
   Field = this.args.Field;
-  setStringValue = setValue1 => {
-    return value1 => setValue1(value1);
+  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
-      }),
-      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", {
+  strictMode: true,
   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", {
+  strictMode: true,
   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';
+/**
+ * What the user can pass as @data
+ */
 
-// type Positional = [model: VertexArray];
+/**
+ * The subset of properties of DATA, whose keys are strings (and not number or symbol)
+ * Only this data is useable in the form
+ */
 
-// export interface Render3DModelSignature {
-//   Element: HTMLCanvasElement;
-//   Args: {
-//     Positional: Positional;
-//     Named: RenderOptions;
-//   };
-// }
+/**
+ * Returns the type of all keys of DATA, that are also strings. Only strings can be used as field @name
+ */
 
-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');
-      }
+/**
+ * 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 undefined;
   }
+  return errors;
 }
 
 /**
  * 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;
+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.
@@ -539,8 +535,7 @@ let FieldData = class FieldData {
   * 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;
@@ -557,32 +552,31 @@ class Form extends Component {
   SingularChoiceField = SingularChoiceField;
   TextField = TextField$1;
   TextAreaField = TextField;
-  ManagaValidationModifier = ManageValidationModifier;
   formElement;
-  registerForm = modifier((el1, _p1) => {
-    this.formElement = el1;
+  registerForm = modifier((el, _p) => {
+    this.formElement = el;
   });
-  submit = async e1 => {
-    e1?.preventDefault();
+  submit = async e => {
+    e?.preventDefault();
     await this.validateWithState();
     this.showAllValidations = true;
-    if (!this.validationErrorsExist) {
-      if (this.args.submit) {
-        this.submissionState = new TrackedAsyncData(this.args.submit(this.effectiveData));
-      }
-    } else {
+    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 = async e1 => {
-    e1?.preventDefault();
-    for (const key1 of Object.keys(this.internalData)) {
+  reset = e => {
+    e?.preventDefault();
+    for (const key of Object.keys(this.internalData)) {
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete this.internalData[key1];
+      delete this.internalData[key];
     }
     this.validationState = undefined;
     this.submissionState = undefined;
@@ -592,35 +586,34 @@ class Form extends Component {
   */
   internalData = new TrackedObject({});
   get effectiveData() {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const obj1 = this.args.data ?? {};
+    const obj = this.args.data ?? {};
     if (this.args.dataMode === 'mutable') {
-      return obj1;
+      return obj;
     }
     const {
-      internalData: internalData1
+      internalData
     } = this;
-    return new Proxy(obj1, {
-      get(target1, prop1) {
-        return prop1 in internalData1 ? internalData1[prop1] : Reflect.get(target1, prop1);
+    return new Proxy(obj, {
+      get(target, prop) {
+        return prop in internalData ? internalData[prop] : Reflect.get(target, prop);
       },
-      set(_target1, property1, value1) {
-        return Reflect.set(internalData1, property1, value1);
+      set(_target, property, value) {
+        return Reflect.set(internalData, property, value);
       },
-      has(target1, prop1) {
-        return prop1 in internalData1 ? true : Reflect.has(target1, prop1);
+      has(target, prop) {
+        return prop in internalData ? true : Reflect.has(target, prop);
       },
-      getOwnPropertyDescriptor(target1, prop1) {
-        return Reflect.getOwnPropertyDescriptor(prop1 in internalData1 ? internalData1 : target1, prop1);
+      getOwnPropertyDescriptor(target, prop) {
+        return Reflect.getOwnPropertyDescriptor(prop in internalData ? internalData : target, prop);
       },
-      ownKeys(target1) {
-        return [...Reflect.ownKeys(target1), ...Reflect.ownKeys(internalData1)] // return only unique values
-        .filter((value1, index1, array1) => array1.indexOf(value1) === index1);
+      ownKeys(target) {
+        return [...Reflect.ownKeys(target), ...Reflect.ownKeys(internalData)] // return only unique values
+        .filter((value, index, array) => array.indexOf(value) === index);
       },
-      deleteProperty(_target1, prop1) {
-        if (prop1 in internalData1) {
+      deleteProperty(_target, prop) {
+        if (prop in internalData) {
           // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete internalData1[prop1];
+          delete internalData[prop];
         }
         return true;
       }
@@ -630,16 +623,16 @@ class Form extends Component {
     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));
+  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 = name1 => {
-    this.fields.delete(name1);
+  unregisterField = name => {
+    this.fields.delete(name);
   };
-  set = (key1, value1) => {
+  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, key1, value1);
+    set(this.effectiveData, key, value);
     // console.log('internalData', this.internalData);
   };
   static {
@@ -670,79 +663,79 @@ class Form extends Component {
   */
   get fieldValidationEvent() {
     const {
-      validateOn: validateOn1
+      validateOn
     } = this;
-    return validateOn1 === 'submit' ? undefined : validateOn1;
+    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: validateOn1,
-      revalidateOn: revalidateOn1
+      validateOn,
+      revalidateOn
     } = this;
-    return revalidateOn1 === 'submit' ? undefined : validateOn1 === 'input' || validateOn1 === 'change' && revalidateOn1 === 'focusout' || validateOn1 === revalidateOn1 ? undefined : revalidateOn1;
+    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: validationState1
+      validationState
     } = 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;
+    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 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
+    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(nativeValidation1, customFormValidation1, ...customFieldValidations1);
+    return mergeErrorRecord(nativeValidation, customFormValidation, ...customFieldValidations);
   }
   validateWithState = async () => {
-    const promise1 = this.validate();
-    this.validationState = new TrackedAsyncData(promise1);
-    return promise1;
+    const promise = this.validate();
+    this.validationState = new TrackedAsyncData(promise);
+    return promise;
   };
   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()) {
+    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 errors1 = {};
-    for (const el1 of form1.elements) {
+    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!', 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) {
+      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 name1 = el1.name;
-      if (this.fields.has(name1)) {
-        errors1[name1] = [{
+      const name = el.name;
+      if (this.fields.has(name)) {
+        errors[name] = [{
           type: 'native',
-          value: this.effectiveData[name1],
-          message: el1.validationMessage
+          value: this.effectiveData[name],
+          message: el.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!`, {
+        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 errors1;
+    return errors;
   }
   /**
   * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.
@@ -753,44 +746,43 @@ class Form extends Component {
     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;
+    const visibleErrors = {};
+    for (const [field, errors] of Object.entries(this.validationState.value)) {
+      if (this.showErrorsFor(field)) {
+        visibleErrors[field] = errors;
       }
     }
-    return visibleErrors1;
+    return visibleErrors;
   }
   /**
   * 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);
+  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 e1 => {
-    // eslint-disable-next-line @typescript-eslint/init-declarations
-    let name1;
-    if (typeof e1 === 'string') {
-      name1 = e1;
+  handleFieldValidation = async e => {
+    let name;
+    if (typeof e === 'string') {
+      name = e;
     } else {
       const {
-        target: target1
-      } = e1;
-      name1 = target1.name;
+        target
+      } = e;
+      name = target.name;
     }
-    if (name1) {
-      const field1 = this.fields.get(name1);
-      if (field1) {
+    if (name) {
+      const field = this.fields.get(name);
+      if (field) {
         await this.validateWithState();
-        field1.validationEnabled = true;
+        field.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.`, {
+    } 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'
       });
     }
@@ -802,40 +794,40 @@ class Form extends Component {
   *
   * 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 => {
+  handleFieldRevalidation = async e => {
     const {
-      target: target1
-    } = e1;
+      target
+    } = e;
     const {
-      name: name1
-    } = target1;
-    if (name1) {
-      if (this.showErrorsFor(name1)) {
+      name
+    } = target;
+    if (name) {
+      if (this.showErrorsFor(name)) {
         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.`, {
+      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((el1, [eventName1, handler1]) => {
-    if (eventName1) {
-      el1.addEventListener(eventName1, handler1);
-      return () => el1.removeEventListener(eventName1, handler1);
+  attachValidation = modifier((el, [eventName, handler]) => {
+    if (eventName) {
+      el.addEventListener(eventName, handler);
+      return () => el.removeEventListener(eventName, handler);
     }
-    return undefined;
+    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 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) 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  ", {
+    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
-      }),
-      strictMode: true
+      })
     }), this);
   }
 }