fix(admin-ui): Fix facet-value-form-input when used with custom fields

packages/admin-ui/src/lib/core/src/shared/components/facet-value-selector/facet-value-selector.component.ts

@@ -60,6 +60,7 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
     @Output() selectedValuesChange = new EventEmitter<FacetValue.Fragment[]>();
     @Input() facets: FacetWithValues.Fragment[];
     @Input() readonly = false;
+    @Input() transformControlValueAccessorValue: (value: FacetValueSeletorItem[]) => any[] = value => value;
 
     @ViewChild(NgSelectComponent) private ngSelect: NgSelectComponent;
 
@@ -67,7 +68,7 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
     onChangeFn: (val: any) => void;
     onTouchFn: () => void;
     disabled = false;
-    value: string[];
+    value: Array<string | FacetValue.Fragment>;
     constructor(private dataService: DataService) {}
 
     ngOnInit() {
@@ -80,7 +81,8 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
         }
         this.selectedValuesChange.emit(selected.map(s => s.value));
         if (this.onChangeFn) {
-            this.onChangeFn(JSON.stringify(selected.map(s => s.id)));
+            const transformedValue = this.transformControlValueAccessorValue(selected);
+            this.onChangeFn(transformedValue);
         }
     }
 

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.html

@@ -3,4 +3,5 @@
     [readonly]="readonly"
     [facets]="facets"
     [formControl]="formControl"
+    [transformControlValueAccessorValue]="valueTransformFn"
 ></vdr-facet-value-selector>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component.ts

@@ -7,6 +7,7 @@ import { shareReplay } from 'rxjs/operators';
 import { FormInputComponent, InputComponentConfig } from '../../../common/component-registry-types';
 import { FacetWithValues } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
+import { FacetValueSeletorItem } from '../../components/facet-value-selector/facet-value-selector.component';
 
 /**
  * @description
@@ -37,4 +38,13 @@ export class FacetValueFormInputComponent implements FormInputComponent, OnInit
             .mapSingle(data => data.facets.items)
             .pipe(shareReplay(1));
     }
+
+    valueTransformFn = (values: FacetValueSeletorItem[]) => {
+        const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
+        if (isUsedInConfigArg) {
+            return JSON.stringify(values.map(s => s.id));
+        } else {
+            return values;
+        }
+    };
 }