@vendure/admin-ui 2.1.2 → 2.1.4

package/fesm2022/vendure-admin-ui-core.mjs

@@ -5994,6 +5994,10 @@ function addCustomFields(documentNode, customFields) {
             // so we treat it as an alias
             entityType = 'Address';
         }
+        if (entityType === 'Country') {
+            // Country is an alias of Region
+            entityType = 'Region';
+        }
         const customFieldsForType = customFields[entityType];
         if (customFieldsForType && customFieldsForType.length) {
             fragmentDef.selectionSet.selections.push({
@@ -7143,7 +7147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: AlertsService }]; } });
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.1.2';
+const ADMIN_UI_VERSION = '2.1.4';
 
 /* eslint-disable @angular-eslint/directive-selector */
 class FormFieldControlDirective {
@@ -7323,11 +7327,11 @@ class ModalDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalDialogComponent, deps: [{ token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$3.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$3.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ModalDialogComponent, selector: "vdr-modal-dialog", ngImport: i0, template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"], dependencies: [{ kind: "component", type: i1$3.ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: i1$3.ClrModalBody, selector: ".modal-body" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DialogComponentOutletComponent, selector: "vdr-dialog-component-outlet", inputs: ["component"], outputs: ["create"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ModalDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-modal-dialog', template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
+            args: [{ selector: 'vdr-modal-dialog', template: "<div [dir]=\"direction$ | async\">\r\n    <clr-modal [clrModalOpen]=\"true\" (clrModalOpenChange)=\"modalOpenChange($event)\"\r\n        [clrModalClosable]=\"options?.closable\" [clrModalSize]=\"options?.size\"\r\n        [ngClass]=\"'modal-valign-' + (options?.verticalAlign || 'center')\">\r\n        <h3 class=\"modal-title\"><ng-container *ngTemplateOutlet=\"(titleTemplateRef$ | async)\"></ng-container></h3>\r\n        <div class=\"modal-body\">\r\n            <vdr-dialog-component-outlet [component]=\"childComponentType\"\r\n                (create)=\"onCreate($event)\"></vdr-dialog-component-outlet>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n            <ng-container *ngTemplateOutlet=\"(buttonsTemplateRef$ | async)\"></ng-container>\r\n        </div>\r\n    </clr-modal>\r\n</div>", styles: ["::ng-deep clr-modal.modal-valign-top .modal{justify-content:flex-start}::ng-deep clr-modal.modal-valign-bottom .modal{justify-content:flex-end}::ng-deep clr-modal .modal-dialog{display:flex}::ng-deep clr-modal .modal-content-wrapper{flex:1;display:flex}::ng-deep clr-modal .modal-dialog .modal-content{flex:1;display:flex;flex-direction:column}@media screen and (max-height: 700px){::ng-deep clr-modal .modal-dialog .modal-content{padding:.8rem}::ng-deep clr-modal .modal-header,::ng-deep clr-modal .modal-header--accessible{padding-bottom:.8rem}::ng-deep clr-modal .modal-footer{padding-top:.8rem}}.modal-body{display:flex;flex-direction:column;container-type:inline-size}\n"] }]
         }], ctorParameters: function () { return [{ type: LocalizationService }]; } });
 
 /**
@@ -9177,8 +9181,8 @@ export default [
     id: 'my-button',
     label: 'My Action',
     locationId: '${locationId}',
-  });
-]`,
+  }),
+];`,
     navMenu: locationId => `
 import { addNavMenuSection } from '@vendure/admin-ui/core';
 
@@ -9187,10 +9191,10 @@ export default [
       id: 'my-menu-item',
       label: 'My Menu Item',
       routerLink: ['/extensions/my-plugin'],
-    }
-    '${locationId}'
-  );
-]`,
+    },
+    '${locationId}',
+  ),
+];`,
     detailComponent: locationId => `
 import { registerCustomDetailComponent } from '@vendure/admin-ui/core';
 
@@ -9198,8 +9202,8 @@ export default [
   registerCustomDetailComponent({
     locationId: '${locationId}',
     component: MyCustomComponent,
-  });
-]`,
+  }),
+];`,
     dataTable: (locationId, metadata) => `
 import { registerDataTableComponent } from '@vendure/admin-ui/core';
 
@@ -9208,8 +9212,8 @@ export default [
     tableId: '${locationId}',
     columnId: '${metadata}',
     component: MyCustomComponent,
-  });
-]`,
+  }),
+];`,
 };
 
 class MainNavComponent extends BaseNavComponent {
@@ -10883,11 +10887,11 @@ class HtmlEditorFormInputComponent extends BaseCodeEditorFormInputComponent {
         return html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HtmlEditorFormInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: HtmlEditorFormInputComponent, selector: "vdr-html-editor-form-input", usesInheritance: true, ngImport: i0, template: "<div #editor class=\"code-editor html-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-component-border-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .he-tag{color:var(--color-json-editor-key)}.code-editor ::ng-deep .he-attr{color:var(--color-json-editor-number)}.code-editor ::ng-deep .he-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: HtmlEditorFormInputComponent, selector: "vdr-html-editor-form-input", usesInheritance: true, ngImport: i0, template: "<div #editor class=\"code-editor html-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-weight-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .he-tag{color:var(--color-json-editor-key)}.code-editor ::ng-deep .he-attr{color:var(--color-json-editor-number)}.code-editor ::ng-deep .he-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HtmlEditorFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-html-editor-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #editor class=\"code-editor html-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-component-border-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .he-tag{color:var(--color-json-editor-key)}.code-editor ::ng-deep .he-attr{color:var(--color-json-editor-number)}.code-editor ::ng-deep .he-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"] }]
+            args: [{ selector: 'vdr-html-editor-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #editor class=\"code-editor html-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-weight-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .he-tag{color:var(--color-json-editor-key)}.code-editor ::ng-deep .he-attr{color:var(--color-json-editor-number)}.code-editor ::ng-deep .he-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 function jsonValidator() {
@@ -10964,11 +10968,11 @@ class JsonEditorFormInputComponent extends BaseCodeEditorFormInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: JsonEditorFormInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: JsonEditorFormInputComponent, selector: "vdr-json-editor-form-input", usesInheritance: true, ngImport: i0, template: "<div #editor class=\"code-editor json-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-component-border-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .je-string{color:var(--color-json-editor-string)}.code-editor ::ng-deep .je-number{color:var(--color-json-editor-number)}.code-editor ::ng-deep .je-boolean{color:var(--color-json-editor-boolean)}.code-editor ::ng-deep .je-null{color:var(--color-json-editor-null)}.code-editor ::ng-deep .je-key{color:var(--color-json-editor-key)}.code-editor ::ng-deep .je-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: JsonEditorFormInputComponent, selector: "vdr-json-editor-form-input", usesInheritance: true, ngImport: i0, template: "<div #editor class=\"code-editor json-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-weight-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .je-string{color:var(--color-json-editor-string)}.code-editor ::ng-deep .je-number{color:var(--color-json-editor-number)}.code-editor ::ng-deep .je-boolean{color:var(--color-json-editor-boolean)}.code-editor ::ng-deep .je-null{color:var(--color-json-editor-null)}.code-editor ::ng-deep .je-key{color:var(--color-json-editor-key)}.code-editor ::ng-deep .je-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: JsonEditorFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-json-editor-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #editor class=\"code-editor json-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-component-border-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .je-string{color:var(--color-json-editor-string)}.code-editor ::ng-deep .je-number{color:var(--color-json-editor-number)}.code-editor ::ng-deep .je-boolean{color:var(--color-json-editor-boolean)}.code-editor ::ng-deep .je-null{color:var(--color-json-editor-null)}.code-editor ::ng-deep .je-key{color:var(--color-json-editor-key)}.code-editor ::ng-deep .je-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"] }]
+            args: [{ selector: 'vdr-json-editor-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #editor class=\"code-editor json-editor\" [class.invalid]=\"!isValid\" [style.height]=\"height || '300px'\"></div>\r\n<div class=\"error-message\">\r\n    <span *ngIf=\"errorMessage\">{{ errorMessage }}</span>\r\n</div>\r\n", styles: [".code-editor{min-height:6rem;background-color:var(--color-json-editor-background-color);color:var(--color-json-editor-text);border:1px solid var(--color-weight-200);border-radius:3px;padding:6px;tab-size:4;font-family:Source Code Pro,Lucida Console,Monaco,monospace;font-size:14px;font-weight:400;height:340px;letter-spacing:normal;line-height:20px;resize:both;text-align:initial;min-width:200px}.code-editor:focus{border-color:var(--color-primary-500)}.code-editor.invalid{border-color:var(--clr-forms-invalid-color)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}.code-editor ::ng-deep .je-string{color:var(--color-json-editor-string)}.code-editor ::ng-deep .je-number{color:var(--color-json-editor-number)}.code-editor ::ng-deep .je-boolean{color:var(--color-json-editor-boolean)}.code-editor ::ng-deep .je-null{color:var(--color-json-editor-null)}.code-editor ::ng-deep .je-key{color:var(--color-json-editor-key)}.code-editor ::ng-deep .je-error{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--color-json-editor-error)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 /**
@@ -10978,7 +10982,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  */
 function getConfigArgValue(value) {
     try {
-        return value != null ? JSON.parse(value) : undefined;
+        const result = value != null ? JSON.parse(value) : undefined;
+        if (result && typeof result === 'object' && !Array.isArray(result)) {
+            // There is an edge-case where the value is a valid JSON-encoded string and
+            // will get parsed as an object, but we actually want it to be a string.
+            return JSON.stringify(result);
+        }
+        else {
+            return result;
+        }
     }
     catch (e) {
         return value;
@@ -11874,7 +11886,7 @@ class DatetimePickerService {
         this.min = null;
         this.max = null;
         this.jumping = false;
-        this.selected$ = this.selectedDatetime$.pipe(map(value => value && value.toDate()));
+        this.selected$ = this.selectedDatetime$.pipe(map(value => value && value.toDate()), distinctUntilChanged((a, b) => a?.getTime() === b?.getTime()));
         this.viewing$ = this.viewingDatetime$.pipe(map(value => value.toDate()));
         this.weekStartDayIndex = dayOfWeekIndex['mon'];
         this.calendarView$ = combineLatest(this.viewingDatetime$, this.selectedDatetime$).pipe(map(([viewing, selected]) => this.generateCalendarView(viewing, selected)));
@@ -14392,11 +14404,11 @@ class AssetPickerDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPickerDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets", "editAssetClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets", "editAssetClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
+            args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: NotificationService }]; }, propDecorators: { assetSearchInputComponent: [{
                 type: ViewChild,
                 args: ['assetSearchInputComponent']
@@ -21529,6 +21541,8 @@ function addActionBarItem(config) {
  *
  * @example
  * ```ts title="providers.ts"
+ * import { addNavMenuSection } from '\@vendure/admin-ui/core';
+ *
  * export default [
  *     addNavMenuSection({
  *         id: 'reports',
@@ -21564,6 +21578,8 @@ function addNavMenuSection(config, before) {
  *
  * @example
  * ```ts title="providers.ts"
+ * import { addNavMenuItem } from '\@vendure/admin-ui/core';
+ *
  * export default [
  *     addNavMenuItem({
  *         id: 'reviews',
@@ -21573,7 +21589,7 @@ function addNavMenuSection(config, before) {
  *     },
  *     'marketing'),
  * ];
- * ``
+ * ```
  *
  * @docsCategory nav-menu
  */