feat: added valueSelectionField()

- deprecated staticEnumField()

apps/demo/src/app/modules/doc/modules/form/container/selection.component.html

@@ -1,6 +1,11 @@
 <dbx-content-container>
   <doc-feature-layout header="Selection Fields" hint="">
     <!-- Examples -->
+    <h3>Select</h3>
+    <p>The typical select fields.</p>
+    <doc-feature-example header="valueSelectionField()" hint="A field that lets you select static options.">
+      <doc-form-example-form [dbxFormlyFields]="valueSelectionFields"></doc-form-example-form>
+    </doc-feature-example>
     <h3>Pickable</h3>
     <p>Pickable fields are use to display a list of preset/static values that the user can choose from.</p>
     <doc-feature-example header="pickableItemChipField()" hint="A field that lets you choose items from a set of chips.">

apps/demo/src/app/modules/doc/modules/form/container/selection.component.ts

@@ -2,7 +2,7 @@ import { safeDetectChanges } from '@dereekb/dbx-core';
 import { BehaviorSubject, map, Observable, of, delay } from 'rxjs';
 import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { filterPickableItemFieldValuesByLabel, pickableItemChipField, pickableItemListField, searchableChipField, searchableStringChipField, searchableTextField, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldStringSearchFn, SearchableValueFieldValue } from '@dereekb/dbx-form';
+import { filterPickableItemFieldValuesByLabel, pickableItemChipField, pickableItemListField, searchableChipField, searchableStringChipField, searchableTextField, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldStringSearchFn, SearchableValueFieldValue, valueSelectionField, ValueSelectionOption } from '@dereekb/dbx-form';
 import { randomDelayWithRandomFunction } from '@dereekb/rxjs';
 import { randomArrayFactory, randomNumberFactory } from '@dereekb/util';
 import { DocFormExampleSelectionValue, DocFormExampleSelectionValueId, EXAMPLE_DISPLAY_FOR_SELECTION_VALUE, EXAMPLE_DISPLAY_FOR_SELECTION_VALUE_WITH_CUSTOM_DISPLAYS, EXAMPLE_SEARCH_FOR_SELECTION_VALUE, MAKE_EXAMPLE_SELECTION_VALUE } from '../component/selection.example';
@@ -33,13 +33,52 @@ export const DISPLAY_FOR_STRING_VALUE: SearchableValueFieldDisplayFn<string> = (
 
 export const MAKE_RANDOM_STRING_VALUES = randomArrayFactory({ random: { min: 40, max: 40 }, make: () => ({ value: String(MAKE_EXAMPLE_SELECTION_VALUE().value) }) });
 
+export const VALUE_SELECTION_VALUES: ValueSelectionOption<number>[] = [
+  {
+    label: 'First Value',
+    value: 100
+  },
+  {
+    label: 'Second Value',
+    value: 200
+  },
+  {
+    label: 'Third Value',
+    value: 300
+  }
+];
+
 @Component({
   templateUrl: './selection.component.html'
 })
 export class DocFormSelectionComponent implements OnDestroy {
   private _searchStrings = new BehaviorSubject<TestStringSearchFunction>((search) => ['A', 'B', 'C', 'D'].map((x) => `${search} ${x}`.trim()));
   readonly searchFn$ = this._searchStrings.asObservable();
 
+  readonly valueSelectionFields: FormlyFieldConfig[] = [
+    valueSelectionField({
+      key: 'selectOne',
+      label: 'Select One',
+      description: 'This is a simple selection field for picking a single value.',
+      options: VALUE_SELECTION_VALUES
+    }),
+    valueSelectionField({
+      key: 'selectMultiple',
+      label: 'Select Multiple',
+      description: 'This is a simple selection field for picking an array of values.',
+      options: VALUE_SELECTION_VALUES,
+      multiple: true,
+      selectAllOption: true
+    }),
+    valueSelectionField({
+      key: 'selectOneNative',
+      label: 'Select Native',
+      description: 'This is a native selection field.',
+      options: VALUE_SELECTION_VALUES,
+      native: true
+    })
+  ];
+
   readonly pickableItemChipFields: FormlyFieldConfig[] = [
     pickableItemChipField({
       key: 'stringItemChips',

packages/dbx-form/src/lib/formly/field/selection/index.ts

@@ -1,4 +1,5 @@
 export * from './pickable';
 export * from './searchable';
 export * from './selection';
+export * from './selection.field';
 export * from './selection.module';

packages/dbx-form/src/lib/formly/field/selection/selection.field.ts

@@ -0,0 +1,37 @@
+import { Maybe } from '@dereekb/util';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { DescriptionFieldConfig, formlyField, LabeledFieldConfig, propsForFieldConfig } from '../field';
+
+export interface ValueSelectionOption<T> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
+  native?: boolean;
+  options: ValueSelectionOption<T>[];
+  multiple?: boolean;
+  selectAllOption?: true | string;
+}
+
+export function valueSelectionField<T>(config: ValueSelectionFieldConfig<T>): FormlyFieldConfig {
+  const { key, native = false, selectAllOption: inputSelectAllOption } = config;
+  let selectAllOptionConfig: Maybe<{ selectAllOption: string }>;
+
+  if (inputSelectAllOption) {
+    selectAllOptionConfig = {
+      selectAllOption: typeof inputSelectAllOption === 'boolean' ? 'Select All' : (inputSelectAllOption as string)
+    };
+  }
+
+  return formlyField({
+    key,
+    type: native ? 'native-select' : 'select',
+    ...propsForFieldConfig(config, {
+      options: config.options,
+      multiple: config.multiple ?? false,
+      ...selectAllOptionConfig
+    })
+  });
+}

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

@@ -2,6 +2,9 @@ import { formlyField, DescriptionFieldConfig, LabeledFieldConfig } from '../../f
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { EnumValueFieldOption } from './enum';
 
+/**
+ * @deprecated
+ */
 export interface StaticEnumFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
   /**
    * Whether or not multiple values can be selected.
@@ -13,6 +16,9 @@ export interface StaticEnumFieldConfig<T> extends LabeledFieldConfig, Descriptio
   options: EnumValueFieldOption<T>[];
 }
 
+/**
+ * @deprecated use valueSelectionField instead.
+ */
 export function staticEnumField<T = unknown>({ key, label = '', placeholder = '', description, multiple = false, required = false, options }: StaticEnumFieldConfig<T>): FormlyFieldConfig {
   const fieldConfig: FormlyFieldConfig = formlyField({
     key,

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

@@ -1,3 +1,6 @@
+/**
+ * @deprecated use ValueSelectionOption instead.
+ */
 export interface EnumValueFieldOption<T> {
   value: T;
   label: string;