@dereekb/dbx-form 8.7.3 → 8.7.6

package/fesm2020/dereekb-dbx-form.mjs

@@ -10,7 +10,7 @@ import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponent
 import * as i1$1 from '@dereekb/dbx-web';
 import { DbxActionTransitionSafetyDirective, DbxTextModule, DbxLoadingModule, DbxFlexLayoutModule, DbxSectionLayoutModule, DbxRouterAnchorModule, AbstractDbxSelectionListWrapperDirective, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, AbstractDbxSelectionListViewDirective, addConfigToValueListItems, provideDbxListView, AbstractDbxValueListViewItemComponent, DbxButtonModule, DbxListLayoutModule, mapCompactModeObs, DbxBarLayoutModule } from '@dereekb/dbx-web';
 import { isPast, addSeconds, isSameMinute, startOfDay, isSameDay, addMinutes } from 'date-fns';
-import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay, startWith, debounceTime, Subject, skipWhile, interval, tap, merge, throttleTime, scan } from 'rxjs';
+import { BehaviorSubject, switchMap, first, exhaustMap, of, catchError, delay, filter, combineLatest, map, distinctUntilChanged, mergeMap, shareReplay, startWith, debounceTime, Subject, skipWhile, interval, tap, merge, throttleTime, scan, timer } from 'rxjs';
 import { LockSet, SubscriptionObject, asObservable, loadingStateHasFinishedLoading, switchMapMaybeObs, filterMaybe, switchMapMaybeDefault, SimpleLoadingContext, startWithBeginLoading, mapLoadingStateResults, successResult, ListLoadingStateContextInstance, isListLoadingStateEmpty, LoadingStateContextInstance, skipFirstMaybe, asyncPusherCache, scanCount } from '@dereekb/rxjs';
 import * as i1$4 from '@ngx-formly/core';
 import { FieldType, FieldWrapper, FormlyModule, FieldArrayType } from '@ngx-formly/core';
@@ -159,7 +159,8 @@ class DbxActionFormDirective {
             return this.form.getValue().pipe(first(), exhaustMap((value) => {
                 // Use both changes count and whether or not something was in the past to guage whether or not the item has been touched.
                 // Angular Form's untouched is whether or not focus has been lost but we can still receive value updates.
-                // More than a certain amount of updates implies that it is being typed into.
+                // More than a certain amount of updates implies that it is being typed into/used.
+                // 3 changes and 2 seconds are arbitrary values derived from guesses about any slow/late changes that may come from external directives for setup.
                 const isProbablyTouched = !event.untouched || ((event.changesCount ?? 0) > 3 && isPast(addSeconds(event.lastResetAt ?? new Date(), 2)));
                 let validatorObs;
                 const initialIsValidCheck = event.isComplete;
@@ -601,7 +602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormInfoWrapperComponent extends FieldWrapper {
     get infoWrapper() {
-        return this.props.infoWrapper;
+        return this.props;
     }
     onInfoClick() {
         this.infoWrapper.onInfoClick();
@@ -640,10 +641,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSectionWrapperComponent extends FieldWrapper {
     get header() {
-        return this.props.sectionWrapper?.header;
+        return this.props.header;
     }
     get hint() {
-        return this.props.sectionWrapper?.hint;
+        return this.props.hint;
     }
 }
 DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -665,13 +666,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormFlexWrapperComponent extends FieldWrapper {
     get flexWrapper() {
-        return this.props.flexWrapper;
+        return this.props;
     }
     get breakpoint() {
-        return this.flexWrapper?.breakpoint;
+        return this.flexWrapper.breakpoint;
     }
     get relative() {
-        return this.flexWrapper?.relative ?? false;
+        return this.flexWrapper.relative ?? false;
     }
 }
 DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -693,10 +694,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get header() {
-        return this.props.subsectionWrapper?.header;
+        return this.props.header;
     }
     get hint() {
-        return this.props.subsectionWrapper?.hint;
+        return this.props.hint;
     }
 }
 DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -730,19 +731,19 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
             else {
                 return this.hasValue$;
             }
-        }), shareReplay(1));
+        }), distinctUntilChanged(), shareReplay(1));
         this.hasValue$ = this.formControl$.pipe(switchMap((x) => x.valueChanges.pipe(startWith(x.value), map((value) => {
             return this.hasValueFn(value);
         }), shareReplay(1))));
     }
     get expandableSection() {
-        return this.props.expandWrapper;
+        return this.props;
     }
     get hasValueFn() {
-        return this.expandableSection?.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
+        return this.expandableSection.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
     }
     get expandLabel() {
-        let label = this.expandableSection?.expandLabel ?? this.field?.props?.label;
+        let label = this.expandableSection.expandLabel ?? this.field.props?.label;
         if (label == null) {
             const firstFieldGroup = this.field.fieldGroup?.[0];
             if (firstFieldGroup) {
@@ -773,7 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  */
 class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
     get buttonType() {
-        return this.expandableSection?.buttonType ?? 'button';
+        return this.expandableSection.buttonType ?? 'button';
     }
 }
 DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -783,7 +784,7 @@ DbxFormExpandWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
         <ng-container #fieldComponent></ng-container>
       </ng-container>
       <ng-container *ngSwitchCase="false">
-        <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+        <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
       </ng-container>
     </ng-container>
   `, isInline: true, directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i5.AsyncPipe } });
@@ -796,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         <ng-container #fieldComponent></ng-container>
       </ng-container>
       <ng-container *ngSwitchCase="false">
-        <span class="dbx-form-expandable-section-button" (click)="open()">{{ expandLabel }}</span>
+        <span class="dbx-form-expand-wrapper-button" (click)="open()">{{ expandLabel }}</span>
       </ng-container>
     </ng-container>
   `
@@ -1009,10 +1010,8 @@ function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSi
         fieldGroupClassName: 'dbx-flex-group',
         // fieldGroupClassName: 'field-layout-group',
         props: {
-            flexWrapper: {
-                breakpoint,
-                relative
-            }
+            breakpoint,
+            relative
         },
         fieldGroup: fieldConfigs.map((inputConfig) => {
             const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig)
@@ -2664,7 +2663,8 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             return;
         }
         this.remove(currentIndex);
-        this.add(targetIndex, targetValue);
+        this.add(targetIndex, targetValue, { markAsDirty: true });
+        this.formControl.markAsTouched();
     }
     drop(event) {
         this.swapIndexes(event.previousIndex, event.currentIndex);
@@ -2797,7 +2797,7 @@ function repeatArrayField(config) {
             removeText
         }),
         fieldArray: {
-            fieldGroup: repeatFieldGroup
+            fieldGroup: asArray(repeatFieldGroup)
         }
     });
 }
@@ -3451,7 +3451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }] });
 
 function textField(config) {
-    const { key, pattern, minLength, maxLength = 1000, inputType: type = 'text' } = config;
+    const { key, pattern, minLength, maxLength, inputType: type = 'text' } = config;
     return formlyField({
         key,
         type: 'input',
@@ -3464,14 +3464,15 @@ function textField(config) {
     });
 }
 function textAreaField(config) {
-    const { key, rows = 3, minLength, maxLength = 1000 } = config;
+    const { key, rows = 3, pattern, minLength, maxLength } = config;
     return formlyField({
         key,
         type: 'textarea',
         ...propsForFieldConfig(config, {
             rows,
             minLength,
-            maxLength
+            maxLength,
+            pattern
         })
     });
 }
@@ -4079,23 +4080,39 @@ class DbxFormlyFormComponent extends AbstractSubscriptionDirective {
             changesSinceLastResetCount: 0,
             isFormValid: false,
             isFormDisabled: false
-        }), map(({ changesSinceLastResetCount, isFormValid, isFormDisabled }) => {
-            const isReset = changesSinceLastResetCount <= 1; // first emission after reset is the first value.
-            const complete = isFormValid;
-            const nextState = {
-                isComplete: complete,
-                state: isReset ? DbxFormState.RESET : DbxFormState.USED,
-                status: this.form.status,
-                untouched: this.form.untouched,
-                pristine: this.form.pristine,
-                changesCount: changesSinceLastResetCount,
-                lastResetAt,
-                disabled: this.disabled,
-                isDisabled: isFormDisabled
+        }), switchMap(({ changesSinceLastResetCount, isFormValid, isFormDisabled }) => {
+            const nextState = () => {
+                const isReset = changesSinceLastResetCount <= 1; // first emission after reset is the first value.
+                const complete = isFormValid;
+                const nextState = {
+                    isComplete: complete,
+                    state: isReset ? DbxFormState.RESET : DbxFormState.USED,
+                    status: this.form.status,
+                    untouched: this.form.untouched,
+                    pristine: this.form.pristine,
+                    changesCount: changesSinceLastResetCount,
+                    lastResetAt,
+                    disabled: this.disabled,
+                    isDisabled: isFormDisabled
+                };
+                return nextState;
             };
-            // console.log('Change: ', nextState);
-            return nextState;
-        }))), shareReplay(1));
+            const state = nextState();
+            if (isFormValid && this.form.untouched) {
+                return timer(150, 200).pipe(
+                // every 200 ms check if the form is now marked touched, then push a new state
+                filter(() => this.form.touched), map(() => nextState()), 
+                // only push the new state once
+                first(), 
+                // send the first value immediately
+                startWith(state));
+            }
+            else {
+                return of(state);
+            }
+        })
+        // tapLog('Change: ')
+        )), shareReplay(1));
     }
     ngOnInit() {
         this.context.setDelegate(this);