@vendure/admin-ui 1.6.2 → 1.6.5

package/fesm2015/vendure-admin-ui-core.js

@@ -8569,7 +8569,7 @@ JsonEditorFormInputComponent.propDecorators = {
  */
 function getConfigArgValue(value) {
     try {
-        return value ? JSON.parse(value) : undefined;
+        return value != null ? JSON.parse(value) : undefined;
     }
     catch (e) {
         return value;
@@ -8639,7 +8639,7 @@ function getDefaultConfigArgValue(arg) {
     if (arg.list) {
         return [];
     }
-    if (arg.defaultValue) {
+    if (arg.defaultValue != null) {
         return arg.defaultValue;
     }
     const type = arg.type;
@@ -8975,6 +8975,15 @@ class FacetValueFormInputComponent {
     constructor(dataService) {
         this.dataService = dataService;
         this.isListInput = true;
+        this.valueTransformFn = (values) => {
+            const isUsedInConfigArg = this.config.__typename === 'ConfigArgDefinition';
+            if (isUsedInConfigArg) {
+                return JSON.stringify(values.map(s => s.id));
+            }
+            else {
+                return values;
+            }
+        };
     }
     ngOnInit() {
         this.facets$ = this.dataService.facet
@@ -8987,7 +8996,7 @@ FacetValueFormInputComponent.id = 'facet-value-form-input';
 FacetValueFormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-facet-value-form-input',
-                template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n></vdr-facet-value-selector>\r\n",
+                template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n    [transformControlValueAccessorValue]=\"valueTransformFn\"\r\n></vdr-facet-value-selector>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -9401,20 +9410,32 @@ RichTextFormInputComponent.decorators = [
  * @docsPage default-inputs
  */
 class SelectFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
     get options() {
         var _a;
         return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
     }
+    ngOnInit() {
+        this.uiLanguage$ = this.dataService.client.uiState().mapStream(({ uiState }) => uiState.language);
+    }
+    trackByFn(index, item) {
+        return item.value;
+    }
 }
 SelectFormInputComponent.id = 'select-form-input';
 SelectFormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-select-form-input',
-                template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
+                template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options;trackBy:trackByFn\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel:(uiLanguage$ | async)) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["select{width:100%}\n"]
             },] }
 ];
+SelectFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
 SelectFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
@@ -9704,7 +9725,7 @@ class AddressFormComponent {
 AddressFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-address-form',
-                template: "<form [formGroup]=\"formGroup\">\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.full-name' | translate }}</label>\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.company' | translate }}</label>\n                <input formControlName=\"company\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.street-line-1' | translate }}</label>\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.street-line-2' | translate }}</label>\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.city' | translate }}</label>\n                <input formControlName=\"city\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.province' | translate }}</label>\n                <input formControlName=\"province\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.postal-code' | translate }}</label>\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.country' | translate }}</label>\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\n                        {{ country.name }}\n                    </option>\n                </select>\n            </clr-input-container>\n        </div>\n    </div>\n    <clr-input-container>\n        <label>{{ 'customer.phone-number' | translate }}</label>\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\n    </clr-input-container>\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\n        <label>{{ 'common.custom-fields' | translate }}</label>\n        <vdr-tabbed-custom-fields\n            entityName=\"Address\"\n            [customFields]=\"customFields\"\n            [customFieldsFormGroup]=\"customFieldsGroup\"\n        ></vdr-tabbed-custom-fields>\n    </section>\n</form>\n",
+                template: "<form [formGroup]=\"formGroup\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.full-name' | translate }}</label>\r\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.company' | translate }}</label>\r\n                <input formControlName=\"company\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -10917,6 +10938,11 @@ class CustomFieldControlComponent {
         this.readonly = false;
         this.hasCustomControl = false;
     }
+    ngOnInit() {
+        this.uiLanguage$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => uiState.language));
+    }
     getFieldDefinition() {
         const config = Object.assign({}, this.customField);
         const id = this.customFieldComponentService.customFieldComponentExists(this.entityName, this.customField.name);
@@ -10938,7 +10964,7 @@ class CustomFieldControlComponent {
 CustomFieldControlComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-custom-field-control',
-                template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n",
+                template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <label for=\"basic\" class=\"clr-control-label\">{{ customField | customFieldLabel:(uiLanguage$ | async) }}</label>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field [label]=\"customField | customFieldLabel:(uiLanguage$ | async)\" [for]=\"customField.name\" *ngIf=\"!compact\">\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n",
                 styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"]
             },] }
 ];
@@ -12010,6 +12036,7 @@ class FacetValueSelectorComponent {
         this.dataService = dataService;
         this.selectedValuesChange = new EventEmitter();
         this.readonly = false;
+        this.transformControlValueAccessorValue = value => value;
         this.facetValues = [];
         this.disabled = false;
         this.toSelectorItem = (facetValue) => {
@@ -12030,7 +12057,8 @@ class FacetValueSelectorComponent {
         }
         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);
         }
     }
     registerOnChange(fn) {
@@ -12089,6 +12117,7 @@ FacetValueSelectorComponent.propDecorators = {
     selectedValuesChange: [{ type: Output }],
     facets: [{ type: Input }],
     readonly: [{ type: Input }],
+    transformControlValueAccessorValue: [{ type: Input }],
     ngSelect: [{ type: ViewChild, args: [NgSelectComponent,] }]
 };
 
@@ -14667,31 +14696,20 @@ ChannelLabelPipe.decorators = [
  * name/value if none are defined.
  */
 class CustomFieldLabelPipe {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.subscription = dataService.client.uiState().stream$.subscribe(val => {
-            this.uiLanguageCode = val.uiState.language;
-        });
-    }
-    transform(value) {
+    transform(value, uiLanguageCode) {
         if (!value) {
             return value;
         }
         const { label } = value;
         const name = this.isCustomFieldConfig(value) ? value.name : value.value;
         if (label) {
-            const match = label.find(l => l.languageCode === this.uiLanguageCode);
+            const match = label.find(l => l.languageCode === uiLanguageCode);
             return match ? match.value : label[0].value;
         }
         else {
             return name;
         }
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
     isCustomFieldConfig(input) {
         return input.hasOwnProperty('name');
     }
@@ -14699,11 +14717,8 @@ class CustomFieldLabelPipe {
 CustomFieldLabelPipe.decorators = [
     { type: Pipe, args: [{
                 name: 'customFieldLabel',
-                pure: false,
+                pure: true,
             },] }
-];
-CustomFieldLabelPipe.ctorParameters = () => [
-    { type: DataService }
 ];
 
 /**
@@ -16059,7 +16074,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '1.6.2';
+const ADMIN_UI_VERSION = '1.6.5';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.