@dereekb/dbx-form 0.0.1 → 1.2.0

package/lib/formly/field/texteditor/_texteditor.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-texteditor-field-compact {
+    .dbx-texteditor-field-input {
+      min-height: 120px;
+      height: 300px;
+      max-height: calc(var(--vh100) * 0.5);
+    }
+  }
+
+  .dbx-texteditor-field-input {
+    max-height: 400px;
+    overflow: auto;
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+  $background-color: theming.get-color-from-palette($background, 'background');
+  $hover-color: theming.get-color-from-palette($background, 'hover');
+  $focused-color: theming.get-color-from-palette($background, 'focused-button');
+  $border-color: theming.get-color-from-palette($foreground, 'divider');
+  $text-color: theming.get-color-from-palette($foreground, 'text');
+
+  @debug $border-color;
+
+  .dbx-texteditor-field {
+
+    .NgxEditor {
+      background: transparent;
+      color: $text-color;
+      border-color: $border-color;
+    }
+
+    .NgxEditor__MenuBar {
+      background: $background-color;
+      color: $text-color;
+      @include theming.elevation(2);
+
+      svg {
+        fill: $text-color;
+      }
+    }
+
+    .NgxEditor__MenuItem:hover,
+    .NgxEditor__Dropdown:hover {
+      background-color: $hover-color;
+    }
+
+    .NgxEditor__MenuItem.NgxEditor__MenuItem--Active {
+      background-color: $focused-color;
+    }
+
+    .NgxEditor__Popup,
+    .NgxEditor__Dropdown.NgxEditor__Dropdown--Selected, 
+    .NgxEditor__Dropdown.NgxEditor__Dropdown--Open,
+    .NgxEditor__Dropdown .NgxEditor__Dropdown--DropdownMenu,
+    .NgxEditor__Popup--FormGroup input {
+      background: $background-color;
+      color: $text-color;
+    }
+
+    .NgxEditor__Dropdown.NgxEditor__Dropdown--Selected .NgxEditor__Dropdown--Text {
+      color: $text-color;
+    }
+
+  }
+
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-texteditor') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './texteditor.field.component';
+export * from './texteditor.field.module';
+export * from './texteditor.field';

package/lib/formly/field/texteditor/texteditor.field.component.d.ts

@@ -0,0 +1,26 @@
+import { FormGroup } from '@angular/forms';
+import { CompactContextStore } from '@dereekb/dbx-web';
+import { OnDestroy, OnInit } from '@angular/core';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType } from '@ngx-formly/material';
+import { Editor } from 'ngx-editor';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+export interface TextEditorComponentFieldConfig extends FormlyFieldConfig {
+}
+export declare class DbxTextEditorFieldComponent<T extends TextEditorComponentFieldConfig = TextEditorComponentFieldConfig> extends FieldType<T & FieldTypeConfig> implements OnInit, OnDestroy {
+    readonly compact: CompactContextStore;
+    private _editor?;
+    private _sub;
+    readonly compactClass$: import("rxjs").Observable<Maybe<string>>;
+    constructor(compact: CompactContextStore);
+    get formGroupName(): string;
+    get formGroup(): FormGroup;
+    get editor(): Editor;
+    get label(): Maybe<string>;
+    get description(): Maybe<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextEditorFieldComponent<any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextEditorFieldComponent<any>, "ng-component", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,7 @@
+import { DescriptionFieldConfig } from './../field';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { LabeledFieldConfig } from '../field';
+import { TextFieldLengthConfig } from '../value/text/text.field';
+export interface TextEditorFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, TextFieldLengthConfig {
+}
+export declare function textEditorField(config: TextEditorFieldConfig): FormlyFieldConfig;

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

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./texteditor.field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@dereekb/dbx-web";
+import * as i4 from "@angular/forms";
+import * as i5 from "ngx-editor";
+import * as i6 from "@angular/material/form-field";
+import * as i7 from "@angular/material/input";
+import * as i8 from "@ngx-formly/core";
+export declare class DbxFormFormlyTextEditorFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyTextEditorFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyTextEditorFieldModule, [typeof i1.DbxTextEditorFieldComponent], [typeof i2.CommonModule, typeof i3.DbxTextModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.NgxEditorModule, typeof i6.MatFormFieldModule, typeof i7.MatInputModule, typeof i8.FormlyModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyTextEditorFieldModule>;
+}

package/lib/formly/field/value/array/_array.scss

@@ -0,0 +1,73 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .example-custom-placeholder {
+    background: #ccc;
+    border: dotted 3px #999;
+    min-height: 100px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .dbx-form-repeat-array {
+    .dbx-form-repeat-array-field {
+
+      @include theming.elevation(1);
+
+      h4 {
+        margin: 0;
+        display: inline;
+
+        .repeat-array-number {
+          margin-right: 4px;
+        }
+      }
+
+      padding: 0;
+      margin-bottom: 2px;
+      // border: 1px solid rgba(0, 0, 0, 0.04);
+
+      .dbx-form-repeat-array-field-content {
+        display: block;
+        padding: 6px;
+      }
+    }
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+
+  $form-repeat-array-field-bg: theming.get-color-from-palette($background, 'card');
+
+  .dbx-form-repeat-array-field {
+    background: $form-repeat-array-field-bg;
+    border: 4px solid $form-repeat-array-field-bg;
+  }
+
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-array') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/formly/field/value/array/array.field.component.d.ts

@@ -1,22 +1,33 @@
-import { Maybe } from '@dereekb/util';
-import { FieldArrayType, FormlyTemplateOptions } from '@ngx-formly/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { GetterWithInput, Maybe } from '@dereekb/util';
+import { FieldArrayTypeConfig, FieldArrayType, FormlyFieldConfig } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
-export interface FormRepeatSectionConfig {
-    itemLabel?: string;
+export interface DbxFormRepeatArrayConfig {
+    labelForField?: string | GetterWithInput<string, FormlyFieldConfig>;
     addText?: string;
     removeText?: string;
 }
-export interface FormRepeatTypeTemplateOptions extends FormlyTemplateOptions, FormRepeatSectionConfig {
-    repeatSection?: FormRepeatSectionConfig;
+export interface DbxFormRepeatArrayFormlyConfig extends FieldArrayTypeConfig {
+    repeatArrayField: DbxFormRepeatArrayConfig;
 }
-export declare class DbxFormRepeatTypeComponent extends FieldArrayType {
-    get repeatSection(): FormRepeatSectionConfig;
-    get itemLabel(): string;
+export declare class DbxFormRepeatArrayTypeComponent extends FieldArrayType<DbxFormRepeatArrayFormlyConfig> {
+    get repeatArrayField(): DbxFormRepeatArrayConfig;
+    get label(): string;
     get addText(): string;
     get removeText(): string;
     get max(): Maybe<number>;
     get count(): number;
     get canAdd(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormRepeatTypeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormRepeatTypeComponent, "ng-component", never, {}, {}, never, never>;
+    /**
+     * Moves the target index up one value.
+     *
+     * @param index
+     */
+    moveUp(index: number): void;
+    moveDown(index: number): void;
+    swapIndexes(currentIndex: number, targetIndex: number): void;
+    drop(event: CdkDragDrop<any>): void;
+    labelForItem(field: FormlyFieldConfig): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormRepeatArrayTypeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormRepeatArrayTypeComponent, "ng-component", never, {}, {}, never, never>;
 }

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

@@ -0,0 +1,9 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldConfig } from "../../field";
+import { DbxFormRepeatArrayConfig } from './array.field.component';
+export interface RepeatArrayFieldConfig extends DbxFormRepeatArrayConfig, FieldConfig {
+    label?: string;
+    repeatFieldGroup: FormlyFieldConfig[];
+    maxLength?: number;
+}
+export declare function repeatArrayField(config: RepeatArrayFieldConfig): FormlyFieldConfig;

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

@@ -4,10 +4,13 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/form-field";
 import * as i4 from "@angular/forms";
 import * as i5 from "@angular/material/divider";
-import * as i6 from "@dereekb/dbx-web";
-import * as i7 from "@ngx-formly/core";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@angular/material/icon";
+import * as i8 from "@angular/cdk/drag-drop";
+import * as i9 from "@dereekb/dbx-web";
+import * as i10 from "@ngx-formly/core";
 export declare class DbxFormFormlyArrayFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyArrayFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyArrayFieldModule, [typeof i1.DbxFormRepeatTypeComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.ReactiveFormsModule, typeof i5.MatDividerModule, typeof i6.DbxButtonModule, typeof i7.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyArrayFieldModule, [typeof i1.DbxFormRepeatArrayTypeComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.ReactiveFormsModule, typeof i5.MatDividerModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.DragDropModule, typeof i9.DbxSectionLayoutModule, typeof i9.DbxBarLayoutModule, typeof i9.DbxButtonModule, typeof i10.FormlyModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyArrayFieldModule>;
 }

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

@@ -1,2 +1,3 @@
 export * from './array.field.component';
 export * from './array.field.module';
+export * from './array.field';

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

@@ -1,8 +1,8 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { FieldConfig, DefaultValueFieldConfig, DescriptionFieldConfig } from '../../field';
-export interface ToggleFieldConfig extends Omit<FieldConfig, 'placeholder' | 'autocomplete'>, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
+import { LabeledFieldConfig, DefaultValueFieldConfig, DescriptionFieldConfig } from '../../field';
+export interface ToggleFieldConfig extends Omit<LabeledFieldConfig, 'placeholder' | 'autocomplete'>, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
 }
-export declare function toggleField({ key, label, description, defaultValue, required, readonly }: ToggleFieldConfig): FormlyFieldConfig;
-export interface CheckboxFieldConfig extends FieldConfig, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
+export declare function toggleField(config: ToggleFieldConfig): FormlyFieldConfig;
+export interface CheckboxFieldConfig extends LabeledFieldConfig, DefaultValueFieldConfig<boolean>, DescriptionFieldConfig {
 }
-export declare function checkboxField({ key, label, placeholder, defaultValue, required, readonly, autocomplete }: CheckboxFieldConfig): FormlyFieldConfig;
+export declare function checkboxField(config: CheckboxFieldConfig): FormlyFieldConfig;

package/lib/formly/field/value/date/_date.scss

@@ -0,0 +1,79 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-datetime-parent-form-field {
+    >formly-wrapper-mat-form-field {
+      >mat-form-field.mat-form-field {
+        >.mat-form-field-wrapper>.mat-form-field-underline {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .dbx-datetime-field {
+    width: 100%;
+  }
+
+  $dbx-datetime-button-width: 40px;
+
+  .dbx-datetime-row {
+
+    .dbx-datetime-row-field {
+      width: calc(100% - #{$dbx-datetime-button-width});
+    }
+
+    &.dbx-datetime-hint-row {
+      margin-top: -6px;
+    }
+  }
+
+  .add-time-button {
+    max-height: 40px;
+
+    &.add-time-button-full {
+      width: 100%;
+      margin-bottom: 6px;
+    }
+  }
+
+  .add-time-button-wrapper {
+    padding-left: 6px;
+    margin: auto;
+    margin-bottom: 4px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-items: left;
+  }
+
+  .dbx-datetime-hint-row {
+    // margin-left: 12px;
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-date') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -14,8 +14,9 @@ import * as i12 from "@angular/material/chips";
 import * as i13 from "@angular/material/icon";
 import * as i14 from "@angular/flex-layout";
 import * as i15 from "@ngx-formly/core";
+import * as i16 from "../../wrapper/form.wrapper.module";
 export declare class DbxFormFormlyDateFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyDateFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyDateFieldModule, [typeof i1.DbxDateTimeFieldComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDividerModule, typeof i6.MatFormFieldModule, typeof i7.MatButtonModule, typeof i8.MatDatepickerModule, typeof i9.MatNativeDateModule, typeof i10.MatMenuModule, typeof i3.ReactiveFormsModule, typeof i11.DbxDatePipeModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i14.FlexLayoutModule, typeof i15.FormlyModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyDateFieldModule, [typeof i1.DbxDateTimeFieldComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatInputModule, typeof i5.MatDividerModule, typeof i6.MatFormFieldModule, typeof i7.MatButtonModule, typeof i8.MatDatepickerModule, typeof i9.MatNativeDateModule, typeof i10.MatMenuModule, typeof i3.ReactiveFormsModule, typeof i11.DbxDatePipeModule, typeof i12.MatChipsModule, typeof i13.MatIconModule, typeof i14.FlexLayoutModule, typeof i15.FormlyModule], [typeof i16.DbxFormFormlyWrapperModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyDateFieldModule>;
 }

package/lib/formly/field/value/date/datetime.field.component.d.ts

@@ -1,7 +1,9 @@
+import { MatInput } from '@angular/material/input';
 import { DateTimeMinuteConfig } from '@dereekb/date';
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormControl } from '@angular/forms';
-import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldType } from '@ngx-formly/material';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
 import { Maybe, ReadableTimeString } from '@dereekb/util';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@@ -34,7 +36,7 @@ export interface DbxDateTimeFieldConfig {
      */
     timeMode?: DateTimeFieldTimeMode;
     /**
-     * Other form contro for enabling/disabling whether or not it is a full day.
+     * Other form control for enabling/disabling whether or not it is a full day.
      *
      * This field is only used if time is optional.
      *
@@ -49,15 +51,13 @@ export interface DbxDateTimeFieldConfig {
      * Used for returning the configuration observable.
      */
     getConfigObs?: () => Observable<DateTimePickerConfiguration>;
-    /**
-     * Optional description/hint to display.
-     */
-    description?: string;
 }
-export interface DateTimeFormlyFieldConfig extends DbxDateTimeFieldConfig, FormlyFieldConfig {
+export interface DateTimeFormlyFieldConfig extends FormlyFieldConfig {
+    dateTimeField: DbxDateTimeFieldConfig;
 }
-export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConfig> implements OnInit, OnDestroy {
+export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyFieldConfig & FieldTypeConfig> implements OnInit, OnDestroy {
     private readonly cdRef;
+    dateInput: MatInput;
     private _sub;
     private _valueSub;
     private _fullDayInputCtrl?;
@@ -76,6 +76,8 @@ export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyF
     readonly timeInputCtrl: FormControl;
     private _date;
     private _config;
+    get dateOnly(): boolean;
+    get dateTimeField(): DbxDateTimeFieldConfig;
     get timeOnly(): Maybe<boolean>;
     get showDateInput(): boolean;
     get timeMode(): DateTimeFieldTimeMode;
@@ -83,15 +85,16 @@ export declare class DbxDateTimeFieldComponent extends FieldType<DateTimeFormlyF
     readonly fullDay$: Observable<boolean>;
     readonly showTimeInput$: Observable<boolean>;
     readonly showAddTime$: Observable<boolean>;
-    readonly date$: Observable<Date>;
-    readonly dateValue$: Observable<Date>;
+    readonly date$: Observable<Maybe<Date>>;
+    readonly dateValue$: Observable<Date | null | undefined>;
     readonly timeInput$: Observable<ReadableTimeString>;
-    readonly config$: Observable<DateTimePickerConfiguration>;
-    readonly rawDateTime$: Observable<Date>;
-    readonly timeOutput$: Observable<Date>;
+    readonly config$: Observable<Maybe<DateTimePickerConfiguration>>;
+    readonly rawDateTime$: Observable<Maybe<Date>>;
+    readonly timeOutput$: Observable<Maybe<Date>>;
     constructor(cdRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    dateTextChanged(e: any): void;
     datePicked(event: MatDatepickerInputEvent<Date>): void;
     setTime(time: ReadableTimeString): void;
     keydownOnInput(event: KeyboardEvent): void;

package/lib/formly/field/value/date/datetime.field.d.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { LabeledFieldConfig, DescriptionFieldConfig } from '../../field';
+import { DbxDateTimeFieldConfig, DateTimePickerConfiguration } from './datetime.field.component';
+export interface DateTimeFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, DbxDateTimeFieldConfig {
+}
+export interface TimeFieldConfig extends Omit<DateTimeFieldConfig, 'showDate'> {
+}
+export declare const TAKE_NEXT_UPCOMING_TIME_CONFIG_OBS: () => Observable<DateTimePickerConfiguration>;
+/**
+ * Same as DateTime field but with the Date input hidden by default.
+ */
+export declare function timeOnlyField(config: Partial<TimeFieldConfig>): FormlyFieldConfig;
+export declare function dateTimeField(config: Partial<DateTimeFieldConfig>): FormlyFieldConfig;

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

@@ -1,3 +1,3 @@
 export * from './date.field.module';
-export * from './date.field';
+export * from './datetime.field';
 export * from './datetime.field.component';

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

@@ -1,7 +1,7 @@
-import { DescriptionFieldConfig, FieldConfig } from '../../field';
+import { DescriptionFieldConfig, LabeledFieldConfig } from '../../field';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { EnumValueFieldOption } from './enum';
-export interface StaticEnumFieldConfig<T> extends FieldConfig, DescriptionFieldConfig {
+export interface StaticEnumFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
     /**
      * Whether or not multiple values can be selected.
      */

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class DbxFormFormlyEnumFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyEnumFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyEnumFieldModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyEnumFieldModule>;
+}

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

@@ -1,2 +1,3 @@
 export * from './enum';
 export * from './enum.field';
+export * from './enum.field.module';

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

@@ -1,5 +1,5 @@
 import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
-import { FieldConfig } from '../field';
-export interface HiddenFieldConfig extends Pick<FieldConfig, 'key' | 'required'> {
+import { LabeledFieldConfig } from '../field';
+export interface HiddenFieldConfig extends Pick<LabeledFieldConfig, 'key' | 'required'> {
 }
 export declare function hiddenField({ key, required }: HiddenFieldConfig): FormlyFieldConfig;

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

@@ -5,3 +5,4 @@ export * from './enum';
 export * from './phone';
 export * from './text';
 export * from './hidden.field';
+export * from './value.module';

package/lib/formly/field/value/phone/_phone.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use '../../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-form-phone-field,
+  .mat-form-field {
+    width: 100%;
+  }
+
+  .mat-form-field {
+    margin-top: 1px;
+
+    button.country-selector {
+      opacity: 100;
+      width: 105px;
+    }
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+  $text-color: theming.get-color-from-palette($foreground, 'text');
+
+  .country-selector.mat-button,
+  .country-list-button.mat-menu-item {
+    color: $text-color;
+  }
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-phone') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

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

@@ -1,24 +1,18 @@
-import { ValidationErrors, FormGroup } from '@angular/forms';
-import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
-import { Maybe } from '@dereekb/util';
+import { FieldType } from '@ngx-formly/material';
+import { FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
 export interface DbxInternationalPhoneFieldConfig {
     preferredCountries?: string[];
     onlyCountries?: string[];
 }
-export interface InternationalPhoneFormlyFieldConfig extends DbxInternationalPhoneFieldConfig, FormlyFieldConfig {
+export interface InternationalPhoneFormlyFieldConfig extends FormlyFieldConfig {
+    phoneField: DbxInternationalPhoneFieldConfig;
 }
 export declare const DEFAULT_PREFERRED_COUNTRIES: string[];
-export declare class DbxInternationalPhoneFieldComponent extends FieldType<InternationalPhoneFormlyFieldConfig> {
-    get fieldInputKey(): string;
-    get fieldFormGroup(): FormGroup;
-    get label(): Maybe<string>;
-    get placeholder(): Maybe<string>;
-    get description(): Maybe<string>;
+export declare class DbxPhoneFieldComponent extends FieldType<InternationalPhoneFormlyFieldConfig & FieldTypeConfig> {
+    get phoneField(): DbxInternationalPhoneFieldConfig;
     get preferredCountries(): string[];
     get onlyCountries(): string[];
-    get required(): boolean;
-    get errors(): Maybe<ValidationErrors>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxInternationalPhoneFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxInternationalPhoneFieldComponent, "ng-component", never, {}, {}, never, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPhoneFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPhoneFieldComponent, "ng-component", never, {}, {}, never, never>;
 }