ngx-vest-forms 1.0.1

package/README.md

@@ -0,0 +1,586 @@
+# ngx-vest-forms
+
+### Introduction
+
+This is a very lightweight adapter for Angular template-driven forms and [vestjs](https://vestjs.dev).
+This package gives us the ability to create unidirectional forms without any boilerplate.
+It is meant for complex forms with a high focus on complex validations and conditionals.
+
+All the validations are asynchronous and use [vestjs](https://vestjs.dev) suites that can be re-used
+across different frameworks and technologies.
+
+### Installation
+
+You can install the package by running:
+
+```shell
+npm i ngx-vest-forms
+```
+
+### Creating a simple form
+
+Let's start by explaining how to create a simple form.
+I want a form with a form group called `general` info that has 2 properties:
+- `firstName`
+- `lastName`
+
+We need to import the `vestForms` const in the imports section of the `@Component` decorator.
+Now we can apply the `scVestForm` directive to the `form` tag and listen to the `formValueChange` output to feed our signal.
+In the form we create a form group for `generalInfo`  with the `ngModelGroup` directive.
+And we crate 2 inputs with the `name` attribute and the `[ngModel]` input.
+**Do note that we are not using the banana in the box syntax but only tha square brackets, resulting in a unidirectional dataflow**
+
+```typescript
+import { vestForms, DeepPartial } from 'ngx-vest-forms';
+
+// A form model is always deep partial because angular will create it over time organically
+type MyFormModel = DeepPartial<{
+  generalInfo: {
+    firstName: string;
+    lastName: string;
+  }
+}>
+
+@Component({
+  imports: [vestForms],
+  template: `
+<form scVestForm 
+      (formValueChange)="formValue.set($event)"
+      (ngSubmit)="onSubmit()">
+      <div ngModelGroup="generalInfo">
+        <label>First name</label>
+        <input type="text" name="firstName" [ngModel]="formValue().generalInformation?.firstName"/>
+      
+        <label>Last name</label>
+        <input type="text" name="lastName" [ngModel]="formValue().generalInformation?.lastName"/>
+      </div>
+</form>
+  `
+})
+export class MyComponent {
+  // This signal will hold the state of our form
+  protected readonly formValue = signal<MyFormModel>({});
+}
+```
+
+**Note: Template-driven forms are deep partial, so always use the `?` operator in your templates.**
+
+That's it! This will feed the `formValue` signal and angular will create a form group and 2 form controls for us automatically.
+The object that will be fed in the `formValue` signal will look like this:
+
+```typescript
+formValue = {
+  generalInfo: {
+    firstName: '',
+    lastName: ''
+  }
+}
+```
+
+The ngForm will contain automatically created FormGroups and FormControls.
+This does not have anything to do with this package. It's just Angular:
+```typescript
+form = {
+  controls: {
+    generalInformation: { // FormGroup
+      controls: {
+        firstName: {...}, // FormControl
+        lastName: {...} //FormControl
+      }
+    }
+  }
+}
+```
+
+The `scVestForm` directive offers some basic outputs for us though:
+
+| Output               | Description                                                                                                                             | 
+|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| formValueChange<T>   | Emits when the form value changes. But debounces<br/> the events since template-driven forms are created by the<br/>framework over time | 
+| dirtyChange<boolean> | Emits when the dirty state of the form changes                                                                                          | 
+| validChange<boolean> | Emits when the form becomes dirty or pristine                                                                                           | 
+| errorsChange         | Emits an entire list of the form and all its form groups and controls                                                                   | 
+
+### Avoiding typo's
+
+Template-driven forms are type-safe, but not in the `name` attributes or `ngModelGroup` attributes.
+Making a typo in those can result in a time-consuming endeavor. For this we have introduced shapes.
+A shape is an object where the `scVestForm` can validate to. It is a deep required of the form model:
+
+```typescript
+import { DeepPartial, DeepRequired, vestForms } from 'ngx-vest-forms';
+
+type MyFormModel = DeepPartial<{
+  generalInfo: {
+    firstName: string;
+    lastName: string;
+  }
+}>
+
+export const myFormModelShape: DeepRequired<MyFormModel> = {
+  generalInfo: {
+    firstName: '',
+    lastName: '' 
+  }
+};
+
+@Component({
+  imports: [vestForms],
+  template: `
+<form scVestForm 
+      [formShape]="shape"
+      (formValueChange)="formValue.set($event)"
+      (ngSubmit)="onSubmit()">
+      
+      <div ngModelGroup="generalInfo">
+        <label>First name</label>
+        <input type="text" name="firstName" [ngModel]="formValue().generalInformation?.firstName"/>
+      
+        <label>Last name</label>
+        <input type="text" name="lastName" [ngModel]="formValue().generalInformation?.lastName"/>
+      </div>
+</form>
+  `
+})
+export class MyComponent {
+  protected readonly formValue = signal<MyFormModel>({});
+  protected readonly shape = myFormModelShape;
+}
+```
+
+By passing the shape to the `formShape` input the `scVestForm` will validate the actual form value
+against the form shape every time the form changes, but only when Angular is in devMode.
+
+Making a typo in the name attribute or an ngModelGroup attribute would result in runtime errors.
+The console would look like this:
+
+```chatinput
+Error: Shape mismatch:
+
+[ngModel] Mismatch 'firstame'
+[ngModelGroup] Mismatch: 'addresses.billingddress'
+[ngModel] Mismatch 'addresses.billingddress.steet'
+[ngModel] Mismatch 'addresses.billingddress.number'
+[ngModel] Mismatch 'addresses.billingddress.city'
+[ngModel] Mismatch 'addresses.billingddress.zipcode'
+[ngModel] Mismatch 'addresses.billingddress.country'
+
+
+    at validateShape (shape-validation.ts:28:19)
+    at Object.next (form.directive.ts:178:17)
+    at ConsumerObserver.next (Subscriber.js:91:33)
+    at SafeSubscriber._next (Subscriber.js:60:26)
+    at SafeSubscriber.next (Subscriber.js:31:18)
+    at subscribe.innerSubscriber (switchMap.js:14:144)
+    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
+    at OperatorSubscriber.next (Subscriber.js:31:18)
+    at map.js:7:24
+```
+
+### Conditional fields
+
+What if we want to remove a form control or form group? With reactive forms that would require a lot of work 
+but since Template driven forms do all the hard work for us, we can simply create a computed signal for that and
+bind that in the template. Having logic in the template is considered a bad practice, so we can do all
+the calculations in our class.
+
+Let's hide `lastName` if `firstName` is not filled in:
+
+```html
+<div ngModelGroup="generalInfo">
+  <label>First name</label>
+  <input type="text" name="firstName" [ngModel]="formValue().generalInformation?.firstName"/>
+  
+  @if(lastNameAvailable()){
+    <label>Last name</label>
+    <input type="text" name="lastName" [ngModel]="formValue().generalInformation?.lastName"/>
+  }
+</div>
+```
+
+```typescript
+class MyComponent {
+  ...
+  protected readonly lastNameAvailable = 
+    computed(() => !!this.formValue().generalInformation?.firstName);
+}
+```
+
+This will automatically add and remove the form control from our form model.
+This also works for a form group:
+
+```html
+@if(showGeneralInfo()){
+  <div ngModelGroup="generalInfo">
+    <label>First name</label>
+    <input type="text" name="firstName" [ngModel]="formValue().generalInformation?.firstName"/>
+    
+    <label>Last name</label>
+    <input type="text" name="lastName" [ngModel]="formValue().generalInformation?.lastName"/>
+  </div>
+}
+```
+
+### Reactive disabling
+
+To achieve reactive disabling, we just have to take advantage of computed signals as well:
+
+```typescript
+class MyComponent {
+  protected readonly lastNameDisabled = 
+    computed(() => !this.formValue().generalInformation?.firstName);
+}
+```
+
+We can bind the computed signal to the `disabled` directive of Angular.
+```html
+<input type="text" name="lastName" 
+       [disabled]="lastNameDisabled()" 
+       [ngModel]="formValue().generalInformation?.lastName"/>
+```
+
+### Validations
+
+The absolute gem in ngx-vest-forms is the flexibility in validations without writing any boilerplate.
+The only dependency this lib has is [vest.js](https://vestjs.dev). An awesome lightweight validation framework.
+You can use it on the backend/frontend/Angular/react etc...
+
+We use vest because it introduces the concept of vest suites. These are suites that kind of look like unit-tests
+but that are highly flexible:
+* [X] Write validations on forms
+* [X] Write validations on form groups
+* [X] Write validations on form controls
+* [X] Composable/reuse-able different validation suites
+* [X] Write conditional validations
+
+This is how you write a simple Vest suite:
+```typescript
+import { enforce, only, staticSuite, test } from 'vest';
+import { MyFormModel } from '../models/my-form.model'
+
+export const myFormModelSuite = staticSuite(
+    (model: MyformModel, field?: string) => {
+      if (field) {
+        // Needed to not run every validation every time
+        only(field);
+      }
+      test('firstName', 'First name is required', () => {
+        enforce(model.firstName).isNotBlank();
+      });
+      test('lastName', 'Last name is required', () => {
+        enforce(model.lastName).isNotBlank();
+      });
+    }
+  );
+};
+```
+
+In the `test` function the first parameter is the field, the second is the validation error.
+The field is separated with the `.` syntax. So if we would have an `addresses` form group with an `billingAddress` form group inside
+and a form control `street` the field would be: `addresses.billingAddress.street`.
+
+This syntax should be self-explanatory and the entire enforcements guidelines can be found on [vest.js](https://vestjs.dev).
+
+Now let's connect this to our form. This is the biggest pain that ngx-vest-forms will fix for you: **Connecting Vest suites to Angular**
+
+```typescript
+class MyComponent {
+  protected readonly formValue = signal<MyFormModel>({});
+  protected readonly suite = myFormModelSuite;
+}
+```
+
+```html
+
+<form scVestForm
+      [formShape]="shape"
+      [formValue]="formValue"
+      [suite]="suite"
+      (formValueChange)="formValue.set($event)"
+      (ngSubmit)="onSubmit()">
+  ...
+</form>
+```
+
+That's it. Validations are completely wired now. Because ngx-vest-forms will hook into the 
+`[ngModel]` and `ngModelGroup` attributes, and create ngValidators automatically.
+
+It goes like this: 
+- Control gets created, Angular recognizes the `ngModel` and `ngModelGroup` directives
+- These directives implement `AsyncValidator` and will connect to a vest suite
+- User types into control
+- The validate function gets called
+- Vest gets called for one field
+- Vest returns the errors
+- @simpilfied/forms puts those errors on the angular form control
+
+This means that `valid`, `invalid`, `errors`,  `statusChanges` etc will keep on working
+just like it would with a regular angular form.
+
+#### Showing validation errors
+
+Now we want to show the validation errors in a consistent way.
+For that we have provided the `sc-control-wrapper` attribute component.
+
+You can use it on:
+- elements that hold `ngModelGroup`
+- elements that have an `ngModel` (or form control) inside of them.
+
+This will show errors automatically on:
+- form submit
+- blur
+
+**Note:** If those requirements don't fill your need, you can write a custom control-wrapper by copy-pasting the
+`control-wrapper` and adjusting the code.
+
+Let's update our form:
+
+```html
+
+<div ngModelGroup="generalInfo" sc-control-wrapper>
+  <div sc-control-wrapper>
+    <label>First name</label
+    <input type="text" name="firstName" [ngModel]="formValue().generalInformation?.firstName"/>
+  </div>
+
+  <div sc-control-wrapper>
+    <label>Last name</label>
+    <input type="text" name="lastName" [ngModel]="formValue().generalInformation?.lastName"/>
+  </div>
+</div>
+```
+
+This is the only thing we need to do to create a form that is completely wired with vest.
+* [x] Automatic creation of form controls and form groups
+* [x] Automatic connection to vest suites
+* [x] Automatic typo validation
+* [x] Automatic adding of css error classes and showing validation messages
+  * [x] On blur
+  * [x] On submit
+
+### Conditional validations
+
+Vest makes it extremely easy to create conditional validations.
+Assume we have a form model that has `age` and `emergencyContact`.
+The `emergencyContact` is required, but only when the person is not of legal age.
+
+We can use the `omitWhen` so that when the person is below 18, the assertion
+will not be done.
+
+```typescript
+import { enforce, omitWhen, only, staticSuite, test } from 'vest';
+
+...
+omitWhen((model.age || 0) >= 18, () => {
+  test('emergencyContact', 'Emergency contact is required', () => {
+    enforce(model.emergencyContact).isNotBlank();
+  });
+});
+```
+
+You can put those validations on every field that you want. On form group fields and on form control fields.
+Check this interesting example below:
+
+* [x] Password is always required
+* [x] Confirm password is only required when there is a password
+* [x] The passwords should match, but only when they are both filled in
+
+```typescript
+test('passwords.password', 'Password is not filled in', () => {
+  enforce(model.passwords?.password).isNotBlank();
+});
+omitWhen(!model.passwords?.password, () => {
+  test('passwords.confirmPassword', 'Confirm password is not filled in', () => {
+    enforce(model.passwords?.confirmPassword).isNotBlank();
+  });
+});
+omitWhen(!model.passwords?.password || !model.passwords?.confirmPassword, () => {
+  test('passwords', 'Passwords do not match', () => {
+    enforce(model.passwords?.confirmPassword).equals(model.passwords?.password);
+  });
+});
+```
+
+Forget about manually adding, removing validators on reactive forms and not being able to
+re-use them. This code is easy to test, easy to re-use on frontend, backend, angular, react, etc...
+**Oh, it's also pretty readable**
+
+### Composable validations
+
+We can compose validations suites with sub suites. After all, we want to re-use certain pieces of our
+validation logic and we don't want one huge unreadable suite.
+This is quite straightforward with Vest.
+
+Let's take this simple function that validates an address:
+
+```typescript
+export function addressValidations(model: AddressModel | undefined, field: string): void {
+  test(`${field}.street`, 'Street is required', () => {
+    enforce(model?.street).isNotBlank();
+  });
+  test(`${field}.city`, 'City is required', () => {
+    enforce(model?.city).isNotBlank();
+  });
+  test(`${field}.zipcode`, 'Zipcode is required', () => {
+    enforce(model?.zipcode).isNotBlank();
+  });
+  test(`${field}.number`, 'Number is required', () => {
+    enforce(model?.number).isNotBlank();
+  });
+  test(`${field}.country`, 'Country is required', () => {
+    enforce(model?.country).isNotBlank();
+  });
+}
+```
+
+Our suite would consume it like this:
+
+```typescript
+import { enforce, omitWhen, only, staticSuite, test } from 'vest';
+import { PurchaseFormModel } from '../models/purchaseFormModel';
+
+export const mySuite = staticSuite(
+  (model: PurchaseFormModel, field?: string) => {
+    if (field) {
+      only(field);
+    }
+    addressValidations(model.addresses?.billingAddress, 'addresses.billingAddress');
+    addressValidations(model.addresses?.shippingAddress, 'addresses.shippingAddress');
+  }
+);
+```
+
+We achieved decoupling, readability and reuse of our addressValidations.
+
+#### A more complex example
+
+Let's combine the conditional part with the reusable part.
+We have 2 addresses, but the shippingAddress is only required when the `shippingAddressIsDifferentFromBillingAddress`
+Checkbox is checked. But if it is checked, all fields are required.
+And if both addresses are filled in, they should be different.
+
+This gives us validation on:
+* [x] The addresses form field (they can't be equal)
+* [x] The shipping Address field (only required when checkbox is checked)
+* [x] validation on all the address fields (street, number, etc) on both addresses
+
+```typescript
+addressValidations(
+  model.addresses?.billingAddress,
+  'addresses.billingAddress'
+);
+omitWhen(
+  !model.addresses?.shippingAddressDifferentFromBillingAddress,
+  () => {
+    addressValidations(
+      model.addresses?.shippingAddress,
+      'addresses.shippingAddress'
+    );
+    test('addresses', 'The addresses appear to be the same', () => {
+      enforce(JSON.stringify(model.addresses?.billingAddress)).notEquals(
+        JSON.stringify(model.addresses?.shippingAddress)
+      );
+    });
+  }
+);
+```
+
+### Validations on the root form
+
+When we want to validate multiple fields that are depending on each other,
+it is a best practice to wrap them in a parent form group.
+If `password`  and `confirmPassword` have to be equal the validation should not happen on
+`password` nor on `confirmPassword`, it should happen on `passwords`:
+
+```typescript
+const form = {
+  // validation happens here
+  passwords: {
+    password: '',
+    confirmPassword: ''
+  }
+};
+```
+
+Sometimes we don't have the ability to create a form group for 2 depending fields, or sometimes we just
+want to create validation rules on portions of the form. For that we can use `validateRootForm`.
+Use the `errorsChange` output to keep the errors as state in a signal that we can use in the template
+wherever we want.
+
+```html
+{{ errors()?.['rootForm'] }} <!-- render the errors on the rootForm -->
+{{ errors() }} <!-- render all the errors -->
+<form scVestForm 
+      [formValue]="formValue()"
+      [validateRootForm]="true"
+      [formShape]="shape"
+      [suite]="suite"
+      (errorsChange)="errors.set($event)"
+      ...>
+</form>
+```
+
+```typescript
+export class MyformComponent {
+  protected readonly formValue = signal<MyFormModel>({});
+  protected readonly suite = myFormModelSuite;
+  // Keep the errors in state
+  protected readonly errors = signal<Record<string, string>>({ });
+}
+```
+
+When setting the `[validateRootForm]` directive to true, the form will
+also create an ngValidator on root level, that listens to the ROOT_FORM field.
+
+To make this work we need to use the field in the vest suite like this:
+
+```typescript
+import { ROOT_FORM } from 'ngx-vest-forms';
+
+test(ROOT_FORM, 'Brecht is not 30 anymore', () => {
+  enforce(
+    model.firstName === 'Brecht' && 
+    model.lastName === 'Billiet' && 
+    model.age === 30).isFalsy();
+});
+```
+
+### Validation dependencies
+
+Sometimes we need to re-trigger validations of form controls or form groups because they are dependant on other form controls or form groups.
+For instance: A `confirmPassword` field is not required unless the `password` is filled in. Which means that when the `password` field gets a new value,
+we need to run the validations on `confirmPassword`.
+
+
+### Form arrays
+
+Todo
+
+#### Form array validations
+
+An example can be found [in this simplified courses article](https://blog.simplified.courses/template-driven-forms-with-form-arrays/)
+
+We can look in `projects/examples/src/app/validations/phonenumber.validations.ts` to see an example on the validations part.
+
+
+### Child form components
+
+Big forms result in big files. It makes sense to split them up.
+For instance an address form can be reused, so we want to create a child component for that.
+We have to make sure that this child component can access the ngForm.
+For that we have to use the `vestFormViewProviders` from `ngx-vest-forms`
+
+```typescript
+...
+import { vestForms, vestFormsViewProviders } from 'ngx-vest-forms';
+
+@Component({
+  ...
+  viewProviders: [vestFormsViewProviders]
+})
+export class AddressComponent {
+  @Input() address?: AddressModel;
+}
+```
+
+You can check the examples in the github repo [here](https://github.com/simplifiedcourses/ngx-vest-forms/blob/master/projects/examples).

package/esm2022/lib/components/control-wrapper/control-wrapper.component.mjs

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DestroyRef, HostBinding, inject } from '@angular/core';
+import { NgModel, NgModelGroup } from '@angular/forms';
+import { mergeWith, of, switchMap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormDirective } from '../../directives/form.directive';
+import * as i0 from "@angular/core";
+export class ControlWrapperComponent {
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        this.formDirective = inject(FormDirective);
+        this.destroyRef = inject(DestroyRef);
+        this.ngModelGroup = inject(NgModelGroup, {
+            optional: true,
+            self: true,
+        });
+    }
+    get control() {
+        return this.ngModelGroup ? this.ngModelGroup.control : this.ngModel?.control;
+    }
+    get invalid() {
+        return this.control?.touched && this.errors;
+    }
+    get errors() {
+        if (this.control?.pending) {
+            return this.previousError;
+        }
+        else {
+            this.previousError = this.control?.errors?.['errors'];
+        }
+        return this.control?.errors?.['errors'];
+    }
+    ngAfterViewInit() {
+        // Wait until the form is idle
+        // Then, listen to all events of the ngModelGroup or ngModel
+        // and mark the component and its ancestors as dirty
+        // This allows us to use the OnPush ChangeDetection Strategy
+        this.formDirective.idle$
+            .pipe(switchMap(() => this.ngModelGroup?.control?.events || of(null)), mergeWith(this.control?.events || of(null)), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.cdRef.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ControlWrapperComponent, isStandalone: true, selector: "[sc-control-wrapper]", host: { properties: { "class.sc-control-wrapper--invalid": "this.invalid" } }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<div class=\"sc-control-wrapper\">\n  <div class=\"sc-control-wrapper__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"sc-control-wrapper__errors\">\n    <ul [hidden]=\"!invalid\">\n      @for (error of errors; track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  </div>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[sc-control-wrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-control-wrapper\">\n  <div class=\"sc-control-wrapper__content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"sc-control-wrapper__errors\">\n    <ul [hidden]=\"!invalid\">\n      @for (error of errors; track error) {\n        <li>{{ error }}</li>\n      }\n    </ul>\n  </div>\n</div>\n" }]
+        }], propDecorators: { ngModel: [{
+                type: ContentChild,
+                args: [NgModel]
+            }], invalid: [{
+                type: HostBinding,
+                args: ['class.sc-control-wrapper--invalid']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12ZXN0LWZvcm1zL3NyYy9saWIvY29tcG9uZW50cy9jb250cm9sLXdyYXBwZXIvY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12ZXN0LWZvcm1zL3NyYy9saWIvY29tcG9uZW50cy9jb250cm9sLXdyYXBwZXIvY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osVUFBVSxFQUNWLFdBQVcsRUFDWCxNQUFNLEVBQ1QsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFtQixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDeEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ2hELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7QUFTaEUsTUFBTSxPQUFPLHVCQUF1QjtJQVBwQztRQVFxQixVQUFLLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFDbEMsa0JBQWEsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDdEMsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUdqQyxpQkFBWSxHQUF3QixNQUFNLENBQUMsWUFBWSxFQUFFO1lBQ3JFLFFBQVEsRUFBRSxJQUFJO1lBQ2QsSUFBSSxFQUFFLElBQUk7U0FDYixDQUFDLENBQUM7S0F1Q047SUFqQ0csSUFBWSxPQUFPO1FBQ2YsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUM7SUFDakYsQ0FBQztJQUVELElBQ1csT0FBTztRQUNkLE9BQU8sSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLElBQUksSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNoRCxDQUFDO0lBRUQsSUFBVyxNQUFNO1FBQ2IsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxDQUFDO1lBQ3hCLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUM5QixDQUFDO2FBQU0sQ0FBQztZQUNKLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUMxRCxDQUFDO1FBQ0QsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFTSxlQUFlO1FBQ2xCLDhCQUE4QjtRQUM5Qiw0REFBNEQ7UUFDNUQsb0RBQW9EO1FBQ3BELDREQUE0RDtRQUM1RCxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUs7YUFDbkIsSUFBSSxDQUNELFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLE9BQU8sRUFBRSxNQUFNLElBQUksRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQy9ELFNBQVMsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsRUFDM0Msa0JBQWtCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUN0QzthQUNBLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQzlCLENBQUMsQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs4R0EvQ1EsdUJBQXVCO2tHQUF2Qix1QkFBdUIsb01BS2xCLE9BQU8sZ0RDNUJ6Qiw2VEFZQTs7MkZEV2EsdUJBQXVCO2tCQVBuQyxTQUFTOytCQUNJLHNCQUFzQixjQUNwQixJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU07OEJBT2pCLE9BQU87c0JBQXBDLFlBQVk7dUJBQUMsT0FBTztnQkFlVixPQUFPO3NCQURqQixXQUFXO3VCQUFDLG1DQUFtQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQWZ0ZXJWaWV3SW5pdCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkLFxuICAgIERlc3Ryb3lSZWYsXG4gICAgSG9zdEJpbmRpbmcsXG4gICAgaW5qZWN0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIE5nTW9kZWwsIE5nTW9kZWxHcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IG1lcmdlV2l0aCwgb2YsIHN3aXRjaE1hcCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgRm9ybURpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL2RpcmVjdGl2ZXMvZm9ybS5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ1tzYy1jb250cm9sLXdyYXBwZXJdJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jb250cm9sLXdyYXBwZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2NvbnRyb2wtd3JhcHBlci5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIENvbnRyb2xXcmFwcGVyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBjZFJlZiA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG4gICAgcHJpdmF0ZSByZWFkb25seSBmb3JtRGlyZWN0aXZlID0gaW5qZWN0KEZvcm1EaXJlY3RpdmUpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcblxuICAgIEBDb250ZW50Q2hpbGQoTmdNb2RlbCkgcHVibGljIG5nTW9kZWw/OiBOZ01vZGVsOyAvLyBPcHRpb25hbCBuZ01vZGVsXG4gICAgcHVibGljIHJlYWRvbmx5IG5nTW9kZWxHcm91cDogTmdNb2RlbEdyb3VwIHwgbnVsbCA9IGluamVjdChOZ01vZGVsR3JvdXAsIHtcbiAgICAgICAgb3B0aW9uYWw6IHRydWUsXG4gICAgICAgIHNlbGY6IHRydWUsXG4gICAgfSk7XG5cblxuICAgIC8vIENhY2hlIHRoZSBwcmV2aW91cyBlcnJvciB0byBhdm9pZCAnZmxpY2tlcmluZydcbiAgICBwcml2YXRlIHByZXZpb3VzRXJyb3I/OiBzdHJpbmdbXTtcblxuICAgIHByaXZhdGUgZ2V0IGNvbnRyb2woKTogQWJzdHJhY3RDb250cm9sIHwgdW5kZWZpbmVkIHtcbiAgICAgICAgcmV0dXJuIHRoaXMubmdNb2RlbEdyb3VwID8gdGhpcy5uZ01vZGVsR3JvdXAuY29udHJvbCA6IHRoaXMubmdNb2RlbD8uY29udHJvbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNjLWNvbnRyb2wtd3JhcHBlci0taW52YWxpZCcpXG4gICAgcHVibGljIGdldCBpbnZhbGlkKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5jb250cm9sPy50b3VjaGVkICYmIHRoaXMuZXJyb3JzO1xuICAgIH1cblxuICAgIHB1YmxpYyBnZXQgZXJyb3JzKCk6IHN0cmluZ1tdIHwgdW5kZWZpbmVkIHtcbiAgICAgICAgaWYgKHRoaXMuY29udHJvbD8ucGVuZGluZykge1xuICAgICAgICAgICAgcmV0dXJuIHRoaXMucHJldmlvdXNFcnJvcjtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMucHJldmlvdXNFcnJvciA9IHRoaXMuY29udHJvbD8uZXJyb3JzPy5bJ2Vycm9ycyddO1xuICAgICAgICB9XG4gICAgICAgIHJldHVybiB0aGlzLmNvbnRyb2w/LmVycm9ycz8uWydlcnJvcnMnXTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICAvLyBXYWl0IHVudGlsIHRoZSBmb3JtIGlzIGlkbGVcbiAgICAgICAgLy8gVGhlbiwgbGlzdGVuIHRvIGFsbCBldmVudHMgb2YgdGhlIG5nTW9kZWxHcm91cCBvciBuZ01vZGVsXG4gICAgICAgIC8vIGFuZCBtYXJrIHRoZSBjb21wb25lbnQgYW5kIGl0cyBhbmNlc3RvcnMgYXMgZGlydHlcbiAgICAgICAgLy8gVGhpcyBhbGxvd3MgdXMgdG8gdXNlIHRoZSBPblB1c2ggQ2hhbmdlRGV0ZWN0aW9uIFN0cmF0ZWd5XG4gICAgICAgIHRoaXMuZm9ybURpcmVjdGl2ZS5pZGxlJFxuICAgICAgICAgICAgLnBpcGUoXG4gICAgICAgICAgICAgICAgc3dpdGNoTWFwKCgpID0+IHRoaXMubmdNb2RlbEdyb3VwPy5jb250cm9sPy5ldmVudHMgfHwgb2YobnVsbCkpLFxuICAgICAgICAgICAgICAgIG1lcmdlV2l0aCh0aGlzLmNvbnRyb2w/LmV2ZW50cyB8fCBvZihudWxsKSksXG4gICAgICAgICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZilcbiAgICAgICAgICAgIClcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuY2RSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgICAgICAgICB9KTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2MtY29udHJvbC13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJzYy1jb250cm9sLXdyYXBwZXJfX2NvbnRlbnRcIj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwic2MtY29udHJvbC13cmFwcGVyX19lcnJvcnNcIj5cbiAgICA8dWwgW2hpZGRlbl09XCIhaW52YWxpZFwiPlxuICAgICAgQGZvciAoZXJyb3Igb2YgZXJyb3JzOyB0cmFjayBlcnJvcikge1xuICAgICAgICA8bGk+e3sgZXJyb3IgfX08L2xpPlxuICAgICAgfVxuICAgIDwvdWw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/constants.mjs

@@ -0,0 +1,2 @@
+export const ROOT_FORM = 'rootForm';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZlc3QtZm9ybXMvc3JjL2xpYi9jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLFVBQVUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBST09UX0ZPUk0gPSAncm9vdEZvcm0nOyJdfQ==