feat: added dbxFormWorkingWrapperComponent

- bumped ngx-formly version

package.json

@@ -33,9 +33,9 @@
     "@ngrx/effects": "^13.0.2",
     "@ngrx/entity": "^13.0.2",
     "@ngrx/store": "^13.0.2",
-    "@ngx-formly/core": "6.0.0-next.8",
-    "@ngx-formly/material": "6.0.0-next.8",
-    "@ngx-formly/schematics": "6.0.0-next.8",
+    "@ngx-formly/core": "6.0.0-next.9",
+    "@ngx-formly/material": "6.0.0-next.9",
+    "@ngx-formly/schematics": "6.0.0-next.9",
     "@uirouter/angular": "^9.1.0",
     "@uirouter/core": "^6.0.8",
     "@uirouter/rx": "^1.0.0",

packages/dbx-form/src/lib/formly/field/selection/pickable/pickable.field.directive.ts

@@ -404,8 +404,7 @@ export class AbstractDbxPickableItemFieldDirective<T> extends FieldType<Pickable
     );
   }
 
-  override ngOnInit(): void {
-    super.ngOnInit();
+  ngOnInit(): void {
     this._formControlObs.next(this.formControl);
 
     // Focus after finished loading for the first time.

packages/dbx-form/src/lib/formly/field/selection/searchable/searchable.field.directive.ts

@@ -289,8 +289,7 @@ export abstract class AbstractDbxSearchableValueFieldDirective<T, C extends Sear
     super();
   }
 
-  override ngOnInit(): void {
-    super.ngOnInit();
+  ngOnInit(): void {
     this._formControlObs.next(this.formControl);
 
     if (this.searchableField.textInputValidator) {

packages/dbx-form/src/lib/formly/field/texteditor/texteditor.field.component.ts

@@ -61,9 +61,7 @@ export class DbxTextEditorFieldComponent<T extends TextEditorComponentFieldConfi
     return this.to.description;
   }
 
-  override ngOnInit(): void {
-    super.ngOnInit();
-
+  ngOnInit(): void {
     this._editor = new Editor({});
 
     // Watch for value changes every second and update the pristine level.

packages/dbx-form/src/lib/formly/field/value/date/datetime.field.component.ts

@@ -250,8 +250,7 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
     super();
   }
 
-  override ngOnInit(): void {
-    super.ngOnInit();
+  ngOnInit(): void {
     this._formControlObs.next(this.formControl);
     this._config.next(this.dateTimeField.getConfigObs?.());
 

packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts

@@ -1,7 +1,7 @@
 import { FormlyFieldConfig } from "@ngx-formly/core";
 import { Validators, AbstractControl } from '@angular/forms';
 import { TextFieldConfig, textField } from "./text.field";
-import { LabeledFieldConfig, DescriptionFieldConfig, formlyField } from "../../field";
+import { LabeledFieldConfig, DescriptionFieldConfig } from "../../field";
 
 export const PHONE_LABEL_MAX_LENGTH = 100;
 
@@ -49,8 +49,6 @@ export function emailField(config: EmailFieldConfig = {}): FormlyFieldConfig {
   return emailFieldConfig;
 }
 
-
-
 export function cityField({ key = 'city', required = false }: Partial<TextFieldConfig> = {}): FormlyFieldConfig {
   return textField({
     key,

packages/dbx-form/src/lib/formly/field/wrapper/form.wrapper.module.ts

@@ -12,13 +12,15 @@ import { DbxFormExpandWrapperComponent } from './expandable.wrapper.component';
 import { AutoTouchFieldWrapperComponent } from './autotouch.wrapper.component';
 import { DbxFormToggleWrapperComponent } from './toggle.wrapper.component';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { DbxSectionLayoutModule, DbxTextModule, DbxFlexLayoutModule } from '@dereekb/dbx-web';
+import { DbxSectionLayoutModule, DbxTextModule, DbxFlexLayoutModule, DbxLoadingModule } from '@dereekb/dbx-web';
 import { DbxFormStyleWrapperComponent } from './style.wrapper.component';
+import { DbxFormWorkingWrapperComponent } from './working.wrapper.component';
 
 @NgModule({
   imports: [
     CommonModule,
     DbxTextModule,
+    DbxLoadingModule,
     DbxFlexLayoutModule,
     DbxSectionLayoutModule,
     MatButtonModule,
@@ -34,7 +36,8 @@ import { DbxFormStyleWrapperComponent } from './style.wrapper.component';
         { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
         { name: 'info', component: DbxFormInfoWrapperComponent },
         { name: 'flex', component: DbxFormFlexWrapperComponent },
-        { name: 'style', component: DbxFormStyleWrapperComponent }
+        { name: 'style', component: DbxFormStyleWrapperComponent },
+        { name: 'working', component: DbxFormWorkingWrapperComponent }
       ]
     })
   ],
@@ -46,7 +49,8 @@ import { DbxFormStyleWrapperComponent } from './style.wrapper.component';
     DbxFormExpandWrapperComponent,
     DbxFormToggleWrapperComponent,
     DbxFormFlexWrapperComponent,
-    DbxFormStyleWrapperComponent
+    DbxFormStyleWrapperComponent,
+    DbxFormWorkingWrapperComponent
   ],
   exports: []
 })

packages/dbx-form/src/lib/formly/field/wrapper/index.ts

@@ -7,4 +7,5 @@ export * from './info.wrapper.component';
 export * from './section.wrapper.component';
 export * from './subsection.wrapper.component';
 export * from './toggle.wrapper.component';
+export * from './working.wrapper.component';
 export * from './wrapper';

packages/dbx-form/src/lib/formly/field/wrapper/working.wrapper.component.ts

@@ -0,0 +1,41 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { SimpleLoadingContext, SubscriptionObject } from '@dereekb/rxjs';
+import { Component } from '@angular/core';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+
+export interface DbxFormWorkingWrapperConfig { }
+
+export interface DbxFormWorkingWrapperFormlyConfig extends FormlyFieldConfig {
+  styleWrapper: DbxFormWorkingWrapperConfig;
+}
+
+/**
+ * Adds a loading bar to help signify asynchronos work is occuring.
+ * 
+ * By default shows loading during asynchronous validation of a field (FormControl status is "PENDING")
+ */
+@Component({
+  template: `
+    <div class="dbx-form-working-wrapper">
+      <ng-container #fieldComponent></ng-container>
+      <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
+    </div>
+  `
+})
+export class DbxFormWorkingWrapperComponent extends FieldWrapper<DbxFormWorkingWrapperFormlyConfig> implements OnInit, OnDestroy {
+
+  readonly sub = new SubscriptionObject();
+  readonly workingContext = new SimpleLoadingContext(false);
+
+  ngOnInit(): void {
+    this.sub.subscription = this.formControl?.statusChanges.subscribe({
+      next: (x) => this.workingContext.setLoading(x === 'PENDING')
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.workingContext.destroy();
+    this.sub.destroy();
+  }
+
+}

packages/dbx-form/src/lib/formly/field/wrapper/wrapper.ts

@@ -7,6 +7,7 @@ import { DbxFormSubsectionConfig } from './subsection.wrapper.component';
 import { DbxFormInfoConfig } from './info.wrapper.component';
 import { DbxFormExpandWrapperConfig } from './expandable.wrapper.component';
 import { DbxFlexSize } from '@dereekb/dbx-web';
+import { DbxFormWorkingWrapperConfig } from './working.wrapper.component';
 
 export const EXPANDABLE_WRAPPER_KEY = 'expandable';
 export const TOGGLE_WRAPPER_KEY = 'toggle';
@@ -15,6 +16,7 @@ export const SUBSECTION_WRAPPER_KEY = 'subsection';
 export const INFO_WRAPPER_KEY = 'info';
 export const FLEX_WRAPPER_KEY = 'flex';
 export const STYLE_WRAPPER_KEY = 'style';
+export const WORKING_WRAPPER_KEY = 'working';
 
 export function addWrapperToFormlyFieldConfig<T extends object>(fieldConfig: FormlyFieldConfig, wrapperKey: string, wrapperTemplateOptionsConfig: T): FormlyFieldConfig {
   fieldConfig.templateOptions = {
@@ -65,6 +67,12 @@ export function styleWrapper(fieldConfig: FormlyFieldConfig, styleWrapper: DbxFo
   });
 }
 
+export function workingWrapper(fieldConfig: FormlyFieldConfig, workingWrapper: DbxFormWorkingWrapperConfig): FormlyFieldConfig {
+  return addWrapperToFormlyFieldConfig(fieldConfig, WORKING_WRAPPER_KEY, {
+    workingWrapper
+  });
+}
+
 export interface DbxFlexLayoutWrapperGroupFieldConfig {
   field: FormlyFieldConfig;
   /**