@dereekb/dbx-form 9.16.4 → 9.17.1

package/lib/formly/field/selection/_selection.scss

@@ -1,17 +1,21 @@
+@use './list/list';
 @use './pickable/pickable';
 @use './searchable/searchable';
 
 @mixin all-selection-core() {
+  @include list.core();
   @include pickable.core();
   @include searchable.core();
 }
 
 @mixin all-selection-typography($typography-config) {
+  @include list.typography($typography-config);
   @include pickable.typography($typography-config);
   @include searchable.typography($typography-config);
 }
 
 @mixin all-selection-theme($theme-config) {
+  @include list.theme($theme-config);
   @include pickable.theme($theme-config);
   @include searchable.theme($theme-config);
 }

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

@@ -1,3 +1,4 @@
+export * from './list';
 export * from './pickable';
 export * from './searchable';
 export * from './selection';

package/lib/formly/field/selection/list/_list.scss

@@ -0,0 +1,33 @@
+@use '../../../../style/theming';
+
+// MARK: Variables
+$dbx-list-item-field-content-max-height: 300px;
+
+// MARK: Mixin
+@mixin core() {
+  .dbx-list-item-field-content {
+    max-height: $dbx-list-item-field-content-max-height;
+    overflow: auto;
+  }
+}
+
+@mixin color($theme-config) {
+}
+
+@mixin typography($typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-form-field-selection-list') {
+    $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/selection/list/index.d.ts

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

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

@@ -0,0 +1,53 @@
+import { OnDestroy, OnInit, Type } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { AbstractDbxSelectionListWrapperDirective, ListSelectionState, DbxValueListItemDecisionFunction } from '@dereekb/dbx-web';
+import { ListLoadingState } from '@dereekb/rxjs';
+import { Maybe, PrimativeKey, ReadKeyFunction } from '@dereekb/util';
+import { FormlyFieldProps, FieldType, FieldTypeConfig } from '@ngx-formly/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface DbxItemListFieldProps<T = unknown, C extends AbstractDbxSelectionListWrapperDirective<T> = AbstractDbxSelectionListWrapperDirective<T>, K extends PrimativeKey = PrimativeKey> extends Pick<FormlyFieldProps, 'label' | 'description'> {
+    /**
+     * list to load/initialize
+     */
+    readonly listComponentClass: Observable<Type<C>>;
+    /**
+     * Read key function to read the identifier from the input
+     */
+    readonly readKey: ReadKeyFunction<T, K>;
+    /**
+     * Observable that provides the items to select.
+     */
+    readonly state$: Observable<ListLoadingState<T>>;
+    /**
+     * Function that signals to load more items.
+     */
+    readonly loadMore?: () => void;
+}
+/**
+ * Used for picking items by identifier from a DbxList component.
+ */
+export declare class DbxItemListFieldComponent<T = unknown, C extends AbstractDbxSelectionListWrapperDirective<T> = AbstractDbxSelectionListWrapperDirective<T>, K extends PrimativeKey = PrimativeKey> extends FieldType<FieldTypeConfig<DbxItemListFieldProps<T, C, K>>> implements OnInit, OnDestroy {
+    private _selectionEventSub;
+    private _loadMoreSub;
+    private _formControlObs;
+    readonly formControl$: Observable<AbstractControl<any, any>>;
+    readonly _formControlValue$: Observable<Maybe<K[]>>;
+    readonly values$: Observable<K[]>;
+    private _listComponentClassObs;
+    readonly listComponentClass$: Observable<Type<C>>;
+    readonly config$: Observable<DbxInjectionComponentConfig<C>>;
+    readonly isSelectedModifierFunction$: Observable<DbxValueListItemDecisionFunction<T>>;
+    get label(): string | undefined;
+    get description(): string | undefined;
+    get listComponentClass(): Observable<Type<C>>;
+    get readKey(): ReadKeyFunction<T, K>;
+    get loadMore(): (() => void) | undefined;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    updateForSelection(list: ListSelectionState<T>): void;
+    setValues(values: Maybe<K[]>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxItemListFieldComponent<any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxItemListFieldComponent<any, any, any>, "ng-component", never, {}, {}, never, never, false>;
+}

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

@@ -0,0 +1,8 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { LabeledFieldConfig } from '../../field';
+import { DbxItemListFieldProps } from './list.field.component';
+import { AbstractDbxSelectionListWrapperDirective } from '@dereekb/dbx-web';
+import { PrimativeKey } from '@dereekb/util';
+export interface DbxListFieldConfig<T = unknown, C extends AbstractDbxSelectionListWrapperDirective<T> = AbstractDbxSelectionListWrapperDirective<T>, K extends PrimativeKey = PrimativeKey> extends LabeledFieldConfig, DbxItemListFieldProps<T, C, K> {
+}
+export declare function dbxListField<T = unknown, C extends AbstractDbxSelectionListWrapperDirective<T> = AbstractDbxSelectionListWrapperDirective<T>, K extends PrimativeKey = PrimativeKey>(config: DbxListFieldConfig<T, C, K>): FormlyFieldConfig;

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

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./list.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 "@angular/material/divider";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@angular/material/input";
+import * as i8 from "@angular/material/form-field";
+import * as i9 from "@angular/material/autocomplete";
+import * as i10 from "@angular/material/icon";
+import * as i11 from "@dereekb/dbx-core";
+import * as i12 from "@ngx-formly/core";
+export declare class DbxFormFormlyDbxListFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlyDbxListFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlyDbxListFieldModule, [typeof i1.DbxItemListFieldComponent], [typeof i2.CommonModule, typeof i3.DbxTextModule, typeof i3.DbxLoadingModule, typeof i3.DbxButtonModule, typeof i4.FormsModule, typeof i5.MatDividerModule, typeof i6.MatButtonModule, typeof i7.MatInputModule, typeof i8.MatFormFieldModule, typeof i4.ReactiveFormsModule, typeof i9.MatAutocompleteModule, typeof i10.MatIconModule, typeof i11.DbxInjectionComponentModule, typeof i3.DbxListLayoutModule, typeof i12.FormlyModule], [typeof i1.DbxItemListFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlyDbxListFieldModule>;
+}

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

@@ -97,7 +97,7 @@ export declare class AbstractDbxPickableItemFieldDirective<T, M = unknown, H ext
     readonly filterInputValue$: Observable<Maybe<string>>;
     readonly filterInputValueString$: Observable<Maybe<string>>;
     readonly loadResultsDisplayValuesState$: Observable<LoadingState<PickableValueFieldDisplayValueWithHash<T, M, H>[]>>;
-    readonly _formControlValue: Observable<T | T[]>;
+    readonly _formControlValue$: Observable<T | T[]>;
     readonly loadResultsDisplayValues$: Observable<PickableValueFieldDisplayValueWithHash<T, M, H>[]>;
     /**
      * Current values in the form control.

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

@@ -88,7 +88,7 @@ export declare abstract class AbstractDbxSearchableValueFieldDirective<T, M = un
     readonly singleValueSyncSubscription: SubscriptionObject;
     readonly searchContext: LoadingStateContextInstance<unknown, LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>>;
     readonly searchResults$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>;
-    readonly _formControlValue: Observable<T | T[]>;
+    readonly _formControlValue$: Observable<T | T[]>;
     readonly values$: Observable<T[]>;
     readonly displayValuesState$: Observable<LoadingState<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>>;
     readonly displayValues$: Observable<ConfiguredSearchableValueFieldDisplayValue<T, M>[]>;

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

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "./pickable/pickable.field.module";
-import * as i3 from "./searchable/searchable.field.module";
+import * as i2 from "./list/list.field.module";
+import * as i3 from "./pickable/pickable.field.module";
+import * as i4 from "./searchable/searchable.field.module";
 export declare class DbxFormFormlySelectionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFormFormlySelectionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySelectionModule, never, [typeof i1.CommonModule], [typeof i2.DbxFormFormlyPickableFieldModule, typeof i3.DbxFormFormlySearchableFieldModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFormFormlySelectionModule, never, [typeof i1.CommonModule], [typeof i2.DbxFormFormlyDbxListFieldModule, typeof i3.DbxFormFormlyPickableFieldModule, typeof i4.DbxFormFormlySearchableFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFormFormlySelectionModule>;
 }

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

@@ -1,4 +1,5 @@
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { TrackByFunction } from '@angular/core';
 import { DecisionFunction, FactoryWithRequiredInput, IndexRef, Maybe } from '@dereekb/util';
 import { FieldArrayTypeConfig, FieldArrayType, FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core';
 import * as i0 from "@angular/core";
@@ -14,6 +15,10 @@ export interface DbxFormRepeatArrayConfig<T = unknown> extends Pick<FormlyFieldP
      * Text for the add button.
      */
     addText?: string;
+    /**
+     * Text for the duplicate button.
+     */
+    duplicateText?: string;
     /**
      * Text for the remove button.
      */
@@ -30,26 +35,39 @@ export interface DbxFormRepeatArrayConfig<T = unknown> extends Pick<FormlyFieldP
      * True by default.
      */
     allowAdd?: boolean;
+    /**
+     * Whether or not to allow duplicateing items. Can optionally pass a decision function that decides whether or not a specific item can be removed.
+     */
+    allowDuplicate?: boolean | DecisionFunction<DbxFormRepeatArrayPair<T>>;
     /**
      * Whether or not to allow removing items. Can optionally pass a decision function that decides whether or not a specific item can be removed.
      */
     allowRemove?: boolean | DecisionFunction<DbxFormRepeatArrayPair<T>>;
+    /**
+     * Adds the duplicate to the end of the values
+     */
+    addDuplicateToEnd?: boolean;
 }
 export declare class DbxFormRepeatArrayTypeComponent<T = unknown> extends FieldArrayType<FieldArrayTypeConfig<DbxFormRepeatArrayConfig>> {
     private _labelForField;
     private _allowRemove;
+    private _allowDuplicate;
     get repeatArrayField(): DbxFormRepeatArrayConfig;
     get label(): string;
     get description(): Maybe<string>;
+    get duplicateText(): string;
     get addText(): string;
     get removeText(): string;
     get max(): Maybe<number>;
     get count(): number;
     get disableRearrange(): boolean;
     get allowAdd(): boolean;
+    get addDuplicateToEnd(): boolean;
     allowRemove(i: number): boolean;
+    allowDuplicate(i: number): boolean;
     get addItemDisabled(): boolean;
     get canAddItem(): boolean;
+    readonly trackByFunction: TrackByFunction<FormlyFieldConfig>;
     /**
      * Moves the target index up one value.
      *
@@ -57,6 +75,7 @@ export declare class DbxFormRepeatArrayTypeComponent<T = unknown> extends FieldA
      */
     moveUp(index: number): void;
     moveDown(index: number): void;
+    duplicate(index: number): void;
     swapIndexes(currentIndex: number, targetIndex: number): void;
     drop(event: CdkDragDrop<unknown>): void;
     labelForItem(fieldConfig: FormlyFieldConfig, i: number): string;

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

@@ -18,9 +18,12 @@ export declare function repeatArrayField<T = unknown>(config: RepeatArrayFieldCo
         labelForField: string | import("@dereekb/util").FactoryWithRequiredInput<string, import("./array.field.component").DbxFormRepeatArrayFieldConfigPair<T>> | undefined;
         addText: string | undefined;
         removeText: string | undefined;
+        duplicateText: string | undefined;
         disableRearrange: boolean | undefined;
         allowAdd: boolean | undefined;
         allowRemove: boolean | import("@dereekb/util").DecisionFunction<import("./array.field.component").DbxFormRepeatArrayPair<T>> | undefined;
+        allowDuplicate: boolean | import("@dereekb/util").DecisionFunction<import("./array.field.component").DbxFormRepeatArrayPair<T>> | undefined;
+        addDuplicateToEnd: boolean | undefined;
     };
     expressions: {
         [property: string]: string | import("rxjs").Observable<any> | ((field: FormlyFieldConfig<import("@ngx-formly/core").FormlyFieldProps & {

package/mapbox/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@dereekb/dbx-form/mapbox",
-  "version": "9.16.4",
+  "version": "9.17.1",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
     "@angular/forms": "^14.0.0",
-    "@dereekb/dbx-web": "9.16.4",
+    "@dereekb/dbx-web": "9.17.1",
     "@ngx-formly/core": "6.0.0-rc.2",
     "@ngx-formly/material": "6.0.0-rc.2",
     "@ng-web-apis/geolocation": "^2.0.0",
     "mapbox-gl": "^2.9.2",
-    "@dereekb/dbx-web/mapbox": "9.16.4",
-    "@dereekb/dbx-form": "9.16.4"
+    "@dereekb/dbx-web/mapbox": "9.17.1",
+    "@dereekb/dbx-form": "9.17.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "9.16.4",
+  "version": "9.17.1",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "lodash.clonedeep": "^4.5.0",
-    "@dereekb/dbx-core": "9.16.4",
+    "@dereekb/dbx-core": "9.17.1",
     "@angular/material": "^14.0.0",
-    "@dereekb/dbx-web": "9.16.4",
+    "@dereekb/dbx-web": "9.17.1",
     "@angular/forms": "^14.0.0",
     "@ngx-formly/core": "6.0.0-rc.2",
     "@ngx-formly/material": "6.0.0-rc.2",
     "change-case": "^4.1.2",
     "ngx-editor": "^15.0.0",
     "ngx-mat-intl-tel-input": "^5.0.0",
-    "@dereekb/model": "9.16.4"
+    "@dereekb/model": "9.17.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"