@dereekb/dbx-form 0.0.1 → 1.0.0

package/lib/formly/field/value/phone/phone.field.d.ts

@@ -1,26 +1,28 @@
+import { DbxFormSectionConfig } from '../../wrapper/section.wrapper.component';
 import { TextFieldConfig } from '../text/text.field';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { FieldConfig } from '../../field';
-import { DbxInternationalPhoneFieldConfig, InternationalPhoneFormlyFieldConfig } from './phone.field.component';
-export interface InternationalPhoneFieldConfig extends FieldConfig, DbxInternationalPhoneFieldConfig {
+import { LabeledFieldConfig } from '../../field';
+import { DbxInternationalPhoneFieldConfig } from './phone.field.component';
+import { RepeatArrayFieldConfig } from '../array/array.field';
+export interface InternationalPhoneFieldConfig extends LabeledFieldConfig, DbxInternationalPhoneFieldConfig {
 }
-export declare function internationalPhoneField({ key, label, placeholder, required }: Partial<InternationalPhoneFieldConfig>): InternationalPhoneFormlyFieldConfig;
-export interface PhoneFormlyFieldsConfig {
-    phoneField?: InternationalPhoneFieldConfig;
+export declare function phoneField(config?: Partial<InternationalPhoneFieldConfig>): FormlyFieldConfig;
+export interface WrappedPhoneAndLabelFieldConfig {
+    phoneField?: Partial<InternationalPhoneFieldConfig>;
     labelField?: TextFieldConfig;
 }
-export declare function phoneAndLabelFields({ phoneField: phone, labelField: label }: PhoneFormlyFieldsConfig): FormlyFieldConfig[];
-export interface PhoneAndLabelFieldGroupConfig extends PhoneFormlyFieldsConfig {
+/**
+ * Puts a phone and
+ * @param param0
+ * @returns
+ */
+export declare function wrappedPhoneAndLabelField({ phoneField: phone, labelField: label }?: WrappedPhoneAndLabelFieldConfig): FormlyFieldConfig;
+export interface PhoneAndLabelFieldSectionConfig extends DbxFormSectionConfig, WrappedPhoneAndLabelFieldConfig {
     key?: string;
-    label?: string;
-    required?: boolean;
 }
-export declare function phoneAndLabelFieldGroup({ key, label, required, phoneField, labelField }: PhoneAndLabelFieldGroupConfig): FormlyFieldConfig;
-export interface PhoneListFieldConfig extends PhoneAndLabelFieldGroupConfig {
-    maxPhones?: number;
-    repeatSection?: {
-        addText: string;
-        removeText: string;
-    };
+export declare function phoneAndLabelSectionField({ key, header, hint, phoneField, labelField }?: PhoneAndLabelFieldSectionConfig): FormlyFieldConfig;
+export interface PhoneListFieldConfig extends Omit<RepeatArrayFieldConfig, 'repeatFieldGroup'> {
+    phoneAndLabel?: WrappedPhoneAndLabelFieldConfig;
+    repeatFieldGroup?: FormlyFieldConfig[];
 }
-export declare function phoneListField({ key, label, repeatSection, required, maxPhones, phoneField, labelField }: PhoneListFieldConfig): FormlyFieldConfig;
+export declare function phoneListField(repeatConfig?: Partial<PhoneListFieldConfig>): FormlyFieldConfig;

package/lib/formly/field/value/phone/phone.field.module.d.ts

@@ -2,15 +2,17 @@ import * as i0 from "@angular/core";
 import * as i1 from "./phone.field.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/input";
-import * as i4 from "@angular/forms";
-import * as i5 from "ngx-mat-intl-tel-input";
-import * as i6 from "@angular/material/autocomplete";
-import * as i7 from "@angular/material/chips";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@angular/flex-layout";
-import * as i10 from "@ngx-formly/core";
+import * as i4 from "@angular/material/form-field";
+import * as i5 from "@angular/forms";
+import * as i6 from "ngx-mat-intl-tel-input";
+import * as i7 from "@angular/material/autocomplete";
+import * as i8 from "@angular/material/chips";
+import * as i9 from "@angular/material/icon";
+import * as i10 from "@angular/flex-layout";
+import * as i11 from "@ngx-formly/material/form-field";
+import * as i12 from "@ngx-formly/core";
 export declare class DbxFormFormlyPhoneFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyPhoneFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyPhoneFieldModule, [typeof i1.DbxInternationalPhoneFieldComponent], [typeof i2.CommonModule, typeof i3.MatInputModule, typeof i4.FormsModule, typeof i5.NgxMatIntlTelInputModule, typeof i4.ReactiveFormsModule, typeof i6.MatAutocompleteModule, typeof i7.MatChipsModule, typeof i8.MatIconModule, typeof i9.FlexLayoutModule, typeof i10.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyPhoneFieldModule, [typeof i1.DbxPhoneFieldComponent], [typeof i2.CommonModule, typeof i3.MatInputModule, typeof i4.MatFormFieldModule, typeof i5.FormsModule, typeof i6.NgxMatIntlTelInputModule, typeof i5.ReactiveFormsModule, typeof i7.MatAutocompleteModule, typeof i8.MatChipsModule, typeof i9.MatIconModule, typeof i10.FlexLayoutModule, typeof i11.FormlyMatFormFieldModule, typeof i12.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyPhoneFieldModule>;
 }

package/lib/formly/field/value/text/index.d.ts

@@ -1,3 +1,4 @@
 export * from './text.address.field';
 export * from './text.field.module';
 export * from './text.field';
+export * from './text.additional.field';

package/lib/formly/field/value/text/text.additional.field.d.ts

@@ -0,0 +1,19 @@
+import { FormlyFieldConfig } from "@ngx-formly/core";
+import { TextFieldConfig } from "./text.field";
+import { LabeledFieldConfig, DescriptionFieldConfig } from "../../field";
+export declare const PHONE_LABEL_MAX_LENGTH = 100;
+export declare const ADDRESS_COUNTRY_MAX_LENGTH = 80;
+export declare const ADDRESS_CITY_MAX_LENGTH = 80;
+export declare const ADDRESS_STATE_MAX_LENGTH = 80;
+export declare const ADDRESS_ZIP_MAX_LENGTH = 20;
+export declare const LABEL_STRING_MAX_LENGTH = 100;
+export declare const SEARCH_STRING_MAX_LENGTH = 100;
+export declare function nameField({ key, label, placeholder, required, minLength, maxLength, attributes }?: Partial<TextFieldConfig>): FormlyFieldConfig;
+export interface EmailFieldConfig extends Partial<LabeledFieldConfig>, DescriptionFieldConfig {
+    rows?: number;
+}
+export declare function emailField({ key, label, placeholder, description, required, readonly }?: EmailFieldConfig): FormlyFieldConfig;
+export declare function cityField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;
+export declare function stateField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;
+export declare function countryField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;
+export declare function zipCodeField({ key, required }?: Partial<TextFieldConfig>): FormlyFieldConfig;

package/lib/formly/field/value/text/text.address.field.d.ts

@@ -1,12 +1,11 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldConfig } from '../../field';
 export declare const ADDRESS_LINE_MAX_LENGTH = 100;
 export declare function addressFormlyFields(): FormlyFieldConfig[];
-export declare function addressField({ key, required }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-}): FormlyFieldConfig;
-export declare function addressListField({ key, required, maxAddresses }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-    maxAddresses?: number | undefined;
-}): FormlyFieldConfig;
+export interface AddressFieldConfig extends FieldConfig {
+}
+export declare function addressField({ key, required }?: Partial<AddressFieldConfig>): FormlyFieldConfig;
+export interface AddressListFieldConfig extends FieldConfig {
+    maxAddresses?: number;
+}
+export declare function addressListField({ key, required, maxAddresses }?: Partial<AddressListFieldConfig>): FormlyFieldConfig;

package/lib/formly/field/value/text/text.field.d.ts

@@ -1,42 +1,14 @@
 import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
-import { AttributesFieldConfig, FieldConfig, DescriptionFieldConfig } from '../../field';
-export declare const PHONE_LABEL_MAX_LENGTH = 100;
-export declare const ADDRESS_COUNTRY_MAX_LENGTH = 80;
-export declare const ADDRESS_CITY_MAX_LENGTH = 80;
-export declare const ADDRESS_STATE_MAX_LENGTH = 80;
-export declare const ADDRESS_ZIP_MAX_LENGTH = 20;
-export declare const LABEL_STRING_MAX_LENGTH = 100;
-export declare const SEARCH_STRING_MAX_LENGTH = 100;
+import { AttributesFieldConfig, LabeledFieldConfig } from '../../field';
 export interface TextFieldLengthConfig {
     minLength?: number;
     maxLength?: number;
 }
-export interface TextFieldConfig extends FieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+export interface TextFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
     pattern?: string | RegExp;
 }
-export declare function textField({ key, label, placeholder, required, attributes, readonly, autocomplete, minLength, maxLength, pattern }: TextFieldConfig): FormlyFieldConfig;
-export interface TextAreaFieldConfig extends FieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+export declare function textField(config: TextFieldConfig): FormlyFieldConfig;
+export interface TextAreaFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
     rows?: number;
 }
-export declare function textAreaField({ key, label, placeholder, rows, required, minLength, maxLength, attributes }: TextAreaFieldConfig): FormlyFieldConfig;
-export declare function nameField({ key, label, placeholder, required, minLength, maxLength, attributes }?: Partial<TextFieldConfig>): FormlyFieldConfig;
-export interface EmailFieldConfig extends FieldConfig, DescriptionFieldConfig {
-    rows?: number;
-}
-export declare function emailField({ key, label, placeholder, description, required, readonly }: EmailFieldConfig): FormlyFieldConfig;
-export declare function cityField({ key, required }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-}): FormlyFieldConfig;
-export declare function stateField({ key, required }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-}): FormlyFieldConfig;
-export declare function countryField({ key, required }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-}): FormlyFieldConfig;
-export declare function zipCodeField({ key, required }: {
-    key?: string | undefined;
-    required?: boolean | undefined;
-}): FormlyFieldConfig;
+export declare function textAreaField(config: TextAreaFieldConfig): FormlyFieldConfig;

package/lib/formly/field/value/text/text.field.module.d.ts

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
-import * as i1 from "../../wrapper/form.wrapper.module";
+import * as i1 from "@ngx-formly/material";
+import * as i2 from "../../wrapper/form.wrapper.module";
 export declare class DbxFormFormlyTextFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyTextFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyTextFieldModule, never, never, [typeof i1.DbxFormFormlyWrapperModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyTextFieldModule, never, [typeof i1.FormlyMaterialModule], [typeof i2.DbxFormFormlyWrapperModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyTextFieldModule>;
 }

package/lib/formly/field/value/value.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./array/array.field.module";
+import * as i3 from "./boolean/boolean.field.module";
+import * as i4 from "./date/date.field.module";
+import * as i5 from "./enum/enum.field.module";
+import * as i6 from "./phone/phone.field.module";
+import * as i7 from "./text/text.field.module";
+export declare class DbxFormFormlyValueModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyValueModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyValueModule, never, [typeof i1.CommonModule], [typeof i2.DbxFormFormlyArrayFieldModule, typeof i3.DbxFormFormlyBooleanFieldModule, typeof i4.DbxFormFormlyDateFieldModule, typeof i5.DbxFormFormlyEnumFieldModule, typeof i6.DbxFormFormlyPhoneFieldModule, typeof i7.DbxFormFormlyTextFieldModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyValueModule>;
+}

package/{src/lib → lib}/formly/field/wrapper/_wrapper.scss

@@ -1,10 +1,23 @@
 @use '../../../style/theming';
 
 // MARK: Variables
-
+$form-flex-section-group-padding: 4px;
+$form-flex-section-group-item-padding: $form-flex-section-group-padding * 2;
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
+
+  .dbx-form-expand-wrapper-button {
+    text-decoration: underline;
+    margin-right: 8px;
+    margin-bottom: 6px;
+  }
+
+  .dbx-form-toggle-wrapper-toggle {
+    margin-bottom: 6px;
+  }
+
+}
 
 @mixin color($theme-config) {}
 

package/lib/formly/field/wrapper/autotouch.wrapper.component.d.ts

@@ -1,10 +1,10 @@
 import { OnInit } from '@angular/core';
-import { FieldWrapper } from '@ngx-formly/core';
+import { FieldTypeConfig, FieldWrapper } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
 /**
  * Wrapper than sets the field to "touched" when the value changes and the field is not pristine.
  */
-export declare class AutoTouchFieldWrapperComponent extends FieldWrapper implements OnInit {
+export declare class AutoTouchFieldWrapperComponent extends FieldWrapper<FieldTypeConfig> implements OnInit {
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutoTouchFieldWrapperComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AutoTouchFieldWrapperComponent, "ng-component", never, {}, {}, never, never>;

package/lib/formly/field/wrapper/expandable.wrapper.component.d.ts

@@ -1,43 +1,14 @@
-import { hasValueOrNotEmpty, Maybe } from '@dereekb/util';
-import { FieldWrapper, FormlyTemplateOptions } from '@ngx-formly/core';
-import { BehaviorSubject } from 'rxjs';
-import { OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl } from '@angular/forms';
-import { FormlyFieldConfig } from '@ngx-formly/material/form-field';
+import { AbstractFormExpandableSectionWrapperDirective, AbstractFormExpandableSectionConfig } from './expandable.wrapper.delegate';
 import * as i0 from "@angular/core";
-export interface FormExpandableSectionConfig<T = any> {
-    expandLabel?: string;
-    /**
-     * Optional function to use for checking value existence.
-     */
-    hasValueFn?: (value: T) => boolean;
-}
-export interface FormExpandableSectionWrapperTemplateOptions<T = any> extends FormlyTemplateOptions {
-    expandableSection?: FormExpandableSectionConfig<T>;
-}
-export interface FormExpandableSectionFormlyConfig<T = any> extends FormlyFieldConfig {
-    templateOptions?: FormExpandableSectionWrapperTemplateOptions<T>;
-}
-export declare const DEFAULT_HAS_VALUE_FN: typeof hasValueOrNotEmpty;
-export declare class AbstractFormExpandableSectionWrapperDirective<T, F extends FormExpandableSectionFormlyConfig<T> = FormExpandableSectionFormlyConfig<T>> extends FieldWrapper<F> implements OnInit, OnDestroy {
-    protected _formControlObs: BehaviorSubject<Maybe<AbstractControl>>;
-    readonly formControl$: import("rxjs").Observable<AbstractControl>;
-    protected _toggleOpen: BehaviorSubject<Maybe<boolean>>;
-    readonly show$: import("rxjs").Observable<any>;
-    readonly hasValue$: import("rxjs").Observable<any>;
-    get expandableSection(): Maybe<FormExpandableSectionConfig<T>>;
-    get hasValueFn(): (value: T) => any;
-    get expandLabel(): string;
-    open(): void;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractFormExpandableSectionWrapperDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractFormExpandableSectionWrapperDirective<any, any>, never, never, {}, {}, never>;
+export declare type DbxFormExpandWrapperButtonType = 'button' | 'text';
+export interface DbxFormExpandWrapperConfig<T = any> extends AbstractFormExpandableSectionConfig<T> {
+    buttonType?: DbxFormExpandWrapperButtonType;
 }
 /**
  * Section that is expandable by a button until a value is set, or the button is pressed.
  */
-export declare class FormExpandableSectionWrapperComponent<T = any, F extends FormExpandableSectionFormlyConfig<T> = FormExpandableSectionFormlyConfig<T>> extends AbstractFormExpandableSectionWrapperDirective<T, F> {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormExpandableSectionWrapperComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormExpandableSectionWrapperComponent<any, any>, "ng-component", never, {}, {}, never, never>;
+export declare class DbxFormExpandWrapperComponent extends AbstractFormExpandableSectionWrapperDirective<DbxFormExpandWrapperConfig> {
+    get buttonType(): DbxFormExpandWrapperButtonType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormExpandWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormExpandWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/expandable.wrapper.delegate.d.ts

@@ -0,0 +1,36 @@
+import { FormlyFieldConfig } from '@ngx-formly/material/form-field';
+import { Maybe } from '@dereekb/util';
+import { FieldWrapper, FormlyTemplateOptions, FieldTypeConfig } from '@ngx-formly/core';
+import { BehaviorSubject } from 'rxjs';
+import { OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export interface AbstractFormExpandableSectionConfig<T = any> {
+    expandLabel?: string;
+    /**
+     * Optional function to use for checking value existence.
+     */
+    hasValueFn?: (value: T) => boolean;
+}
+export interface FormExpandableSectionWrapperTemplateOptions<S extends AbstractFormExpandableSectionConfig> extends FormlyTemplateOptions {
+    expandWrapper?: S;
+}
+export interface FormExpandableSectionFormlyConfig<S> extends FormlyFieldConfig {
+    templateOptions?: FormExpandableSectionWrapperTemplateOptions<S> & FormlyTemplateOptions;
+}
+export declare const DEFAULT_HAS_VALUE_FN: (x: Maybe<object>) => boolean;
+export declare class AbstractFormExpandableSectionWrapperDirective<S extends AbstractFormExpandableSectionConfig = AbstractFormExpandableSectionConfig> extends FieldWrapper<FormExpandableSectionFormlyConfig<S> & FieldTypeConfig> implements OnInit, OnDestroy {
+    protected _formControlObs: BehaviorSubject<Maybe<AbstractControl>>;
+    readonly formControl$: import("rxjs").Observable<AbstractControl>;
+    protected _toggleOpen: BehaviorSubject<Maybe<boolean>>;
+    readonly show$: import("rxjs").Observable<any>;
+    readonly hasValue$: import("rxjs").Observable<any>;
+    get expandableSection(): Maybe<S>;
+    get hasValueFn(): (value: any) => any;
+    get expandLabel(): Maybe<string>;
+    open(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractFormExpandableSectionWrapperDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractFormExpandableSectionWrapperDirective<any>, never, never, {}, {}, never>;
+}

package/lib/formly/field/wrapper/flex.wrapper.component.d.ts

@@ -1,6 +1,21 @@
-import { FieldWrapper } from '@ngx-formly/core';
+import { ScreenMediaWidthType } from '@dereekb/dbx-web';
+import { Maybe } from '@dereekb/util';
+import { FieldWrapper, FormlyFieldConfig, FormlyTemplateOptions } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export declare class FormFlexWrapperComponent extends FieldWrapper {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormFlexWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormFlexWrapperComponent, "ng-component", never, {}, {}, never, never>;
+export interface DbxFlexWrapperConfig {
+    breakpoint?: ScreenMediaWidthType;
+    relative?: boolean;
+}
+export interface DbxFlexWrapperWrapperTemplateOptions extends FormlyTemplateOptions {
+    flexWrapper?: DbxFlexWrapperConfig;
+}
+export interface DbxFlexWrapperWrapperConfig extends FormlyFieldConfig {
+    templateOptions?: DbxFlexWrapperWrapperTemplateOptions;
+}
+export declare class DbxFormFlexWrapperComponent extends FieldWrapper<DbxFlexWrapperWrapperConfig> {
+    get flexWrapper(): Maybe<DbxFlexWrapperConfig>;
+    get breakpoint(): ScreenMediaWidthType | undefined;
+    get relative(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFlexWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormFlexWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/form.wrapper.module.d.ts

@@ -5,15 +5,17 @@ import * as i3 from "./subsection.wrapper.component";
 import * as i4 from "./info.wrapper.component";
 import * as i5 from "./expandable.wrapper.component";
 import * as i6 from "./toggle.wrapper.component";
-import * as i7 from "@angular/common";
-import * as i8 from "@dereekb/dbx-web";
-import * as i9 from "@angular/material/button";
-import * as i10 from "@angular/material/slide-toggle";
-import * as i11 from "@angular/material/icon";
-import * as i12 from "@angular/flex-layout";
-import * as i13 from "@ngx-formly/core";
+import * as i7 from "./flex.wrapper.component";
+import * as i8 from "./style.wrapper.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@dereekb/dbx-web";
+import * as i11 from "@angular/material/button";
+import * as i12 from "@angular/material/slide-toggle";
+import * as i13 from "@angular/material/icon";
+import * as i14 from "@angular/flex-layout";
+import * as i15 from "@ngx-formly/core";
 export declare class DbxFormFormlyWrapperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyWrapperModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyWrapperModule, [typeof i1.AutoTouchFieldWrapperComponent, typeof i2.FormSectionWrapperComponent, typeof i3.FormSubsectionWrapperComponent, typeof i4.FormInfoSectionWrapperComponent, typeof i5.FormExpandableSectionWrapperComponent, typeof i6.FormToggleSectionWrapperComponent], [typeof i7.CommonModule, typeof i8.DbxTextModule, typeof i9.MatButtonModule, typeof i10.MatSlideToggleModule, typeof i11.MatIconModule, typeof i12.FlexLayoutModule, typeof i13.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyWrapperModule, [typeof i1.AutoTouchFieldWrapperComponent, typeof i2.DbxFormSectionWrapperComponent, typeof i3.DbxFormSubsectionWrapperComponent, typeof i4.DbxFormInfoWrapperComponent, typeof i5.DbxFormExpandWrapperComponent, typeof i6.DbxFormToggleWrapperComponent, typeof i7.DbxFormFlexWrapperComponent, typeof i8.DbxFormStyleWrapperComponent], [typeof i9.CommonModule, typeof i10.DbxTextModule, typeof i10.DbxFlexLayoutModule, typeof i10.DbxSectionLayoutModule, typeof i11.MatButtonModule, typeof i12.MatSlideToggleModule, typeof i13.MatIconModule, typeof i14.FlexLayoutModule, typeof i15.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyWrapperModule>;
 }

package/lib/formly/field/wrapper/index.d.ts

@@ -1,10 +1,10 @@
+export * from './expandable.wrapper.delegate';
 export * from './autotouch.wrapper.component';
 export * from './expandable.wrapper.component';
 export * from './flex.wrapper.component';
-export * from './flex.wrapper.layout';
 export * from './form.wrapper.module';
 export * from './info.wrapper.component';
 export * from './section.wrapper.component';
 export * from './subsection.wrapper.component';
 export * from './toggle.wrapper.component';
-export * from './toggle.wrapper';
+export * from './wrapper';

package/lib/formly/field/wrapper/info.wrapper.component.d.ts

@@ -1,17 +1,17 @@
 import { FieldWrapper, FormlyFieldConfig, FormlyTemplateOptions } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export interface FormInfoSectionConfig<T> {
+export interface DbxFormInfoConfig {
     onInfoClick: () => void;
 }
-export interface FormInfoSectionWrapperTemplateOptions<T = any> extends FormlyTemplateOptions {
-    infoSection: FormInfoSectionConfig<T>;
+export interface DbxFormInfoWrapperTemplateOptions extends FormlyTemplateOptions {
+    infoWrapper: DbxFormInfoConfig;
 }
-export interface FormInfoSectionWFormlyConfig<T = any> extends FormlyFieldConfig {
-    templateOptions?: FormInfoSectionWrapperTemplateOptions<T>;
+export interface DbxFormInfoWrapperConfig extends FormlyFieldConfig {
+    templateOptions?: DbxFormInfoWrapperTemplateOptions;
 }
-export declare class FormInfoSectionWrapperComponent<T> extends FieldWrapper<FormInfoSectionWFormlyConfig<T>> {
-    get infoSection(): FormInfoSectionConfig<T>;
+export declare class DbxFormInfoWrapperComponent extends FieldWrapper<DbxFormInfoWrapperConfig> {
+    get infoWrapper(): DbxFormInfoConfig;
     onInfoClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormInfoSectionWrapperComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormInfoSectionWrapperComponent<any>, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormInfoWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormInfoWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/section.wrapper.component.d.ts

@@ -1,8 +1,19 @@
 import { Maybe } from '@dereekb/util';
-import { FieldWrapper } from '@ngx-formly/core';
+import { FieldTypeConfig, FieldWrapper, FormlyFieldConfig, FormlyTemplateOptions } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export declare class FormSectionWrapperComponent extends FieldWrapper {
-    get description(): Maybe<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormSectionWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionWrapperComponent, "ng-component", never, {}, {}, never, never>;
+export interface DbxFormSectionConfig {
+    header?: string;
+    hint?: string;
+}
+export interface DbxFormSectionWrapperTemplateOptions extends FormlyTemplateOptions {
+    sectionWrapper?: DbxFormSectionConfig;
+}
+export interface FormSectionFormlyConfig extends FormlyFieldConfig {
+    templateOptions?: DbxFormSectionWrapperTemplateOptions;
+}
+export declare class DbxFormSectionWrapperComponent extends FieldWrapper<FormSectionFormlyConfig & FieldTypeConfig> {
+    get header(): Maybe<string>;
+    get hint(): Maybe<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormSectionWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormSectionWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/style.wrapper.component.d.ts

@@ -0,0 +1,22 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { ObservableGetter } from '@dereekb/rxjs';
+import { Maybe } from '@dereekb/util';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface DbxFormStyleWrapperConfig {
+    style: ObservableGetter<string>;
+}
+export interface DbxFormStyleWrapperFormlyConfig extends FormlyFieldConfig {
+    styleWrapper: DbxFormStyleWrapperConfig;
+}
+export declare class DbxFormStyleWrapperComponent extends FieldWrapper<DbxFormStyleWrapperFormlyConfig> implements OnInit, OnDestroy {
+    private _style;
+    readonly style$: Observable<Maybe<string>>;
+    get styleWrapper(): DbxFormStyleWrapperConfig;
+    get styleGetter(): ObservableGetter<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormStyleWrapperComponent, "ng-component", never, {}, {}, never, never>;
+}

package/lib/formly/field/wrapper/subsection.wrapper.component.d.ts

@@ -1,8 +1,19 @@
 import { Maybe } from '@dereekb/util';
-import { FieldWrapper } from '@ngx-formly/core';
+import { FieldTypeConfig, FieldWrapper, FormlyFieldConfig, FormlyTemplateOptions } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export declare class FormSubsectionWrapperComponent extends FieldWrapper {
-    get description(): Maybe<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormSubsectionWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormSubsectionWrapperComponent, "ng-component", never, {}, {}, never, never>;
+export interface DbxFormSubsectionConfig {
+    header?: string;
+    hint?: string;
+}
+export interface DbxFormSubsectionWrapperTemplateOptions extends FormlyTemplateOptions {
+    subsectionWrapper?: DbxFormSubsectionConfig;
+}
+export interface DbxFormSubsectionFormlyConfig extends FormlyFieldConfig {
+    templateOptions?: DbxFormSubsectionWrapperTemplateOptions;
+}
+export declare class DbxFormSubsectionWrapperComponent extends FieldWrapper<DbxFormSubsectionFormlyConfig & FieldTypeConfig> {
+    get header(): Maybe<string>;
+    get hint(): Maybe<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormSubsectionWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormSubsectionWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/toggle.wrapper.component.d.ts

@@ -1,24 +1,16 @@
 import { Maybe } from '@dereekb/util';
-import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
-import { AbstractFormExpandableSectionWrapperDirective, FormExpandableSectionWrapperTemplateOptions } from './expandable.wrapper.component';
+import { AbstractFormExpandableSectionConfig, AbstractFormExpandableSectionWrapperDirective } from './expandable.wrapper.delegate';
 import * as i0 from "@angular/core";
-export interface FormToggleSectionConfig {
+export interface DbxFormToggleWrapperConfig<T = any> extends AbstractFormExpandableSectionConfig<T> {
     toggleLabelObs?: (open: Maybe<boolean>) => Observable<string>;
 }
-export interface FormToggleSectionWrapperTemplateOptions<T = any> extends FormExpandableSectionWrapperTemplateOptions<T> {
-    toggleSection?: FormToggleSectionConfig;
-}
-export interface FormToggleSectionFormlyConfig<T = any> extends FormlyFieldConfig {
-    templateOptions?: FormToggleSectionWrapperTemplateOptions<T>;
-}
 /**
  * Section that is expandable by a button until a value is set, or the button is pressed.
  */
-export declare class FormToggleSectionWrapperComponent<T = any> extends AbstractFormExpandableSectionWrapperDirective<T, FormToggleSectionFormlyConfig<T>> {
-    get toggleSection(): Maybe<FormToggleSectionConfig>;
-    readonly $slideLabel: Observable<string>;
+export declare class DbxFormToggleWrapperComponent extends AbstractFormExpandableSectionWrapperDirective<DbxFormToggleWrapperConfig> {
+    readonly slideLabel$: Observable<Maybe<string>>;
     onToggleChange(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormToggleSectionWrapperComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormToggleSectionWrapperComponent<any>, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormToggleWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormToggleWrapperComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/formly/field/wrapper/wrapper.d.ts

@@ -0,0 +1,34 @@
+import { DbxFormStyleWrapperConfig } from './style.wrapper.component';
+import { DbxFlexWrapperConfig } from './flex.wrapper.component';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { DbxFormToggleWrapperConfig } from './toggle.wrapper.component';
+import { DbxFormSectionConfig } from './section.wrapper.component';
+import { DbxFormSubsectionConfig } from './subsection.wrapper.component';
+import { DbxFormInfoConfig } from './info.wrapper.component';
+import { DbxFormExpandWrapperConfig } from './expandable.wrapper.component';
+import { DbxFlexSize } from '@dereekb/dbx-web';
+export declare const EXPANDABLE_WRAPPER_KEY = "expandable";
+export declare const TOGGLE_WRAPPER_KEY = "toggle";
+export declare const SECTION_WRAPPER_KEY = "section";
+export declare const SUBSECTION_WRAPPER_KEY = "subsection";
+export declare const INFO_WRAPPER_KEY = "info";
+export declare const FLEX_WRAPPER_KEY = "flex";
+export declare const STYLE_WRAPPER_KEY = "style";
+export declare function addWrapperToFormlyFieldConfig<T extends object>(fieldConfig: FormlyFieldConfig, wrapperKey: string, wrapperTemplateOptionsConfig: T): FormlyFieldConfig;
+export declare function expandWrapper(fieldConfig: FormlyFieldConfig, expandWrapper?: DbxFormExpandWrapperConfig): FormlyFieldConfig;
+export declare function toggleWrapper(fieldConfig: FormlyFieldConfig, expandWrapper?: DbxFormToggleWrapperConfig): FormlyFieldConfig;
+export declare function sectionWrapper(fieldConfig: FormlyFieldConfig, sectionWrapper?: DbxFormSectionConfig): FormlyFieldConfig;
+export declare function subsectionWrapper(fieldConfig: FormlyFieldConfig, subsectionWrapper?: DbxFormSubsectionConfig): FormlyFieldConfig;
+export declare function infoWrapper(fieldConfig: FormlyFieldConfig, infoWrapper: DbxFormInfoConfig): FormlyFieldConfig;
+export declare function styleWrapper(fieldConfig: FormlyFieldConfig, styleWrapper: DbxFormStyleWrapperConfig): FormlyFieldConfig;
+export interface DbxFlexLayoutWrapperGroupFieldConfig {
+    field: FormlyFieldConfig;
+    /**
+     * Flex space sizing for the field. If undefined it will default to the provided default size.
+     */
+    size?: DbxFlexSize;
+}
+export interface DbxFlexLayoutWrapperGroupFieldConfigDefaults extends DbxFlexWrapperConfig, Omit<DbxFlexLayoutWrapperGroupFieldConfig, 'field'> {
+}
+export declare function checkIsFieldFlexLayoutGroupFieldConfig(input: FormlyFieldConfig | DbxFlexLayoutWrapperGroupFieldConfig): input is DbxFlexLayoutWrapperGroupFieldConfig;
+export declare function flexLayoutWrapper(fieldConfigs: (FormlyFieldConfig | DbxFlexLayoutWrapperGroupFieldConfig)[], { relative, breakpoint, size: defaultSize }?: DbxFlexLayoutWrapperGroupFieldConfigDefaults): FormlyFieldConfig;