@vendure/admin-ui 1.6.1 → 1.6.4

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

@@ -7271,7 +7271,7 @@ class MainNavComponent {
 MainNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-main-nav',
-                template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n",
+                template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n",
                 styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"]
             },] }
 ];
@@ -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: [""]
             },] }
@@ -9704,7 +9713,7 @@ class AddressFormComponent {
 AddressFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-address-form',
-                template: "<form [formGroup]=\"formGroup\">\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\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",
+                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: [""]
             },] }
@@ -12010,6 +12019,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 +12040,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 +12100,7 @@ FacetValueSelectorComponent.propDecorators = {
     selectedValuesChange: [{ type: Output }],
     facets: [{ type: Input }],
     readonly: [{ type: Input }],
+    transformControlValueAccessorValue: [{ type: Input }],
     ngSelect: [{ type: ViewChild, args: [NgSelectComponent,] }]
 };
 
@@ -12284,7 +12296,7 @@ class FormattedAddressComponent {
 FormattedAddressComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-formatted-address',
-                template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n",
+                template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"]
             },] }
@@ -16059,7 +16071,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '1.6.1';
+const ADMIN_UI_VERSION = '1.6.4';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.