@dereekb/dbx-form 9.25.16 → 10.0.1

package/lib/formly/field/selection/pickable/pickable.list.field.component.d.ts

@@ -10,12 +10,12 @@ import * as i0 from "@angular/core";
 export declare class DbxPickableListFieldComponent<T> extends AbstractDbxPickableItemFieldDirective<T> {
     onSelectionChange(event: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldComponent<any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldComponent<any>, "ng-component", never, {}, {}, never, never, false, never>;
 }
 export declare class DbxPickableListFieldItemListComponent<T> extends AbstractDbxSelectionListWrapperDirective<PickableItemFieldItem<T>> {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListComponent<any>, "dbx-form-pickable-item-field-item-list", never, {}, {}, never, ["[top]", "[bottom]", "[empty]", "[emptyLoading]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListComponent<any>, "dbx-form-pickable-item-field-item-list", never, {}, {}, never, ["[top]", "[bottom]", "[empty]", "[emptyLoading]"], false, never>;
 }
 /**
  * NOTE: Values input are PickableItemFieldItem<T>, but output values are PickableValueFieldDisplayValue<T>.
@@ -28,12 +28,12 @@ export declare class DbxPickableListFieldItemListViewComponent<T> extends Abstra
     readonly items$: import("rxjs").Observable<any[]>;
     constructor(dbxPickableListFieldComponent: DbxPickableListFieldComponent<T>);
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListViewComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewComponent<any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewComponent<any>, "ng-component", never, {}, {}, never, never, false, never>;
 }
 export declare class DbxPickableListFieldItemListViewItemComponent<T> extends AbstractDbxValueListViewItemComponent<PickableValueFieldDisplayValue<T>> {
     get label(): string;
     get sublabel(): string | undefined;
     get icon(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxPickableListFieldItemListViewItemComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewItemComponent<any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPickableListFieldItemListViewItemComponent<any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/selection/pickable/pickable.util.d.ts

@@ -4,9 +4,9 @@ import { PickableValueFieldDisplayValue } from './pickable';
 import { PickableItemFieldItem, PickableValueFieldsFieldProps } from './pickable.field.directive';
 export declare const filterPickableItemFieldValuesByLabelFilterFunction: SearchStringFilterFunction<PickableValueFieldDisplayValue<any>>;
 export declare function filterPickableItemFieldValuesByLabel<T>(filterText: Maybe<string>, values: PickableValueFieldDisplayValue<T>[]): Observable<T[]>;
-export declare const sortPickableItemsByLabelStringFunction: import("@dereekb/util").SortByStringFunction<PickableItemFieldItem<any, unknown>>;
+export declare const sortPickableItemsByLabelStringFunction: import("@dereekb/util").SortByStringFunction<PickableItemFieldItem<any>>;
 export declare function sortPickableItemsByLabel<T>(chips: PickableItemFieldItem<T>[]): PickableItemFieldItem<T>[];
-export declare type PickableValueFieldValuesConfigForStaticLabeledValues<T, M extends LabeledValue<T>> = Pick<PickableValueFieldsFieldProps<T, M>, 'loadValues' | 'displayForValue' | 'filterValues'>;
+export type PickableValueFieldValuesConfigForStaticLabeledValues<T, M extends LabeledValue<T>> = Pick<PickableValueFieldsFieldProps<T, M>, 'loadValues' | 'displayForValue' | 'filterValues'>;
 export interface PickableValueFieldValuesConfigForStaticLabeledValuesConfig<T, M extends LabeledValue<T>> {
     readonly allOptions: M[];
     readonly unknownOptionLabel?: string;

package/lib/formly/field/selection/searchable/_searchable.scss

@@ -8,9 +8,8 @@
     width: 100%;
   }
 
-  .dbx-searchable-text-field-value.mat-option,
-  .dbx-searchable-text-field-autocomplete .mat-option {
-    padding: 0;
+  .dbx-searchable-text-field-autocomplete > .mat-mdc-option > .mdc-list-item__primary-text {
+    width: 100%;
   }
 
   .dbx-default-searchable-field-display {
@@ -40,12 +39,13 @@
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-selection-searchable') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -53,7 +53,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

package/lib/formly/field/selection/searchable/searchable.chip.field.component.d.ts

@@ -24,5 +24,5 @@ export declare class DbxSearchableChipFieldComponent<T, M = unknown, H extends P
     ngOnDestroy(): void;
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableChipFieldComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableChipFieldComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableChipFieldComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/selection/searchable/searchable.d.ts

@@ -23,7 +23,7 @@ export interface ConfiguredSearchableValueFieldDisplayValue<T, M = unknown> exte
 /**
  * SearchableValueField function for searching values.
  */
-export declare type SearchableValueFieldStringSearchFn<T, M = unknown> = MapFunction<string, Observable<SearchableValueFieldValue<T, M>[]>>;
+export type SearchableValueFieldStringSearchFn<T, M = unknown> = MapFunction<string, Observable<SearchableValueFieldValue<T, M>[]>>;
 /**
  * SearchableValueField function that allows the values a chance to go through another observable for unknown changes.
  *
@@ -31,9 +31,9 @@ export declare type SearchableValueFieldStringSearchFn<T, M = unknown> = MapFunc
  *
  * The value itself should not change. All other fields on the value may change, however.
  */
-export declare type SearchableValueFieldDisplayFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>[], Observable<SearchableValueFieldDisplayValue<T, M>[]>>;
+export type SearchableValueFieldDisplayFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>[], Observable<SearchableValueFieldDisplayValue<T, M>[]>>;
 /**
  * SearchableValueField function for setting anchor values on a field value.
  */
-export declare type SearchableValueFieldAnchorFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>, ClickableAnchor>;
-export declare type SearchableValueFieldHashFn<T, H extends PrimativeKey = PrimativeKey> = SelectionValueHashFunction<T, H>;
+export type SearchableValueFieldAnchorFn<T, M = unknown> = MapFunction<SearchableValueFieldValue<T, M>, ClickableAnchor>;
+export type SearchableValueFieldHashFn<T, H extends PrimativeKey = PrimativeKey> = SelectionValueHashFunction<T, H>;

package/lib/formly/field/selection/searchable/searchable.field.autocomplete.item.component.d.ts

@@ -12,16 +12,16 @@ export declare class DbxSearchableFieldAutocompleteItemComponent<T> implements O
     set displayValue(displayValue: ConfiguredSearchableValueFieldDisplayValue<T>);
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableFieldAutocompleteItemComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableFieldAutocompleteItemComponent<any>, "dbx-searchable-field-autocomplete-item", never, { "displayValue": "displayValue"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableFieldAutocompleteItemComponent<any>, "dbx-searchable-field-autocomplete-item", never, { "displayValue": { "alias": "displayValue"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare abstract class AbstractDbxSearchableFieldDisplayDirective<T> {
     readonly displayValue: ConfiguredSearchableValueFieldDisplayValue<T>;
     constructor(displayValue: ConfiguredSearchableValueFieldDisplayValue<T>);
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSearchableFieldDisplayDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSearchableFieldDisplayDirective<any>, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSearchableFieldDisplayDirective<any>, never, never, {}, {}, never, never, false, never>;
 }
 export declare class DbxDefaultSearchableFieldDisplayComponent<T> extends AbstractDbxSearchableFieldDisplayDirective<T> {
     get icon(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, "dbx-default-searchable-field-display", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDefaultSearchableFieldDisplayComponent<any>, "dbx-default-searchable-field-display", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/selection/searchable/searchable.field.d.ts

@@ -15,7 +15,7 @@ export declare function makeMetaFilterSearchableFieldValueDisplayFn<T extends st
     loadMetaForValues: (values: SearchableValueFieldValue<T, M>[]) => Observable<SearchableValueFieldValue<T, M>[]>;
     makeDisplayForValues: (values: SearchableValueFieldValue<T, M>[]) => Observable<SearchableValueFieldDisplayValue<T, M>[]>;
 }): SearchableValueFieldDisplayFn<T, M>;
-export declare type StringSearchableChipFieldConfig<M = unknown> = Omit<SearchableChipFieldConfig<string, M>, 'allowStringValues'>;
+export type StringSearchableChipFieldConfig<M = unknown> = Omit<SearchableChipFieldConfig<string, M>, 'allowStringValues'>;
 export declare function searchableStringChipField<M = unknown>(config: StringSearchableChipFieldConfig<M>): FormlyFieldConfig;
 export interface SearchableChipFieldConfig<T = unknown, M = unknown, H extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig, SearchableChipValueFieldsFieldProps<T, M, H> {
 }

package/lib/formly/field/selection/searchable/searchable.field.directive.d.ts

@@ -155,5 +155,5 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, M = un
     protected _getValueOnFormControl(valueOnFormControl: ArrayOrValue<T>): T[];
     protected _setValueOnFormControl(values: T[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxSearchableValueFieldDirective<any, any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSearchableValueFieldDirective<any, any, any, any>, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxSearchableValueFieldDirective<any, any, any, any>, never, never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/selection/searchable/searchable.text.field.component.d.ts

@@ -22,5 +22,5 @@ export declare class DbxSearchableTextFieldComponent<T, M = unknown, H extends P
     ngOnDestroy(): void;
     selected(event: MatAutocompleteSelectedEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxSearchableTextFieldComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableTextFieldComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSearchableTextFieldComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

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

@@ -23,8 +23,4 @@ export interface SelectionDisplayValue<T, M = unknown> extends SelectionValue<T,
 /**
  * Used to hash the value from the input pickable value.
  */
-export declare type SelectionValueHashFunction<T, H extends PrimativeKey = PrimativeKey> = MapFunction<T, H>;
-/**
- * @deprecated Use SelectionValueHashFunction
- */
-export declare type SelectionValueHashFn<T, H extends PrimativeKey = PrimativeKey> = SelectionValueHashFunction<T, H>;
+export type SelectionValueHashFunction<T, H extends PrimativeKey = PrimativeKey> = MapFunction<T, H>;

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

@@ -9,7 +9,7 @@ export interface ValueSelectionOptionClear {
     label?: string;
     clear: true;
 }
-export declare type ValueSelectionOption<T> = ValueSelectionOptionWithValue<T> | ValueSelectionOptionClear;
+export type ValueSelectionOption<T> = ValueSelectionOptionWithValue<T> | ValueSelectionOptionClear;
 export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig, MaterialFormFieldConfig {
     /**
      * Whether or not to use the native select.

package/lib/formly/field/selection/sourceselect/_sourceselect.scss

@@ -5,27 +5,17 @@
 // MARK: Mixin
 @mixin core() {
   .dbx-source-select-field-loading {
-    /*
-    position: absolute;
-    bottom: 4px;
-    left: 0;
-    right: 0;
-    */
-
     position: absolute;
     bottom: 0px;
-    left: -12px;
-    right: -12px;
+    left: -16px;
+    right: -16px;
   }
 
   .dbx-source-select-field-content {
     display: flex;
 
-    .dbx-source-select-field-select {
-    }
-
     .dbx-source-select-field-button {
-      margin-top: -16px;
+      margin-top: -12px;
       height: 10px;
       overflow: visible;
     }
@@ -35,12 +25,13 @@
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-source-select') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -48,7 +39,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

package/lib/formly/field/selection/sourceselect/sourceselect.d.ts

@@ -23,7 +23,7 @@ export interface SourceSelectValueGroup<T extends PrimativeKey = PrimativeKey, M
 /**
  * Display value configuration for a SourceSelectValue.
  */
-export declare type SourceSelectDisplayValue<T extends PrimativeKey = PrimativeKey, M = unknown> = Omit<SelectionDisplayValue<T, M>, 'meta'> & Pick<SourceSelectValue<T, M>, 'meta'>;
+export type SourceSelectDisplayValue<T extends PrimativeKey = PrimativeKey, M = unknown> = Omit<SelectionDisplayValue<T, M>, 'meta'> & Pick<SourceSelectValue<T, M>, 'meta'>;
 /**
  * Display value configuration for a SourceSelectValue.
  */
@@ -47,15 +47,15 @@ export interface SourceSelectOptions<T extends PrimativeKey = PrimativeKey, M =
 /**
  * Returns an observable that loads all the display info for the input values.
  */
-export declare type SourceSelectDisplayFunction<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<SourceSelectValue<T, M>[], Observable<SourceSelectDisplayValue<T, M>[]>>;
+export type SourceSelectDisplayFunction<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<SourceSelectValue<T, M>[], Observable<SourceSelectDisplayValue<T, M>[]>>;
 /**
  * Reads the value from the input meta value. Should always return the same value.
  */
-export declare type SourceSelectMetaValueReader<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<M, T>;
+export type SourceSelectMetaValueReader<T extends PrimativeKey = PrimativeKey, M = unknown> = MapFunction<M, T>;
 /**
  * Returns an observable that loads the metadata of the input values.
  */
-export declare type SourceSelectValueMetaLoader<T extends PrimativeKey = PrimativeKey, M = unknown> = FactoryWithRequiredInput<Observable<M[]>, T[]>;
+export type SourceSelectValueMetaLoader<T extends PrimativeKey = PrimativeKey, M = unknown> = FactoryWithRequiredInput<Observable<M[]>, T[]>;
 export interface SourceSelectOpenFunctionParams {
     /**
      * Origin of the button for the SourceSelect
@@ -65,7 +65,7 @@ export interface SourceSelectOpenFunctionParams {
 /**
  * Returns an observable that returns an array of meta values to be added to the selection.
  */
-export declare type SourceSelectOpenFunction<M = unknown> = FactoryWithRequiredInput<Observable<SourceSelectOpenSourceResult<M>>, SourceSelectOpenFunctionParams>;
+export type SourceSelectOpenFunction<M = unknown> = FactoryWithRequiredInput<Observable<SourceSelectOpenSourceResult<M>>, SourceSelectOpenFunctionParams>;
 /**
  * Returns an observable that returns an array of meta values to be added to the selection.
  */
@@ -82,7 +82,7 @@ export interface SourceSelectOpenSourceResult<M = unknown> {
 /**
  * Function used to return an observable for an array of SourceSelectLoadSource values.
  */
-export declare type SourceSelectLoadSourcesFunction<M = unknown> = Factory<Observable<SourceSelectLoadSource<M>[]>>;
+export type SourceSelectLoadSourcesFunction<M = unknown> = Factory<Observable<SourceSelectLoadSource<M>[]>>;
 /**
  * Source that has a label and an observable of meta values.
  */

package/lib/formly/field/selection/sourceselect/sourceselect.field.component.d.ts

@@ -89,5 +89,5 @@ export declare class DbxFormSourceSelectFieldComponent<T extends PrimativeKey =
     private addToOpenSourceMap;
     private addToCurrentValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormSourceSelectFieldComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormSourceSelectFieldComponent<any, any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormSourceSelectFieldComponent<any, any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/selection/sourceselect/sourceselect.field.module.d.ts

@@ -14,7 +14,7 @@ import * as i12 from "@dereekb/dbx-core";
 import * as i13 from "@dereekb/dbx-web";
 import * as i14 from "@angular/material/chips";
 import * as i15 from "@angular/material/icon";
-import * as i16 from "@angular/flex-layout";
+import * as i16 from "@ngbracket/ngx-layout";
 import * as i17 from "@ngx-formly/core";
 export declare class DbxFormFormlySourceSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlySourceSelectModule, never>;

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

@@ -72,12 +72,13 @@
   }
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-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);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -85,7 +86,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -6,7 +6,7 @@ import { FieldType } from '@ngx-formly/material';
 import { Editor } from 'ngx-editor';
 import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
-export declare type TextEditorComponentFieldProps = FormlyFieldProps;
+export type TextEditorComponentFieldProps = FormlyFieldProps;
 export declare class DbxTextEditorFieldComponent<T extends TextEditorComponentFieldProps = TextEditorComponentFieldProps> extends FieldType<FieldTypeConfig<T>> implements OnInit, OnDestroy {
     readonly compact: CompactContextStore;
     private _editor?;
@@ -21,5 +21,5 @@ export declare class DbxTextEditorFieldComponent<T extends TextEditorComponentFi
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTextEditorFieldComponent<any>, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextEditorFieldComponent<any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTextEditorFieldComponent<any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/value/_value.scss

@@ -1,6 +1,7 @@
 @use './array/array';
 @use './boolean/boolean';
 @use './date/date';
+@use './number/number';
 @use './phone/phone';
 @use './text/text';
 
@@ -8,22 +9,25 @@
   @include array.core();
   @include boolean.core();
   @include date.core();
+  @include number.core();
   @include phone.core();
   @include text.core();
 }
 
-@mixin all-value-typography($typography-config) {
-  @include array.typography($typography-config);
-  @include boolean.typography($typography-config);
-  @include date.typography($typography-config);
-  @include phone.typography($typography-config);
-  @include text.typography($typography-config);
+@mixin all-value-typography($theme-config) {
+  @include array.typography($theme-config);
+  @include boolean.typography($theme-config);
+  @include date.typography($theme-config);
+  @include number.typography($theme-config);
+  @include phone.typography($theme-config);
+  @include text.typography($theme-config);
 }
 
 @mixin all-value-theme($theme-config) {
   @include array.theme($theme-config);
   @include boolean.theme($theme-config);
   @include date.theme($theme-config);
+  @include number.theme($theme-config);
   @include phone.theme($theme-config);
   @include text.theme($theme-config);
 }

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

@@ -58,14 +58,19 @@
   .dbx-form-repeat-array-bar {
     background: none;
   }
+
+  .dbx-form-repeat-array-drag-button.mdc-button > .mat-icon {
+    margin: 0;
+  }
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-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);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -73,7 +78,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -9,7 +9,7 @@ export interface DbxFormRepeatArrayPair<T = unknown> extends IndexRef {
 export interface DbxFormRepeatArrayFieldConfigPair<T = unknown> extends Partial<DbxFormRepeatArrayPair<T>> {
     fieldConfig: FormlyFieldConfig;
 }
-export declare type DbxFormRepeatArrayAddTemplateFunction<T> = FactoryWithRequiredInput<Partial<Maybe<T>>, number>;
+export type DbxFormRepeatArrayAddTemplateFunction<T> = FactoryWithRequiredInput<Partial<Maybe<T>>, number>;
 export interface DbxFormRepeatArrayConfig<T = unknown> extends Pick<FormlyFieldProps, 'maxLength' | 'label' | 'description'> {
     labelForField?: string | FactoryWithRequiredInput<string, DbxFormRepeatArrayFieldConfigPair<T>>;
     /**
@@ -87,5 +87,5 @@ export declare class DbxFormRepeatArrayTypeComponent<T = unknown> extends FieldA
     drop(event: CdkDragDrop<unknown>): void;
     labelForItem(fieldConfig: FormlyFieldConfig, i: number): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormRepeatArrayTypeComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormRepeatArrayTypeComponent<any>, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFormRepeatArrayTypeComponent<any>, "ng-component", never, {}, {}, never, never, false, never>;
 }

package/lib/formly/field/value/boolean/_boolean.scss

@@ -4,8 +4,8 @@
 
 // MARK: Mixin
 @mixin core() {
-  .mat-form-field.mat-form-field-type-toggle {
-    .mat-form-field-wrapper .mat-form-field-subscript-wrapper {
+  .mat-mdc-form-field.mat-mdc-form-field-type-toggle {
+    .mat-mdc-form-field-wrapper .mat-mdc-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;
     }
@@ -15,12 +15,13 @@
 @mixin color($theme-config) {
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-typography-config) {
 }
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-value-boolean') {
     $color: theming.get-color-config($theme-config);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -28,7 +29,7 @@
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -12,27 +12,20 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
   .dbx-mat-form-date-time-field-wrapper {
     padding-top: 10px; // padding for label
 
-    > formly-wrapper-mat-form-field {
-      > .mat-form-field > .mat-form-field-wrapper {
-        > .mat-form-field-flex {
-          padding-top: 0;
-
-          > .mat-form-field-infix {
-            border: none;
-          }
-        }
+    > formly-wrapper-mat-form-field > .mat-mdc-form-field > .mat-mdc-text-field-wrapper {
+      padding: 0;
+
+      > .mat-mdc-form-field-flex {
+        padding-top: 0;
+        @include theming.hide-mdc-notched-outline-border;
 
-        > .mat-form-field-subscript-wrapper {
-          margin-top: 2px;
+        > .mdc-notched-outline .mdc-notched-outline__leading {
+          width: 9px; // align the field wrapper's title with the first input's title
         }
       }
-    }
 
-    .dbx-datetime-row-field > .mat-form-field-wrapper {
-      padding-bottom: 4px;
-
-      > .mat-form-field-subscript-wrapper {
-        margin-top: 0px;
+      > .mat-mdc-form-field-flex > .mat-mdc-form-field-infix {
+        padding-bottom: 0;
       }
     }
   }
@@ -45,7 +38,7 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
       pointer-events: none;
     }
 
-    .dbx-datetime-timezone-button .mat-button {
+    .dbx-datetime-timezone-button .mat-mdc-button {
       font-size: 18px;
     }
   }
@@ -55,16 +48,9 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     justify-content: center;
     align-items: center;
 
-    .dbx-datetime-row-field {
-      width: calc(100% - #{$dbx-datetime-button-width});
-    }
-
-    .dbx-datetime-row-field.dbx-datetime-row-field-full-width {
-      width: 100%;
-    }
-
-    &.dbx-datetime-hint-row {
-      margin-top: -6px;
+    .mat-mdc-form-field-subscript-wrapper {
+      // hide the subscript wrapper since it is not used here
+      height: 0;
     }
   }
 
@@ -88,10 +74,6 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     justify-items: left;
   }
 
-  .dbx-datetime-hint-row {
-    // margin-left: 12px;
-  }
-
   .dbx-fixeddaterange-field {
     .mat-calendar,
     .dbx-fixeddaterange-field-input {
@@ -108,7 +90,7 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     }
   }
 
-  .mat-form-field.dbx-fixeddaterange-field-input {
+  .mat-mdc-form-field.dbx-fixeddaterange-field-input {
     display: block;
   }
 
@@ -117,11 +99,11 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     pointer-events: none;
   }
 
-  .dbx-form-fixed-date-range-field-wrapper .mat-form-field-appearance-outline .mat-form-field-infix {
+  .dbx-form-fixed-date-range-field-wrapper .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-infix {
     padding: 4px 0;
   }
 
-  .dbx-form-fixed-date-range-field-wrapper .mat-form-field-appearance-outline > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix {
+  .dbx-form-fixed-date-range-field-wrapper .mat-mdc-form-field-appearance-outline > .mat-mdc-form-field-wrapper > .mat-mdc-form-field-flex > .mat-mdc-form-field-infix {
     padding: 0;
   }
 }
@@ -138,12 +120,13 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
   }
 }
 
-@mixin typography($typography-config) {
+@mixin typography($theme-config-or-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);
+    $density: theming.get-density-config($theme-config);
     $typography: theming.get-typography-config($theme-config);
 
     @if $color !=null {
@@ -151,7 +134,7 @@ $dbx-datetime-row-width: 40px + ($dbx-datetime-button-spacing * 2); // times 2 f
     }
 
     @if $typography !=null {
-      @include typography($typography);
+      @include typography($theme-config);
     }
   }
 }

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

@@ -14,7 +14,7 @@ import * as i12 from "@angular/material/menu";
 import * as i13 from "@dereekb/dbx-core";
 import * as i14 from "@angular/material/chips";
 import * as i15 from "@angular/material/icon";
-import * as i16 from "@angular/flex-layout";
+import * as i16 from "@ngbracket/ngx-layout";
 import * as i17 from "@ngx-formly/core";
 import * as i18 from "../../wrapper/form.wrapper.module";
 export declare class DbxFormFormlyDateFieldModule {

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

@@ -26,8 +26,8 @@ export declare enum DbxDateTimeFieldTimeMode {
      */
     NONE = "none"
 }
-export declare type DbxDateTimePickerConfiguration = Omit<DateTimeMinuteConfig, 'date'>;
-export declare type DbxDateTimeFieldSyncType = 'before' | 'after';
+export type DbxDateTimePickerConfiguration = Omit<DateTimeMinuteConfig, 'date'>;
+export type DbxDateTimeFieldSyncType = 'before' | 'after';
 export interface DbxDateTimeFieldSyncField {
     /**
      * Field key/path to sync with/against.
@@ -133,12 +133,6 @@ export interface DbxDateTimeFieldProps extends FormlyFieldProps {
      * Custom presets to show in the dropdown.
      */
     presets?: ObservableOrValueGetter<DateTimePresetConfiguration[]>;
-    /**
-     * Used for returning the configuration observable.
-     *
-     * @deprecated Use pickerConfig instead.
-     */
-    getConfigObs?: ObservableOrValueGetter<DbxDateTimePickerConfiguration>;
 }
 export interface DbxDateTimeFieldSyncParsedField extends Pick<DbxDateTimeFieldSyncField, 'syncType'> {
     control: AbstractControl<Maybe<Date | ISO8601DateString>>;
@@ -225,9 +219,5 @@ export declare class DbxDateTimeFieldComponent extends FieldType<FieldTypeConfig
     removeTime(): void;
     setFullDay(fullDay: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDateTimeFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDateTimeFieldComponent, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDateTimeFieldComponent, "ng-component", never, {}, {}, never, never, false, never>;
 }
-/**
- * @deprecated Use DbxDateTimePickerConfiguration instead.
- */
-export declare type DateTimePickerConfiguration = DbxDateTimePickerConfiguration;