fix: dbxDateTimeFieldComponent initial date fix

- fixed styling with dbx-form-phone-field padding

packages/dbx-form/src/lib/formly/field/value/date/datetime.field.component.ts

@@ -11,9 +11,9 @@ import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { BehaviorSubject, Observable, combineLatest, Subject, merge, interval } from 'rxjs';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { addMinutes, isSameDay, isSameMinute, startOfDay } from 'date-fns';
-import { filterMaybe, skipFirstMaybe, SubscriptionObject, switchMapMaybeDefault } from '@dereekb/rxjs';
+import { filterMaybe, skipFirstMaybe, SubscriptionObject, switchMapMaybeDefault, tapLog } from '@dereekb/rxjs';
 
-export enum DateTimeFieldTimeMode {
+export enum DbxDateTimeFieldTimeMode {
   /**
    * Time is required.
    */
@@ -42,7 +42,7 @@ export interface DbxDateTimeFieldConfig {
    * 
    * This is ignored if timeOnly is specified.
    */
-  timeMode?: DateTimeFieldTimeMode;
+  timeMode?: DbxDateTimeFieldTimeMode;
 
   /**
    * Other form control for enabling/disabling whether or not it is a full day.
@@ -127,7 +127,7 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
   private _config = new BehaviorSubject<Maybe<Observable<DateTimePickerConfiguration>>>(undefined);
 
   get dateOnly(): boolean {
-    return this.timeMode === DateTimeFieldTimeMode.NONE;
+    return this.timeMode === DbxDateTimeFieldTimeMode.NONE;
   }
 
   get dateTimeField() {
@@ -142,8 +142,8 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
     return !this.timeOnly;
   }
 
-  get timeMode(): DateTimeFieldTimeMode {
-    return (this.timeOnly) ? DateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DateTimeFieldTimeMode.REQUIRED);
+  get timeMode(): DbxDateTimeFieldTimeMode {
+    return (this.timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : (this.dateTimeField.timeMode ?? DbxDateTimeFieldTimeMode.REQUIRED);
   }
 
   get description(): Maybe<string> {
@@ -155,15 +155,19 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
   );
 
   readonly showTimeInput$: Observable<boolean> = this.fullDay$.pipe(
-    map(x => !x && this.timeMode !== DateTimeFieldTimeMode.NONE)
+    map(x => !x && this.timeMode !== DbxDateTimeFieldTimeMode.NONE)
   );
 
   readonly showAddTime$ = this.showTimeInput$.pipe(
-    map(x => !x && this.timeMode === DateTimeFieldTimeMode.OPTIONAL),
+    map(x => !x && this.timeMode === DbxDateTimeFieldTimeMode.OPTIONAL),
     shareReplay(1)
   );
 
-  readonly date$ = this.dateInputCtrl.valueChanges.pipe(filterMaybe(), shareReplay(1));
+  readonly date$ = this.dateInputCtrl.valueChanges.pipe(
+    startWith(this.dateInputCtrl.value),
+    filterMaybe(),
+    shareReplay(1)
+  );
 
   readonly dateValue$ = merge(
     this.date$,
@@ -299,12 +303,12 @@ export class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConf
     this._fullDayControlObs.next(fullDayFieldCtrl);
 
     switch (this.dateTimeField.timeMode) {
-      case DateTimeFieldTimeMode.OPTIONAL:
+      case DbxDateTimeFieldTimeMode.OPTIONAL:
         break;
-      case DateTimeFieldTimeMode.NONE:
+      case DbxDateTimeFieldTimeMode.NONE:
         this.removeTime();
         break;
-      case DateTimeFieldTimeMode.REQUIRED:
+      case DbxDateTimeFieldTimeMode.REQUIRED:
         this.addTime();
         break;
     }

packages/dbx-form/src/lib/formly/field/value/date/datetime.field.ts

@@ -1,8 +1,7 @@
 import { Observable, of } from 'rxjs';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { LabeledFieldConfig, formlyField, templateOptionsForFieldConfig, DescriptionFieldConfig } from '../../field';
-import { DbxDateTimeFieldConfig, DateTimeFieldTimeMode, DateTimeFormlyFieldConfig, DateTimePickerConfiguration } from './datetime.field.component';
-import { FieldConfig } from '../..';
+import { DbxDateTimeFieldConfig, DbxDateTimeFieldTimeMode, DateTimePickerConfiguration } from './datetime.field.component';
 
 export interface DateTimeFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, DbxDateTimeFieldConfig { }
 export interface TimeFieldConfig extends Omit<DateTimeFieldConfig, 'showDate'> { }
@@ -18,15 +17,15 @@ export const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS: () => Observable<DateTimePicker
 export function timeOnlyField(config: Partial<TimeFieldConfig> = {}): FormlyFieldConfig {
   return dateTimeField({
     ...config,
-    timeMode: DateTimeFieldTimeMode.REQUIRED,
+    timeMode: DbxDateTimeFieldTimeMode.REQUIRED,
     timeOnly: true
   });
 }
 
 export function dateTimeField(config: Partial<DateTimeFieldConfig> = {}): FormlyFieldConfig {
   const {
     key = 'date',
-    timeMode = DateTimeFieldTimeMode.REQUIRED,
+    timeMode = DbxDateTimeFieldTimeMode.REQUIRED,
     fullDayFieldName,
     getConfigObs,
     timeOnly = false
@@ -36,7 +35,7 @@ export function dateTimeField(config: Partial<DateTimeFieldConfig> = {}): Formly
     key,
     type: 'datetime',
     dateTimeField: {
-      timeMode: (timeOnly) ? DateTimeFieldTimeMode.REQUIRED : timeMode,
+      timeMode: (timeOnly) ? DbxDateTimeFieldTimeMode.REQUIRED : timeMode,
       fullDayFieldName,
       getConfigObs,
       timeOnly,

packages/dbx-form/src/lib/formly/field/value/phone/_phone.scss

@@ -23,6 +23,9 @@
     }
   }
 
+  .dbx-form-phone-field .ngx-mat-tel-input-container input:not(.country-search) {
+    padding: 0 6px 0 110px;
+  }
 }
 
 @mixin color($theme-config) {

packages/demo/src/app/modules/doc/modules/form/container/value.component.ts

@@ -1,6 +1,6 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Component } from '@angular/core';
-import { addressField, addressListField, cityField, countryField, emailField, phoneField, nameField, phoneAndLabelSectionField, wrappedPhoneAndLabelField, repeatArrayField, stateField, textAreaField, textField, zipCodeField, phoneListField, dateTimeField, DateTimeFieldTimeMode, toggleField, checkboxField } from '@dereekb/dbx-form';
+import { addressField, addressListField, cityField, countryField, emailField, phoneField, nameField, phoneAndLabelSectionField, wrappedPhoneAndLabelField, repeatArrayField, stateField, textAreaField, textField, zipCodeField, phoneListField, dateTimeField, DbxDateTimeFieldTimeMode, toggleField, checkboxField } from '@dereekb/dbx-form';
 
 @Component({
   templateUrl: './value.component.html'
@@ -23,8 +23,8 @@ export class DocFormValueComponent {
 
   readonly dateTimeFields: FormlyFieldConfig[] = [
     dateTimeField({ key: 'date', required: true, description: 'This is the default date field that requires the user pick a date and time.' }),
-    dateTimeField({ key: 'timeOptional', timeMode: DateTimeFieldTimeMode.OPTIONAL, description: 'This date field is for picking a day, with an optional time.' }),
-    dateTimeField({ key: 'dayOnly', timeMode: DateTimeFieldTimeMode.NONE, description: 'This date field is for picking a day only.' }),
+    dateTimeField({ key: 'timeOptional', timeMode: DbxDateTimeFieldTimeMode.OPTIONAL, description: 'This date field is for picking a day, with an optional time.' }),
+    dateTimeField({ key: 'dayOnly', timeMode: DbxDateTimeFieldTimeMode.NONE, description: 'This date field is for picking a day only.' }),
     dateTimeField({ key: 'timeOnly', timeOnly: true, description: 'This date field is for picking a time only.' })
   ];