From a0ac20398f32961173462a09ecdf046674e11aef Mon Sep 17 00:00:00 2001
From: Derek Burgman <derek@dereekb.com>
Date: Mon, 21 Nov 2022 22:43:47 -0600
Subject: [PATCH] fix: fixed toggleField() description position

- fixed issue where toggleField()'s description/hint was lower than other field's descriptions
- fixed default transform configuration for stateField()
---
 .../doc/modules/form/container/wrapper.component.ts  | 12 ++++++++++--
 .../src/lib/formly/field/value/boolean/_boolean.scss |  6 ++++++
 .../formly/field/value/text/text.additional.field.ts |  5 +++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts b/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts
index 29a50330b..40c8d9459 100644
--- a/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts
+++ b/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts
@@ -1,6 +1,6 @@
 import { MatDialog } from '@angular/material/dialog';
 import { Component } from '@angular/core';
-import { expandWrapper, flexLayoutWrapper, infoWrapper, nameField, sectionWrapper, subsectionWrapper, toggleWrapper, cityField, stateField, zipCodeField, countryField, styleWrapper } from '@dereekb/dbx-form';
+import { expandWrapper, flexLayoutWrapper, infoWrapper, nameField, sectionWrapper, subsectionWrapper, toggleWrapper, cityField, stateField, zipCodeField, countryField, styleWrapper, toggleField } from '@dereekb/dbx-form';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
 @Component({
@@ -52,7 +52,15 @@ export class DocFormWrapperComponent {
     })
   ];
 
-  readonly flexField: FormlyFieldConfig[] = [flexLayoutWrapper([cityField(), stateField()])];
+  readonly flexField: FormlyFieldConfig[] = [
+    flexLayoutWrapper([
+      cityField(),
+      stateField({
+        description: 'State Description'
+      }),
+      toggleField({ key: 'toggle', label: 'Toggle', description: 'Toggle Description' })
+    ])
+  ];
 
   readonly flexThreeField: FormlyFieldConfig[] = [
     flexLayoutWrapper(
diff --git a/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss b/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss
index 4da18f823..4fa3082c6 100644
--- a/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss
+++ b/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss
@@ -4,6 +4,12 @@
 
 // MARK: Mixin
 @mixin core() {
+  .mat-form-field.mat-form-field-type-toggle {
+    .mat-form-field-wrapper .mat-form-field-subscript-wrapper {
+      // margin on the checkbox field is unnecessary. By removing it, it becomes more in-line with the other fields.
+      margin-top: 0px;
+    }
+  }
 }
 
 @mixin color($theme-config) {
diff --git a/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts b/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts
index 8d7864bf0..9f91e4e3f 100644
--- a/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts
+++ b/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts
@@ -69,7 +69,7 @@ export interface StateFieldConfig extends Partial<TextFieldConfig> {
 }
 
 export function stateField(config: StateFieldConfig = {}): FormlyFieldConfig {
-  const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, required = false } = config;
+  const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, transform, required = false } = config;
   return textField({
     ...config,
     key,
@@ -80,7 +80,8 @@ export function stateField(config: StateFieldConfig = {}): FormlyFieldConfig {
     required,
     maxLength,
     transform: {
-      toUppercase: true
+      ...transform,
+      toUppercase: asCode || transform?.toUppercase
     }
   });
 }