@vendure/admin-ui 1.6.2 → 1.6.5

package/bundles/vendure-admin-ui-core.umd.js

@@ -6487,7 +6487,7 @@
      */
     function getConfigArgValue(value) {
         try {
-            return value ? JSON.parse(value) : undefined;
+            return value != null ? JSON.parse(value) : undefined;
         }
         catch (e) {
             return value;
@@ -6568,7 +6568,7 @@
         if (arg.list) {
             return [];
         }
-        if (arg.defaultValue) {
+        if (arg.defaultValue != null) {
             return arg.defaultValue;
         }
         var type = arg.type;
@@ -6938,8 +6938,18 @@
      */
     var FacetValueFormInputComponent = /** @class */ (function () {
         function FacetValueFormInputComponent(dataService) {
+            var _this = this;
             this.dataService = dataService;
             this.isListInput = true;
+            this.valueTransformFn = function (values) {
+                var isUsedInConfigArg = _this.config.__typename === 'ConfigArgDefinition';
+                if (isUsedInConfigArg) {
+                    return JSON.stringify(values.map(function (s) { return s.id; }));
+                }
+                else {
+                    return values;
+                }
+            };
         }
         FacetValueFormInputComponent.prototype.ngOnInit = function () {
             this.facets$ = this.dataService.facet
@@ -6953,7 +6963,7 @@
     FacetValueFormInputComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -7416,7 +7426,8 @@
      * @docsPage default-inputs
      */
     var SelectFormInputComponent = /** @class */ (function () {
-        function SelectFormInputComponent() {
+        function SelectFormInputComponent(dataService) {
+            this.dataService = dataService;
         }
         Object.defineProperty(SelectFormInputComponent.prototype, "options", {
             get: function () {
@@ -7426,17 +7437,29 @@
             enumerable: false,
             configurable: true
         });
+        SelectFormInputComponent.prototype.ngOnInit = function () {
+            this.uiLanguage$ = this.dataService.client.uiState().mapStream(function (_b) {
+                var uiState = _b.uiState;
+                return uiState.language;
+            });
+        };
+        SelectFormInputComponent.prototype.trackByFn = function (index, item) {
+            return item.value;
+        };
         return SelectFormInputComponent;
     }());
     SelectFormInputComponent.id = 'select-form-input';
     SelectFormInputComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["select{width:100%}\n"]
                 },] }
     ];
+    SelectFormInputComponent.ctorParameters = function () { return [
+        { type: DataService }
+    ]; };
     SelectFormInputComponent.propDecorators = {
         readonly: [{ type: i0.Input }]
     };
@@ -7752,7 +7775,7 @@
     AddressFormComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -9065,6 +9088,14 @@
             this.readonly = false;
             this.hasCustomControl = false;
         }
+        CustomFieldControlComponent.prototype.ngOnInit = function () {
+            this.uiLanguage$ = this.dataService.client
+                .uiState()
+                .stream$.pipe(operators.map(function (_a) {
+                var uiState = _a.uiState;
+                return uiState.language;
+            }));
+        };
         CustomFieldControlComponent.prototype.getFieldDefinition = function () {
             var config = Object.assign({}, this.customField);
             var id = this.customFieldComponentService.customFieldComponentExists(this.entityName, this.customField.name);
@@ -9087,7 +9118,7 @@
     CustomFieldControlComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -10192,6 +10223,7 @@
             this.dataService = dataService;
             this.selectedValuesChange = new i0.EventEmitter();
             this.readonly = false;
+            this.transformControlValueAccessorValue = function (value) { return value; };
             this.facetValues = [];
             this.disabled = false;
             this.toSelectorItem = function (facetValue) {
@@ -10212,7 +10244,8 @@
             }
             this.selectedValuesChange.emit(selected.map(function (s) { return s.value; }));
             if (this.onChangeFn) {
-                this.onChangeFn(JSON.stringify(selected.map(function (s) { return s.id; })));
+                var transformedValue = this.transformControlValueAccessorValue(selected);
+                this.onChangeFn(transformedValue);
             }
         };
         FacetValueSelectorComponent.prototype.registerOnChange = function (fn) {
@@ -10272,6 +10305,7 @@
         selectedValuesChange: [{ type: i0.Output }],
         facets: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
+        transformControlValueAccessorValue: [{ type: i0.Input }],
         ngSelect: [{ type: i0.ViewChild, args: [ngSelect.NgSelectComponent,] }]
     };
 
@@ -13074,33 +13108,22 @@
      * name/value if none are defined.
      */
     var CustomFieldLabelPipe = /** @class */ (function () {
-        function CustomFieldLabelPipe(dataService) {
-            var _this = this;
-            this.dataService = dataService;
-            this.subscription = dataService.client.uiState().stream$.subscribe(function (val) {
-                _this.uiLanguageCode = val.uiState.language;
-            });
+        function CustomFieldLabelPipe() {
         }
-        CustomFieldLabelPipe.prototype.transform = function (value) {
-            var _this = this;
+        CustomFieldLabelPipe.prototype.transform = function (value, uiLanguageCode) {
             if (!value) {
                 return value;
             }
             var label = value.label;
             var name = this.isCustomFieldConfig(value) ? value.name : value.value;
             if (label) {
-                var match = label.find(function (l) { return l.languageCode === _this.uiLanguageCode; });
+                var match = label.find(function (l) { return l.languageCode === uiLanguageCode; });
                 return match ? match.value : label[0].value;
             }
             else {
                 return name;
             }
         };
-        CustomFieldLabelPipe.prototype.ngOnDestroy = function () {
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-        };
         CustomFieldLabelPipe.prototype.isCustomFieldConfig = function (input) {
             return input.hasOwnProperty('name');
         };
@@ -13109,12 +13132,9 @@
     CustomFieldLabelPipe.decorators = [
         { type: i0.Pipe, args: [{
                     name: 'customFieldLabel',
-                    pure: false,
+                    pure: true,
                 },] }
-    ];
-    CustomFieldLabelPipe.ctorParameters = function () { return [
-        { type: DataService }
-    ]; };
+    ];
 
     /**
      * @description
@@ -14570,7 +14590,7 @@
     }
 
     // Auto-generated by the set-version.js script.
-    var ADMIN_UI_VERSION = '1.6.2';
+    var ADMIN_UI_VERSION = '1.6.5';
 
     /**
      * Responsible for registering dashboard widget components and querying for layouts.