@dereekb/dbx-form 8.7.2 → 8.7.5

package/fesm2015/dereekb-dbx-form.mjs

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 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 i2 from '@dereekb/dbx-core';
 import { AbstractSubscriptionDirective, safeDetectChanges, DbxInjectionComponentModule, DbxDatePipeModule, mergeDbxInjectionComponentConfigs, tapDetectChanges } from '@dereekb/dbx-core';
@@ -160,7 +160,8 @@ class DbxActionFormDirective {
                 var _a, _b;
                 // 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 || (((_a = event.changesCount) !== null && _a !== void 0 ? _a : 0) > 3 && isPast(addSeconds((_b = event.lastResetAt) !== null && _b !== void 0 ? _b : new Date(), 2)));
                 let validatorObs;
                 const initialIsValidCheck = event.isComplete;
@@ -617,7 +618,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();
@@ -656,12 +657,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSectionWrapperComponent extends FieldWrapper {
     get header() {
-        var _a;
-        return (_a = this.props.sectionWrapper) === null || _a === void 0 ? void 0 : _a.header;
+        return this.props.header;
     }
     get hint() {
-        var _a;
-        return (_a = this.props.sectionWrapper) === null || _a === void 0 ? void 0 : _a.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 });
@@ -683,15 +682,14 @@ 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() {
-        var _a;
-        return (_a = this.flexWrapper) === null || _a === void 0 ? void 0 : _a.breakpoint;
+        return this.flexWrapper.breakpoint;
     }
     get relative() {
-        var _a, _b;
-        return (_b = (_a = this.flexWrapper) === null || _a === void 0 ? void 0 : _a.relative) !== null && _b !== void 0 ? _b : false;
+        var _a;
+        return (_a = this.flexWrapper.relative) !== null && _a !== void 0 ? _a : false;
     }
 }
 DbxFormFlexWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -713,12 +711,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get header() {
-        var _a;
-        return (_a = this.props.subsectionWrapper) === null || _a === void 0 ? void 0 : _a.header;
+        return this.props.header;
     }
     get hint() {
-        var _a;
-        return (_a = this.props.subsectionWrapper) === null || _a === void 0 ? void 0 : _a.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 });
@@ -752,25 +748,25 @@ 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() {
-        var _a, _b;
-        return (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.hasValueFn) !== null && _b !== void 0 ? _b : DEFAULT_HAS_VALUE_FN;
+        var _a;
+        return (_a = this.expandableSection.hasValueFn) !== null && _a !== void 0 ? _a : DEFAULT_HAS_VALUE_FN;
     }
     get expandLabel() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        let label = (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.expandLabel) !== null && _b !== void 0 ? _b : (_d = (_c = this.field) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.label;
+        var _a, _b, _c, _d, _e;
+        let label = (_a = this.expandableSection.expandLabel) !== null && _a !== void 0 ? _a : (_b = this.field.props) === null || _b === void 0 ? void 0 : _b.label;
         if (label == null) {
-            const firstFieldGroup = (_e = this.field.fieldGroup) === null || _e === void 0 ? void 0 : _e[0];
+            const firstFieldGroup = (_c = this.field.fieldGroup) === null || _c === void 0 ? void 0 : _c[0];
             if (firstFieldGroup) {
-                label = (_g = (_f = firstFieldGroup.props) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : firstFieldGroup.key;
+                label = (_e = (_d = firstFieldGroup.props) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : firstFieldGroup.key;
             }
         }
         return label;
@@ -797,8 +793,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  */
 class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapperDirective {
     get buttonType() {
-        var _a, _b;
-        return (_b = (_a = this.expandableSection) === null || _a === void 0 ? void 0 : _a.buttonType) !== null && _b !== void 0 ? _b : 'button';
+        var _a;
+        return (_a = this.expandableSection.buttonType) !== null && _a !== void 0 ? _a : 'button';
     }
 }
 DbxFormExpandWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -808,7 +804,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 } });
@@ -821,7 +817,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>
   `
@@ -1033,10 +1029,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)
@@ -2757,7 +2751,7 @@ function repeatArrayField(config) {
         addText,
         removeText
     })), { fieldArray: {
-            fieldGroup: repeatFieldGroup
+            fieldGroup: asArray(repeatFieldGroup)
         } }));
 }
 
@@ -3970,23 +3964,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);