@dereekb/dbx-form 1.2.0 → 3.0.0

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

@@ -12,7 +12,7 @@ export declare function nameField({ key, label, placeholder, required, minLength
 export interface EmailFieldConfig extends Partial<LabeledFieldConfig>, DescriptionFieldConfig {
     rows?: number;
 }
-export declare function emailField({ key, label, placeholder, description, required, readonly }?: EmailFieldConfig): FormlyFieldConfig;
+export declare function emailField(config?: 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;

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

@@ -4,7 +4,9 @@ export interface TextFieldLengthConfig {
     minLength?: number;
     maxLength?: number;
 }
+export declare type TextFieldInputType = 'text' | 'password' | 'email';
 export interface TextFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+    inputType?: TextFieldInputType;
     pattern?: string | RegExp;
 }
 export declare function textField(config: TextFieldConfig): FormlyFieldConfig;

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

@@ -7,15 +7,16 @@ import * as i5 from "./expandable.wrapper.component";
 import * as i6 from "./toggle.wrapper.component";
 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";
+import * as i9 from "./working.wrapper.component";
+import * as i10 from "@angular/common";
+import * as i11 from "@dereekb/dbx-web";
+import * as i12 from "@angular/material/button";
+import * as i13 from "@angular/material/slide-toggle";
+import * as i14 from "@angular/material/icon";
+import * as i15 from "@angular/flex-layout";
+import * as i16 from "@ngx-formly/core";
 export declare class DbxFormFormlyWrapperModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyWrapperModule, 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 ɵ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.DbxFormWorkingWrapperComponent], [typeof i10.CommonModule, typeof i11.DbxTextModule, typeof i11.DbxLoadingModule, typeof i11.DbxFlexLayoutModule, typeof i11.DbxSectionLayoutModule, typeof i12.MatButtonModule, typeof i13.MatSlideToggleModule, typeof i14.MatIconModule, typeof i15.FlexLayoutModule, typeof i16.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyWrapperModule>;
 }

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

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

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

@@ -1,11 +1,11 @@
 import { OnInit, OnDestroy } from '@angular/core';
-import { ObservableGetter } from '@dereekb/rxjs';
+import { ObservableOrValue } 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>;
+    style: ObservableOrValue<string>;
 }
 export interface DbxFormStyleWrapperFormlyConfig extends FormlyFieldConfig {
     styleWrapper: DbxFormStyleWrapperConfig;
@@ -14,7 +14,7 @@ export declare class DbxFormStyleWrapperComponent extends FieldWrapper<DbxFormSt
     private _style;
     readonly style$: Observable<Maybe<string>>;
     get styleWrapper(): DbxFormStyleWrapperConfig;
-    get styleGetter(): ObservableGetter<string>;
+    get styleGetter(): ObservableOrValue<string>;
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormStyleWrapperComponent, never>;

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

@@ -0,0 +1,22 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { SimpleLoadingContext, SubscriptionObject } from '@dereekb/rxjs';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+import * as i0 from "@angular/core";
+export interface DbxFormWorkingWrapperConfig {
+}
+export interface DbxFormWorkingWrapperFormlyConfig extends FormlyFieldConfig {
+    styleWrapper: DbxFormWorkingWrapperConfig;
+}
+/**
+ * Adds a loading bar to help signify asynchronos work is occuring.
+ *
+ * By default shows loading during asynchronous validation of a field (FormControl status is "PENDING")
+ */
+export declare class DbxFormWorkingWrapperComponent extends FieldWrapper<DbxFormWorkingWrapperFormlyConfig> implements OnInit, OnDestroy {
+    readonly sub: SubscriptionObject;
+    readonly workingContext: SimpleLoadingContext;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormWorkingWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormWorkingWrapperComponent, "ng-component", never, {}, {}, never, never>;
+}

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

@@ -7,6 +7,7 @@ import { DbxFormSubsectionConfig } from './subsection.wrapper.component';
 import { DbxFormInfoConfig } from './info.wrapper.component';
 import { DbxFormExpandWrapperConfig } from './expandable.wrapper.component';
 import { DbxFlexSize } from '@dereekb/dbx-web';
+import { DbxFormWorkingWrapperConfig } from './working.wrapper.component';
 export declare const EXPANDABLE_WRAPPER_KEY = "expandable";
 export declare const TOGGLE_WRAPPER_KEY = "toggle";
 export declare const SECTION_WRAPPER_KEY = "section";
@@ -14,6 +15,7 @@ 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 const WORKING_WRAPPER_KEY = "working";
 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;
@@ -21,6 +23,7 @@ export declare function sectionWrapper(fieldConfig: FormlyFieldConfig, sectionWr
 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 declare function workingWrapper(fieldConfig: FormlyFieldConfig, workingWrapper: DbxFormWorkingWrapperConfig): FormlyFieldConfig;
 export interface DbxFlexLayoutWrapperGroupFieldConfig {
     field: FormlyFieldConfig;
     /**

package/lib/formly/formly.context.d.ts

@@ -1,20 +1,20 @@
 import { Provider } from '@angular/core';
 import { Observable } from 'rxjs';
-import { DbxForm, DbxFormEvent, DbxMutableForm } from '../form/form';
+import { DbxForm, DbxFormDisabledKey, DbxFormEvent, DbxMutableForm } from '../form/form';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { LockSet } from '@dereekb/rxjs';
-import { Maybe } from '@dereekb/util';
+import { BooleanStringKeyArray, Maybe } from '@dereekb/util';
 export interface DbxFormlyInitialize<T> {
     fields: Observable<FormlyFieldConfig[]>;
+    initialDisabled: BooleanStringKeyArray;
     initialValue: Maybe<Partial<T>>;
-    initialDisabled: boolean;
 }
 /**
  * DbxFormlyContext delegate.
  *
  * This is usually the component or element that contains the form itself.
  */
-export interface DbxFormlyContextDelegate<T = any> extends Omit<DbxMutableForm<T>, 'lockSet' | 'setDisabled'> {
+export interface DbxFormlyContextDelegate<T = any> extends Omit<DbxMutableForm<T>, 'lockSet'> {
     readonly stream$: Observable<DbxFormEvent>;
     init(initialize: DbxFormlyInitialize<T>): void;
 }
@@ -25,7 +25,7 @@ export declare function ProvideFormlyContext(): Provider[];
 /**
  * DbxForm Instance that registers a delegate and manages the state of that form/delegate.
  */
-export declare class DbxFormlyContext<T> implements DbxForm<T> {
+export declare class DbxFormlyContext<T = any> implements DbxForm<T> {
     readonly lockSet: LockSet;
     private static INITIAL_STATE;
     private _fields;
@@ -33,6 +33,7 @@ export declare class DbxFormlyContext<T> implements DbxForm<T> {
     private _disabled;
     private _delegate;
     readonly fields$: Observable<FormlyFieldConfig[]>;
+    readonly disabled$: Observable<string[]>;
     readonly stream$: Observable<DbxFormEvent>;
     constructor();
     destroy(): void;
@@ -43,7 +44,9 @@ export declare class DbxFormlyContext<T> implements DbxForm<T> {
     getValue(): Observable<T>;
     setValue(value: Partial<T>): void;
     isDisabled(): boolean;
-    setDisabled(disabled?: boolean): void;
+    get disabled(): BooleanStringKeyArray;
+    getDisabled(): Observable<BooleanStringKeyArray>;
+    setDisabled(key?: DbxFormDisabledKey, disabled?: boolean): void;
     resetForm(): void;
     forceFormUpdate(): void;
 }

package/lib/formly/formly.directive.d.ts

@@ -3,6 +3,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
 import { OnInit, OnDestroy } from '@angular/core';
 import { DbxFormlyContext } from './formly.context';
 import { Maybe } from '@dereekb/util';
+import { DbxFormDisabledKey } from '../form/form';
 import * as i0 from "@angular/core";
 /**
  * Abstract component for wrapping a form.
@@ -17,6 +18,7 @@ export declare abstract class AbstractFormlyFormDirective<T> implements OnDestro
     setValue(value: Partial<T>): void;
     resetForm(): void;
     clearValue(): void;
+    setDisabled(key?: DbxFormDisabledKey, disabled?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractFormlyFormDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractFormlyFormDirective<any>, never, never, { "disabled": "disabled"; }, {}, never>;
 }

package/lib/formly/formly.form.component.d.ts

@@ -3,9 +3,15 @@ import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
-import { DbxForm, DbxFormEvent } from '../form/form';
+import { DbxForm, DbxFormDisabledKey, DbxFormEvent } from '../form/form';
 import { DbxFormlyContext, DbxFormlyContextDelegate, DbxFormlyInitialize } from './formly.context';
+import { BooleanStringKeyArray } from '@dereekb/util';
 import * as i0 from "@angular/core";
+export interface DbxFormlyFormState {
+    changesSinceLastResetCount: number;
+    isFormValid: boolean;
+    isFormDisabled: boolean;
+}
 /**
  * Used for rending a form from a DbxFormlyContext.
  */
@@ -13,8 +19,10 @@ export declare class DbxFormlyFormComponent<T extends object> extends AbstractSu
     private readonly context;
     private _fields;
     private _events;
+    private _disabled;
     private _reset;
     private _forceUpdate;
+    private _disabledSub;
     form: FormGroup;
     model: any;
     options: FormlyFormOptions;
@@ -27,8 +35,10 @@ export declare class DbxFormlyFormComponent<T extends object> extends AbstractSu
     getValue(): Observable<T>;
     setValue(value: T): void;
     resetForm(): void;
-    get disabled(): boolean;
-    setDisabled(disabled?: boolean): void;
+    get isDisabled(): boolean;
+    get disabled(): BooleanStringKeyArray;
+    getDisabled(): Observable<BooleanStringKeyArray>;
+    setDisabled(key?: DbxFormDisabledKey, disabled?: boolean): void;
     forceFormUpdate(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormlyFormComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormlyFormComponent<any>, "dbx-formly", ["formly"], {}, {}, never, never>;

package/lib/formly/index.d.ts

@@ -1,5 +1,6 @@
 export * from './config';
 export * from './field';
+export * from './template';
 export * from './formly.context';
 export * from './formly.context.directive';
 export * from './formly.directive';

package/lib/formly/template/available.d.ts

@@ -0,0 +1,7 @@
+import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
+import { FieldValueIsAvailableValidatorConfig } from '../../validator/available';
+import { TextFieldConfig } from '../field/value/text/text.field';
+export interface TextAvailableFieldConfig extends TextFieldConfig, Omit<FieldValueIsAvailableValidatorConfig<string>, 'message'> {
+    isNotAvailableErrorMessage?: string;
+}
+export declare function textIsAvailableField(config: TextAvailableFieldConfig): FormlyFieldConfig;

package/lib/formly/template/index.d.ts

@@ -0,0 +1,2 @@
+export * from './login';
+export * from './available';

package/lib/formly/template/login.d.ts

@@ -0,0 +1,59 @@
+import { TextFieldConfig } from '../field/value/text/text.field';
+import { EmailFieldConfig } from '../field/value/text/text.additional.field';
+import { FormlyFieldConfig } from "@ngx-formly/core";
+import { Maybe } from '@dereekb/util';
+/**
+ * Convenience interface for the password parameters configuration for a TextPasswordField.
+ */
+export interface TextPasswordFieldPasswordParameters extends Partial<Pick<TextFieldConfig, 'maxLength' | 'minLength' | 'pattern'>> {
+}
+/**
+ * textPasswordField() configuration.
+ */
+export interface TextPasswordFieldConfig extends Omit<TextFieldConfig, 'inputType' | 'key'>, Partial<Pick<TextFieldConfig, 'key'>> {
+}
+/**
+ * Configured simple text password field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function textPasswordField(config?: TextPasswordFieldConfig): FormlyFieldConfig;
+/**
+ * Configured verify field for a password.
+ * @param config
+ * @returns
+ */
+export declare function textVerifyPasswordField(config?: TextPasswordFieldConfig): FormlyFieldConfig;
+export interface TextPasswordWithVerifyFieldConfig {
+    password?: TextPasswordFieldConfig;
+    verifyPassword?: TextPasswordFieldConfig;
+}
+export declare function textPasswordWithVerifyFieldGroup(config: TextPasswordWithVerifyFieldConfig): FormlyFieldConfig;
+export interface UsernameLoginFieldUsernameConfig {
+    email?: Omit<EmailFieldConfig, 'key'>;
+    username?: Omit<TextFieldConfig, 'key'>;
+}
+/**
+ * usernamePasswordLoginFields() configuration.
+ */
+export interface UsernameLoginFieldsConfig {
+    username: 'email' | 'username' | UsernameLoginFieldUsernameConfig;
+    password?: TextPasswordFieldConfig;
+    verifyPassword?: Maybe<boolean | TextPasswordFieldConfig>;
+}
+/**
+ * Value type exported by usernameLoginFields()
+ */
+export interface DefaultUsernameLoginFieldsValue {
+    username: string;
+    password: string;
+    verifyPassword?: string;
+}
+/**
+ * Template for login field that takes in a username and password.
+ *
+ * @param param0
+ * @returns
+ */
+export declare function usernamePasswordLoginFields({ username, password, verifyPassword }: UsernameLoginFieldsConfig): FormlyFieldConfig[];

package/lib/validator/available.d.ts

@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs';
+import { AsyncValidatorFn } from "@angular/forms";
+export declare const FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY = "fieldValueIsAvailable";
+export declare const FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY = "fieldValueIsAvailableError";
+export declare type FieldValueIsAvailableValidatorFunction<T> = (value: T) => Observable<boolean>;
+export interface FieldValueIsAvailableValidatorConfig<T> {
+    /**
+     * How long to wait in between value changes.
+     */
+    throttle?: number;
+    /**
+     * Returns an observable that checks whether or not the value is currently available.
+     *
+     * @param value
+     */
+    readonly checkValueIsAvailable: FieldValueIsAvailableValidatorFunction<T>;
+    /**
+     * Custom message for this validator.
+     */
+    message?: string;
+}
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function fieldValueIsAvailableValidator<T>(config: FieldValueIsAvailableValidatorConfig<T>): AsyncValidatorFn;

package/lib/validator/field.d.ts

@@ -0,0 +1,32 @@
+import { ValidatorFn } from "@angular/forms";
+import { KeyValueTupleFilter, IsEqualFunction } from "@dereekb/util";
+export declare const FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY = "fieldValuesAreEqual";
+export interface FieldValuesAreEqualValidatorConfig<T extends object = any> {
+    /**
+     * Keys of the value to match on.
+     *
+     * If none are defined, then all fields from the control are matched.
+     */
+    keysFilter?: string[];
+    /**
+     * Full filter to use, if defined.
+     */
+    valuesFilter?: KeyValueTupleFilter<T, any>;
+    /**
+     * Optional equivalence comparator.
+     */
+    isEqual?: IsEqualFunction<T>;
+    /**
+     * Custom message for this validator.
+     */
+    message?: string;
+}
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function fieldValuesAreEqualValidator<T extends object = any>(config?: FieldValuesAreEqualValidatorConfig<T>): ValidatorFn;

package/lib/validator/index.d.ts

@@ -1,3 +1,5 @@
 export * from './boolean';
 export * from './email';
+export * from './field';
 export * from './number';
+export * from './available';

package/package.json

@@ -1,67 +1,40 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "1.2.0",
+  "version": "3.0.0",
   "peerDependencies": {
-    "@angular/common": "^13.1.0",
-    "@angular/core": "^13.1.0",
-    "@dereekb/dbx-core": "1.2.0",
-    "@ngrx/component-store": "^13.0.2",
-    "@ngrx/data": "^13.0.2",
-    "@ngrx/effects": "^13.0.2",
-    "@ngrx/entity": "^13.0.2",
-    "@ngrx/store": "^13.0.2",
-    "rxjs": "^7.5.2",
-    "@dereekb/util": "1.2.0",
-    "extra-set": "^2.2.11",
-    "@dereekb/rxjs": "1.2.0",
-    "ms": "^3.0.0-canary.1",
-    "@angular/platform-browser": "^13.0.0",
-    "date-fns": "^2.28.0",
-    "@dereekb/date": "1.2.0",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.13.2",
-    "date-fns-tz": "^1.2.2",
-    "rrule": "git+https://git@github.com/dereekb/rrule.git#17adf5708d6567b4d01a3a8afd106261421ea492",
-    "@angular/router": "^13.0.0",
-    "@uirouter/core": "^6.0.8",
-    "@uirouter/angular": "^9.1.0",
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@dereekb/dbx-core": "3.0.0",
     "@angular/material": "^13.0.0",
-    "@dereekb/dbx-web": "1.2.0",
-    "mat-progress-buttons": "git+https://git@github.com/dereekb/mat-progress-buttons.git#60b0374a45644e8756f20b8d761738151ca3df64",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "ng-overlay-container": "^13.0.0",
-    "@angular/cdk": "^13.0.0",
-    "angular-resize-event": "^3.1.1",
-    "ngx-infinite-scroll": "^10.0.1",
-    "linkify-string": "4.0.0-beta.3",
-    "@ngx-formly/core": "6.0.0-next.8",
+    "@dereekb/dbx-web": "3.0.0",
     "@angular/forms": "^13.0.0",
-    "@ngx-formly/material": "6.0.0-next.8",
-    "change-case": "^4.1.2",
+    "@ngx-formly/core": "6.0.0-next.9",
+    "@ngx-formly/material": "6.0.0-next.9",
     "ngx-editor": "^12.1.1",
     "ngx-mat-intl-tel-input": "^4.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/dereekb-dbx-form.mjs",
-  "es2020": "fesm2020/dereekb-dbx-form.mjs",
-  "esm2020": "esm2020/dereekb-dbx-form.mjs",
-  "fesm2020": "fesm2020/dereekb-dbx-form.mjs",
-  "fesm2015": "fesm2015/dereekb-dbx-form.mjs",
-  "typings": "dereekb-dbx-form.d.ts",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
+      "sass": "./_index.scss",
       "types": "./dereekb-dbx-form.d.ts",
       "esm2020": "./esm2020/dereekb-dbx-form.mjs",
       "es2020": "./fesm2020/dereekb-dbx-form.mjs",
       "es2015": "./fesm2015/dereekb-dbx-form.mjs",
       "node": "./fesm2015/dereekb-dbx-form.mjs",
       "default": "./fesm2020/dereekb-dbx-form.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
+  "module": "fesm2015/dereekb-dbx-form.mjs",
+  "es2020": "fesm2020/dereekb-dbx-form.mjs",
+  "esm2020": "esm2020/dereekb-dbx-form.mjs",
+  "fesm2020": "fesm2020/dereekb-dbx-form.mjs",
+  "fesm2015": "fesm2015/dereekb-dbx-form.mjs",
+  "typings": "dereekb-dbx-form.d.ts",
   "sideEffects": false
 }

package/lib/formly/field/fields_TODO.scss

@@ -1,4 +0,0 @@
-
-.form-wrapped-component {
-  margin: 12px 0;
-}

package/lib/formly/form_TODO.scss

@@ -1,153 +0,0 @@
-$dbx-form-container-margin: 10px;
-
-.dbx-formly {
-  margin: $dbx-form-container-margin 0;
-}
-
-.dbx-form-spacer {
-  margin-top: 24px;  
-}
-
-// OLD. Remove
-$form-submit-view-margin: 8px;
-$material-form-margin: 16px;
-
-// MARK: Form Container
-.dbx-form-container {
-  margin: $dbx-form-container-margin 0;
-}
-
-// .dbx-form-container-form-view {}
-
-// MARK: Form View
-.dbx-form-view-padded {
-  padding: 0 $material-form-margin;
-}
-
-.required-text {
-  content: "*";
-  color: red;
-  // color: mat-color($tallynote-dbx-warn);
-}
-
-.dbx-form-view {
-  // margin-bottom: $material-form-margin;
-
-}
-
-.dbx-form-view-tools {
-  text-align: right;
-}
-
-.dbx-form-view-control {
-  width: 100%;
-}
-
-// .dbx-form-view-sub-form {}
-
-.mat-input-element {
-  margin: 0; // Safari Fix
-}
-
-.mat-form-field {
-  margin: 8px 0px 16px;
-}
-
-.mat-input-placeholder {
-  text-transform: capitalize;
-}
-
-.required {
-
-  .mat-checkbox-label::after,
-  .mat-input-placeholder::after {
-    @extend .required-text;
-  }
-}
-
-.capitalized-field {
-  .mat-input-element {
-    text-transform: capitalize;
-  }
-}
-
-.dbx-form-view-checkbox-control {
-  margin: 12px 0;
-  padding-left: 15px;
-
-  .mat-checkbox-label {
-    text-transform: capitalize;
-  }
-}
-
-.form-select-align {
-  padding-top: 24px;
-}
-
-.form-anti-padding {
-  margin-top: -20px;
-}
-
-.warning {
-  color: red;
-  // color: mat-color($tallynote-dbx-warn);
-}
-
-.dbx-form-view-help {
-  font-size: 75%;
-  color: grey;
-}
-
-.dbx-form-view-hint {
-  font-size: 75%;
-  margin-top: 3px;
-}
-
-// MARK: Tabs
-.mat-tab-header {
-  margin-bottom: $material-form-margin;
-}
-
-.dbx-form-view-tab-page {
-  padding: 12px 0;
-}
-
-// MARK: Input
-.mat-form-field {
-
-  .form-suffix-button {
-    width: 1.8em;
-    height: 1.8em;
-    margin-top: -0.6em;
-  }
-
-}
-
-// MARK: Controls
-.select-form-control {
-  width: 100%;
-}
-
-.form-suffix-button {
-  .mat-icon-button {
-    width: 2em;
-    height: 2em;
-
-    .mat-icon {
-      width: 1.8em;
-      height: 1.8em;
-    }
-  }
-}
-
-.date-form-control {
-
-  .mat-datepicker-toggle {
-
-    .mat-icon-button {
-      height: 2em;
-      width: 2em;
-    }
-
-  }
-}