@dereekb/dbx-form 7.1.0 → 7.4.0

package/fesm2020/dereekb-dbx-form.mjs

@@ -26,7 +26,7 @@ import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$1 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjects, filterFromPOJO, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, dateFromLogicalDate, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
 import * as i1$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/flex-layout/extended';
@@ -466,16 +466,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }] });
 
 function minLengthValidationMessage(err, field) {
-    return `Should have atleast ${field.templateOptions.minLength} characters`;
+    return `Should have atleast ${field.props.minLength} characters`;
 }
 function maxLengthValidationMessage(err, field) {
-    return `This value should be less than ${field.templateOptions.maxLength} characters`;
+    return `This value should be less than ${field.props.maxLength} characters`;
 }
 function minValidationMessage(err, field) {
-    return `This value should be more than ${field.templateOptions.min}`;
+    return `This value should be more than ${field.props.min}`;
 }
 function maxValidationMessage(err, field) {
-    return `This value should be less than ${field.templateOptions.max}`;
+    return `This value should be less than ${field.props.max}`;
 }
 const REQUIRED_VALIDATION_MESSAGE = { name: 'required', message: 'This field is required' };
 const MIN_LENGTH_VALIDATION_MESSAGE = { name: 'minLength', message: minLengthValidationMessage };
@@ -537,16 +537,16 @@ class DbxChecklistItemFieldComponent extends FieldType {
         return this.key;
     }
     get label() {
-        return this.field.templateOptions?.label;
+        return this.props.label;
     }
     get description() {
-        return this.field.templateOptions?.description;
+        return this.props.description;
     }
     get required() {
-        return this.field.templateOptions?.required;
+        return this.props.required;
     }
     get checklistField() {
-        return this.field.checklistField;
+        return this.props;
     }
     get errors() {
         return this.field.formControl?.errors;
@@ -601,7 +601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormInfoWrapperComponent extends FieldWrapper {
     get infoWrapper() {
-        return this.to.infoWrapper;
+        return this.props.infoWrapper;
     }
     onInfoClick() {
         this.infoWrapper.onInfoClick();
@@ -640,10 +640,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSectionWrapperComponent extends FieldWrapper {
     get header() {
-        return this.to.sectionWrapper?.header;
+        return this.props.sectionWrapper?.header;
     }
     get hint() {
-        return this.to.sectionWrapper?.hint;
+        return this.props.sectionWrapper?.hint;
     }
 }
 DbxFormSectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -665,7 +665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormFlexWrapperComponent extends FieldWrapper {
     get flexWrapper() {
-        return this.to.flexWrapper;
+        return this.props.flexWrapper;
     }
     get breakpoint() {
         return this.flexWrapper?.breakpoint;
@@ -693,10 +693,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get header() {
-        return this.to.subsectionWrapper?.header;
+        return this.props.subsectionWrapper?.header;
     }
     get hint() {
-        return this.to.subsectionWrapper?.hint;
+        return this.props.subsectionWrapper?.hint;
     }
 }
 DbxFormSubsectionWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -736,17 +736,17 @@ class AbstractFormExpandableSectionWrapperDirective extends FieldWrapper {
         }), shareReplay(1))));
     }
     get expandableSection() {
-        return this.to.expandWrapper;
+        return this.props.expandWrapper;
     }
     get hasValueFn() {
         return this.expandableSection?.hasValueFn ?? DEFAULT_HAS_VALUE_FN;
     }
     get expandLabel() {
-        let label = this.expandableSection?.expandLabel ?? this.field?.templateOptions?.label;
+        let label = this.expandableSection?.expandLabel ?? this.field?.props?.label;
         if (label == null) {
             const firstFieldGroup = this.field.fieldGroup?.[0];
             if (firstFieldGroup) {
-                label = firstFieldGroup.templateOptions?.label ?? firstFieldGroup.key;
+                label = firstFieldGroup.props?.label ?? firstFieldGroup.key;
             }
         }
         return label;
@@ -883,11 +883,8 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
         this._style = new BehaviorSubject(undefined);
         this.style$ = this._style.pipe(switchMapMaybeDefault(''), shareReplay(1));
     }
-    get styleWrapper() {
-        return this.field.styleWrapper;
-    }
     get styleGetter() {
-        return this.styleWrapper.style;
+        return this.props.style;
     }
     ngOnInit() {
         this._style.next(asObservable(this.styleGetter));
@@ -953,6 +950,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+const AUTO_TOUCH_WRAPPER_KEY = 'autotouch';
+const EXPANDABLE_WRAPPER_KEY = 'expandable';
+const TOGGLE_WRAPPER_KEY = 'toggle';
+const SECTION_WRAPPER_KEY = 'section';
+const SUBSECTION_WRAPPER_KEY = 'subsection';
+const INFO_WRAPPER_KEY = 'info';
+const FLEX_WRAPPER_KEY = 'flex';
+const STYLE_WRAPPER_KEY = 'style';
+const WORKING_WRAPPER_KEY = 'working';
+function addWrapperToFormlyFieldConfig(fieldConfig, wrapperKey, wrapperProps) {
+    // ??? can probably remove?
+    fieldConfig.props = {
+        ...fieldConfig.props,
+        ...wrapperProps
+    };
+    return {
+        wrappers: [wrapperKey],
+        props: wrapperProps,
+        fieldGroup: [fieldConfig]
+    };
+}
+function autoTouchWrapper(fieldConfig, autoTouchWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, AUTO_TOUCH_WRAPPER_KEY, autoTouchWrapper);
+}
+function expandWrapper(fieldConfig, expandWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, EXPANDABLE_WRAPPER_KEY, expandWrapper);
+}
+function toggleWrapper(fieldConfig, toggleWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, TOGGLE_WRAPPER_KEY, toggleWrapper);
+}
+function sectionWrapper(fieldConfig, sectionWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, SECTION_WRAPPER_KEY, sectionWrapper);
+}
+function subsectionWrapper(fieldConfig, subsectionWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, SUBSECTION_WRAPPER_KEY, subsectionWrapper);
+}
+function infoWrapper(fieldConfig, infoWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, INFO_WRAPPER_KEY, infoWrapper);
+}
+function styleWrapper(fieldConfig, styleWrapper) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, STYLE_WRAPPER_KEY, styleWrapper);
+}
+function workingWrapper(fieldConfig, workingWrapper = {}) {
+    return addWrapperToFormlyFieldConfig(fieldConfig, WORKING_WRAPPER_KEY, workingWrapper);
+}
+function checkIsFieldFlexLayoutGroupFieldConfig(input) {
+    if (input.field != null) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSize = 2 } = {}) {
+    return {
+        wrappers: ['flex'],
+        fieldGroupClassName: 'dbx-flex-group',
+        // fieldGroupClassName: 'field-layout-group',
+        props: {
+            flexWrapper: {
+                breakpoint,
+                relative
+            }
+        },
+        fieldGroup: fieldConfigs.map((inputConfig) => {
+            const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig)
+                ? inputConfig
+                : {
+                    field: inputConfig
+                };
+            const { field, size = defaultSize } = fieldConfig;
+            const className = `dbx-flex-${size}`;
+            return {
+                ...field,
+                className
+            };
+        })
+    };
+}
+
 class DbxFormFormlyWrapperModule {
 }
 DbxFormFormlyWrapperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -977,15 +1054,15 @@ DbxFormFormlyWrapperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             FlexLayoutModule,
             FormlyModule.forChild({
                 wrappers: [
-                    { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
-                    { name: 'expandable', component: DbxFormExpandWrapperComponent },
-                    { name: 'toggle', component: DbxFormToggleWrapperComponent },
-                    { name: 'section', component: DbxFormSectionWrapperComponent },
-                    { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
-                    { name: 'info', component: DbxFormInfoWrapperComponent },
-                    { name: 'flex', component: DbxFormFlexWrapperComponent },
-                    { name: 'style', component: DbxFormStyleWrapperComponent },
-                    { name: 'working', component: DbxFormWorkingWrapperComponent }
+                    { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
+                    { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
+                    { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
+                    { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
+                    { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
+                    { name: INFO_WRAPPER_KEY, component: DbxFormInfoWrapperComponent },
+                    { name: FLEX_WRAPPER_KEY, component: DbxFormFlexWrapperComponent },
+                    { name: STYLE_WRAPPER_KEY, component: DbxFormStyleWrapperComponent },
+                    { name: WORKING_WRAPPER_KEY, component: DbxFormWorkingWrapperComponent }
                 ]
             })
         ]] });
@@ -1004,15 +1081,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         FlexLayoutModule,
                         FormlyModule.forChild({
                             wrappers: [
-                                { name: 'autotouch', component: AutoTouchFieldWrapperComponent },
-                                { name: 'expandable', component: DbxFormExpandWrapperComponent },
-                                { name: 'toggle', component: DbxFormToggleWrapperComponent },
-                                { name: 'section', component: DbxFormSectionWrapperComponent },
-                                { name: 'subsection', component: DbxFormSubsectionWrapperComponent },
-                                { name: 'info', component: DbxFormInfoWrapperComponent },
-                                { name: 'flex', component: DbxFormFlexWrapperComponent },
-                                { name: 'style', component: DbxFormStyleWrapperComponent },
-                                { name: 'working', component: DbxFormWorkingWrapperComponent }
+                                { name: AUTO_TOUCH_WRAPPER_KEY, component: AutoTouchFieldWrapperComponent },
+                                { name: EXPANDABLE_WRAPPER_KEY, component: DbxFormExpandWrapperComponent },
+                                { name: TOGGLE_WRAPPER_KEY, component: DbxFormToggleWrapperComponent },
+                                { name: SECTION_WRAPPER_KEY, component: DbxFormSectionWrapperComponent },
+                                { name: SUBSECTION_WRAPPER_KEY, component: DbxFormSubsectionWrapperComponent },
+                                { name: INFO_WRAPPER_KEY, component: DbxFormInfoWrapperComponent },
+                                { name: FLEX_WRAPPER_KEY, component: DbxFormFlexWrapperComponent },
+                                { name: STYLE_WRAPPER_KEY, component: DbxFormStyleWrapperComponent },
+                                { name: WORKING_WRAPPER_KEY, component: DbxFormWorkingWrapperComponent }
                             ]
                         })
                     ],
@@ -1085,16 +1162,22 @@ function formlyField(fieldConfig) {
     }
     return fieldConfig;
 }
-function templateOptionsForFieldConfig(fieldConfig, override) {
-    const templateOptions = templateOptionsValueForFieldConfig(fieldConfig, override);
+function propsForFieldConfig(fieldConfig, override) {
+    const props = propsValueForFieldConfig(fieldConfig, override);
     return {
-        templateOptions
+        props
     };
 }
-function templateOptionsValueForFieldConfig(fieldConfig, override) {
-    const { label, placeholder, required, readonly, description, autocomplete } = mergeObjects([fieldConfig, override], {
-        keysFilter: ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete']
-    });
+const partialPotentialFieldConfigKeys = ['label', 'placeholder', 'required', 'readonly', 'description', 'autocomplete'];
+const partialPotentialFieldConfigKeysFilter = {
+    keysFilter: partialPotentialFieldConfigKeys
+};
+const mergePropsValueObjects = mergeObjectsFunction(partialPotentialFieldConfigKeysFilter);
+const filterPartialPotentialFieldConfigValuesFromObject = filterFromPOJOFunction({
+    filter: partialPotentialFieldConfigKeysFilter
+});
+function propsValueForFieldConfig(fieldConfig, override) {
+    const { label, placeholder, required, readonly, description, autocomplete } = mergePropsValueObjects([fieldConfig, override]);
     const attributes = mergeObjects([fieldConfig.attributes, override?.attributes]);
     const result = filterFromPOJO({
         ...override,
@@ -1135,11 +1218,10 @@ function checklistItemField(config) {
     const fieldConfig = formlyField({
         key,
         type: 'checklistitem',
-        checklistField: {
+        ...propsForFieldConfig(config, {
             displayContentObs,
             componentClass
-        },
-        ...templateOptionsForFieldConfig(config)
+        })
     });
     return fieldConfig;
 }
@@ -1370,13 +1452,13 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         this.noItemsAvailable$ = this.filterItemsLoadingState$.pipe(isListLoadingStateEmpty(), distinctUntilChanged());
     }
     get readonly() {
-        return this.field.templateOptions?.readonly;
+        return this.props.readonly;
     }
     get isReadonlyOrDisabled() {
         return this.readonly || this.disabled;
     }
     get pickableField() {
-        return this.field.pickableField;
+        return this.props;
     }
     get multiSelect() {
         return this.pickableField.multiSelect ?? true;
@@ -1391,10 +1473,10 @@ class AbstractDbxPickableItemFieldDirective extends FieldType$1 {
         return this.field.name ?? camelCase(this.label ?? this.key);
     }
     get label() {
-        return this.field.templateOptions?.label;
+        return this.props.label;
     }
     get autocomplete() {
-        return (this.field.templateOptions?.attributes?.['autocomplete'] ?? this.key);
+        return (this.props.attributes?.['autocomplete'] ?? this.key);
     }
     get changeSelectionModeToViewOnDisabled() {
         return this.pickableField.changeSelectionModeToViewOnDisabled ?? false;
@@ -1750,10 +1832,10 @@ function pickableItemChipField(config) {
     return formlyField({
         key,
         type: 'pickablechipfield',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
+            ...config,
             autocomplete: false
-        }),
-        pickableField: config
+        })
     });
 }
 function pickableItemListField(config) {
@@ -1761,10 +1843,10 @@ function pickableItemListField(config) {
     return formlyField({
         key,
         type: 'pickablelistfield',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
+            ...config,
             autocomplete: false
-        }),
-        pickableField: config
+        })
     });
 }
 
@@ -1883,19 +1965,19 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
         return this.field.name ?? camelCase(this.label ?? this.key);
     }
     get label() {
-        return this.field.templateOptions?.label;
+        return this.props.label;
     }
     get readonly() {
-        return this.field.templateOptions?.readonly;
+        return this.props.readonly;
     }
     get searchableField() {
-        return this.field.searchableField;
+        return this.props;
     }
     get searchOnEmptyText() {
         return this.searchableField.searchOnEmptyText ?? false;
     }
     get autocomplete() {
-        return (this.field.templateOptions?.attributes?.['autocomplete'] ?? this.key);
+        return (this.props.attributes?.['autocomplete'] ?? this.key);
     }
     get hashForValue() {
         return this.searchableField.hashForValue ?? ((x) => x);
@@ -2183,11 +2265,11 @@ function searchableChipField(config) {
     return formlyField({
         key,
         type: 'searchablechipfield',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
+            ...config,
             placeholder: placeholder ?? 'Add...',
             autocomplete: false
-        }),
-        searchableField: config
+        })
     });
 }
 function searchableTextField(config) {
@@ -2195,10 +2277,10 @@ function searchableTextField(config) {
     return formlyField({
         key,
         type: 'searchabletextfield',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
+            ...config,
             autocomplete: false
-        }),
-        searchableField: config
+        })
     });
 }
 
@@ -2215,7 +2297,7 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
         this._clearInputSub = new SubscriptionObject();
     }
     get searchableField() {
-        return this.field.searchableField;
+        return this.props;
     }
     get showSelectedValue() {
         return this.searchableField.showSelectedValue ?? !this.allowStringValues; // Show the selected value only if string values are allowed.
@@ -2320,11 +2402,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 function chipTextField(config) {
     const convertStringValue = config.caseSensitive ? (x) => x : (x) => x?.toLowerCase();
-    return formlyField({
-        type: 'searchablechipfield',
+    return searchableChipField({
+        search: () => of([]),
+        ...config,
         allowStringValues: true,
         convertStringValue,
-        ...config,
         displayForValue: (values) => {
             return of(values.map((x) => ({ ...x, label: x.value })));
         }
@@ -2364,10 +2446,10 @@ class DbxTextEditorFieldComponent extends FieldType$1 {
         return this._editor;
     }
     get label() {
-        return this.field.templateOptions?.label;
+        return this.field.props?.label;
     }
     get description() {
-        return this.to.description;
+        return this.props.description;
     }
     ngOnInit() {
         this._editor = new Editor({});
@@ -2478,7 +2560,7 @@ function textEditorField(config) {
             // Set to trigger value update on blurs with the form. However, the value is set internally too.
             updateOn: 'blur'
         },
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
             minLength,
             maxLength
         })
@@ -2491,7 +2573,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
         return this.field.repeatArrayField;
     }
     get label() {
-        return this.field.templateOptions.label ?? this.field.key;
+        return this.field.props.label ?? this.field.key;
     }
     get addText() {
         return this.repeatArrayField.addText ?? 'Add';
@@ -2500,7 +2582,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
         return this.repeatArrayField.removeText ?? 'Remove';
     }
     get max() {
-        return this.field.templateOptions?.maxLength;
+        return this.field.props?.maxLength;
     }
     get count() {
         return this.field.fieldGroup?.length ?? 0;
@@ -2666,7 +2748,7 @@ function repeatArrayField(config) {
             addText,
             removeText
         },
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
             maxLength
         }),
         fieldArray: {
@@ -2696,7 +2778,7 @@ function toggleField(config) {
         type: 'toggle',
         wrappers: ['autotouch', 'form-field'],
         defaultValue: defaultValue ?? false,
-        ...templateOptionsForFieldConfig(config)
+        ...propsForFieldConfig(config)
     });
 }
 function checkboxField(config) {
@@ -2705,7 +2787,7 @@ function checkboxField(config) {
         key,
         type: 'checkbox',
         defaultValue: defaultValue ?? false,
-        ...templateOptionsForFieldConfig(config)
+        ...propsForFieldConfig(config)
     });
 }
 /*
@@ -2714,7 +2796,7 @@ export function acceptTermsField({ key = 'accept', label = 'Accept Terms', descr
   return {
     key,
     type: 'checkbox',
-    templateOptions: {
+    props: {
       label,
       description,
       pattern: 'true',
@@ -2822,7 +2904,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
     }
     get dateTimeField() {
-        return this.field.dateTimeField;
+        return this.field.props;
     }
     get timeOnly() {
         return this.dateTimeField.timeOnly;
@@ -2834,7 +2916,7 @@ class DbxDateTimeFieldComponent extends FieldType$1 {
         return this.timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED;
     }
     get description() {
-        return this.field.templateOptions?.description;
+        return this.field.props.description;
     }
     ngOnInit() {
         this._formControlObs.next(this.formControl);
@@ -3048,13 +3130,12 @@ function dateTimeField(config = {}) {
     const fieldConfig = formlyField({
         key,
         type: 'datetime',
-        dateTimeField: {
+        ...propsForFieldConfig(config, {
             timeMode: timeOnly ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
             fullDayFieldName,
             getConfigObs,
             timeOnly
-        },
-        ...templateOptionsForFieldConfig(config),
+        }),
         styleWrapper: {
             style: 'dbx-datetime-parent-form-field'
         }
@@ -3066,7 +3147,7 @@ function staticEnumField({ key, label = '', placeholder = '', description, multi
     const fieldConfig = formlyField({
         key,
         type: 'select',
-        templateOptions: {
+        props: {
             label,
             description,
             placeholder,
@@ -3097,14 +3178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 const DEFAULT_PREFERRED_COUNTRIES = ['us'];
 class DbxPhoneFieldComponent extends FieldType$1 {
-    get phoneField() {
-        return this.field.phoneField;
-    }
     get preferredCountries() {
-        return this.phoneField.preferredCountries ?? DEFAULT_PREFERRED_COUNTRIES;
+        return this.props.preferredCountries ?? DEFAULT_PREFERRED_COUNTRIES;
     }
     get onlyCountries() {
-        return this.phoneField.onlyCountries ?? [];
+        return this.props.onlyCountries ?? [];
     }
 }
 DbxPhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -3168,101 +3246,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
-const EXPANDABLE_WRAPPER_KEY = 'expandable';
-const TOGGLE_WRAPPER_KEY = 'toggle';
-const SECTION_WRAPPER_KEY = 'section';
-const SUBSECTION_WRAPPER_KEY = 'subsection';
-const INFO_WRAPPER_KEY = 'info';
-const FLEX_WRAPPER_KEY = 'flex';
-const STYLE_WRAPPER_KEY = 'style';
-const WORKING_WRAPPER_KEY = 'working';
-function addWrapperToFormlyFieldConfig(fieldConfig, wrapperKey, wrapperTemplateOptionsConfig) {
-    fieldConfig.templateOptions = {
-        ...fieldConfig.templateOptions,
-        ...wrapperTemplateOptionsConfig
-    };
-    return {
-        wrappers: [wrapperKey],
-        templateOptions: wrapperTemplateOptionsConfig,
-        fieldGroup: [fieldConfig]
-    };
-}
-function expandWrapper(fieldConfig, expandWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, EXPANDABLE_WRAPPER_KEY, {
-        expandWrapper
-    });
-}
-function toggleWrapper(fieldConfig, expandWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, TOGGLE_WRAPPER_KEY, {
-        expandWrapper
-    });
-}
-function sectionWrapper(fieldConfig, sectionWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, SECTION_WRAPPER_KEY, {
-        sectionWrapper
-    });
-}
-function subsectionWrapper(fieldConfig, subsectionWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, SUBSECTION_WRAPPER_KEY, {
-        subsectionWrapper
-    });
-}
-function infoWrapper(fieldConfig, infoWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, INFO_WRAPPER_KEY, {
-        infoWrapper
-    });
-}
-function styleWrapper(fieldConfig, styleWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, STYLE_WRAPPER_KEY, {
-        styleWrapper
-    });
-}
-function workingWrapper(fieldConfig, workingWrapper) {
-    return addWrapperToFormlyFieldConfig(fieldConfig, WORKING_WRAPPER_KEY, {
-        workingWrapper
-    });
-}
-function checkIsFieldFlexLayoutGroupFieldConfig(input) {
-    if (input.field != null) {
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-function flexLayoutWrapper(fieldConfigs, { relative, breakpoint, size: defaultSize = 2 } = {}) {
-    return {
-        wrappers: ['flex'],
-        fieldGroupClassName: 'dbx-flex-group',
-        // fieldGroupClassName: 'field-layout-group',
-        templateOptions: {
-            flexWrapper: {
-                breakpoint,
-                relative
-            }
-        },
-        fieldGroup: fieldConfigs.map((inputConfig) => {
-            const fieldConfig = checkIsFieldFlexLayoutGroupFieldConfig(inputConfig)
-                ? inputConfig
-                : {
-                    field: inputConfig
-                };
-            const { field, size = defaultSize } = fieldConfig;
-            const className = `dbx-flex-${size}`;
-            return {
-                ...field,
-                className
-            };
-        })
-    };
-}
-
 function textField(config) {
     const { key, pattern, minLength, maxLength = 1000, inputType: type = 'text' } = config;
     return formlyField({
         key,
         type: 'input',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
             type,
             minLength,
             maxLength,
@@ -3275,7 +3264,7 @@ function textAreaField(config) {
     return formlyField({
         key,
         type: 'textarea',
-        ...templateOptionsForFieldConfig(config, {
+        ...propsForFieldConfig(config, {
             rows,
             minLength,
             maxLength
@@ -3288,11 +3277,10 @@ function phoneField(config = {}) {
     const fieldConfig = formlyField({
         key,
         type: 'intphone',
-        phoneField: {
+        ...propsForFieldConfig(config, {
             preferredCountries,
             onlyCountries
-        },
-        ...templateOptionsForFieldConfig(config)
+        })
     });
     return fieldConfig;
 }
@@ -3454,7 +3442,7 @@ function addressField({ key = 'address', required = false } = {}) {
     return {
         key,
         wrappers: ['section'],
-        templateOptions: {
+        props: {
             label: 'Address',
             placeholder: '',
             required
@@ -3492,7 +3480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 function hiddenField({ key, required = false }) {
     return formlyField({
         key,
-        templateOptions: { required }
+        props: { required }
     });
 }
 
@@ -3588,7 +3576,7 @@ function textPasswordWithVerifyFieldGroup(config) {
     const verifyPasswordField = textVerifyPasswordField({
         ...config.password,
         ...config.verifyPassword,
-        label: config.verifyPassword?.label ?? `Verify ${passwordFieldConfig.templateOptions?.label}`,
+        label: config.verifyPassword?.label ?? `Verify ${passwordFieldConfig.props?.label}`,
         key: verifyPasswordFieldKey
     });
     const validators = {
@@ -4187,5 +4175,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDomain, isInRange, isTruthy, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, minLengthValidationMessage, minValidationMessage, nameField, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, templateOptionsForFieldConfig, templateOptionsValueForFieldConfig, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
+export { ADDRESS_CITY_MAX_LENGTH, ADDRESS_COUNTRY_MAX_LENGTH, ADDRESS_LINE_MAX_LENGTH, ADDRESS_STATE_MAX_LENGTH, ADDRESS_ZIP_MAX_LENGTH, APP_ACTION_FORM_DISABLED_KEY, AUTO_TOUCH_WRAPPER_KEY, AbstractAsyncFormlyFormDirective, AbstractConfigAsyncFormlyFormDirective, AbstractDbxPickableItemFieldDirective, AbstractDbxSearchableFieldDisplayDirective, AbstractDbxSearchableValueFieldDirective, AbstractFormExpandableSectionWrapperDirective, AbstractFormlyFormDirective, AbstractSyncFormlyFormDirective, AutoTouchFieldWrapperComponent, ChecklistItemFieldDataSetBuilder, DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN, DEFAULT_FORM_DISABLED_KEY, DEFAULT_HAS_VALUE_FN, DEFAULT_PREFERRED_COUNTRIES, DOMAIN_NAME_REGEX, DbxActionFormDirective, DbxActionFormSafetyDirective, DbxChecklistItemContentComponent, DbxChecklistItemFieldComponent, DbxDateTimeFieldComponent, DbxDateTimeFieldTimeMode, DbxDefaultChecklistItemFieldDisplayComponent, DbxDefaultSearchableFieldDisplayComponent, DbxForm, DbxFormActionModule, DbxFormActionTransitionModule, DbxFormComponentFieldComponent, DbxFormExpandWrapperComponent, DbxFormExtensionModule, DbxFormFlexWrapperComponent, DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyPickableFieldModule, DbxFormFormlySearchableFieldModule, DbxFormFormlySelectionModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyTextFieldModule, DbxFormFormlyValueModule, DbxFormFormlyWrapperModule, DbxFormInfoWrapperComponent, DbxFormIoModule, DbxFormLayoutModule, DbxFormLoadingSourceDirective, DbxFormModule, DbxFormRepeatArrayTypeComponent, DbxFormSectionWrapperComponent, DbxFormSourceDirective, DbxFormSpacerComponent, DbxFormState, DbxFormSubsectionWrapperComponent, DbxFormToggleWrapperComponent, DbxFormValueChangesDirective, DbxFormWorkingWrapperComponent, DbxFormlyContext, DbxFormlyFieldsContextDirective, DbxFormlyFormComponent, DbxFormlyModule, DbxMutableForm, DbxPhoneFieldComponent, DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, DbxSearchableChipFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxSearchableTextFieldComponent, DbxTextEditorFieldComponent, EXPANDABLE_WRAPPER_KEY, FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY, FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY, FLEX_WRAPPER_KEY, INFO_WRAPPER_KEY, INVALID_PHONE_NUMBER_MESSAGE, LABEL_STRING_MAX_LENGTH, MAX_LENGTH_VALIDATION_MESSAGE, MAX_VALIDATION_MESSAGE, MIN_LENGTH_VALIDATION_MESSAGE, MIN_VALIDATION_MESSAGE, PHONE_LABEL_MAX_LENGTH, REQUIRED_VALIDATION_MESSAGE, SEARCH_STRING_MAX_LENGTH, SECTION_WRAPPER_KEY, STYLE_WRAPPER_KEY, SUBSECTION_WRAPPER_KEY, TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS, TOGGLE_WRAPPER_KEY, WORKING_WRAPPER_KEY, addWrapperToFormlyFieldConfig, addressField, addressFormlyFields, addressListField, autoTouchWrapper, checkIsFieldFlexLayoutGroupFieldConfig, checkboxField, checklistItemField, chipTextField, cityField, componentField, countryField, dateTimeField, dbxFormSourceObservable, defaultValidationMessages, disableFormlyFieldAutofillAttributes, emailField, expandWrapper, fieldValueIsAvailableValidator, fieldValuesAreEqualValidator, filterPartialPotentialFieldConfigValuesFromObject, filterPickableItemFieldValuesByLabel, flexLayoutWrapper, formlyField, hiddenField, infoWrapper, isDomain, isInRange, isTruthy, makeMetaFilterSearchableFieldValueDisplayFn, maxLengthValidationMessage, maxValidationMessage, mergePropsValueObjects, minLengthValidationMessage, minValidationMessage, nameField, partialPotentialFieldConfigKeys, partialPotentialFieldConfigKeysFilter, phoneAndLabelSectionField, phoneField, phoneListField, pickableItemChipField, pickableItemListField, propsForFieldConfig, propsValueForFieldConfig, provideDbxForm, provideDbxMutableForm, provideFormlyContext, repeatArrayField, searchableChipField, searchableStringChipField, searchableTextField, sectionWrapper, sortPickableItemsByLabel, stateField, staticEnumField, styleWrapper, subsectionWrapper, textAreaField, textEditorField, textField, textIsAvailableField, textPasswordField, textPasswordWithVerifyFieldGroup, textVerifyPasswordField, timeOnlyField, toggleField, toggleWrapper, usernamePasswordLoginFields, workingWrapper, wrappedPhoneAndLabelField, zipCodeField };
 //# sourceMappingURL=dereekb-dbx-form.mjs.map