@vendure/admin-ui 1.3.2 → 1.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Injector, Component, Inject, ChangeDetectionStrategy, ComponentFactoryResolver, APP_INITIALIZER, ViewChild, HostListener, ViewContainerRef, EventEmitter, Input, Output, NgModule, HostBinding, ContentChild, ChangeDetectorRef, forwardRef, TemplateRef, ContentChildren, Directive, ElementRef, Optional, SkipSelf, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Injector, isDevMode, Component, Inject, HostListener, ChangeDetectionStrategy, ComponentFactoryResolver, APP_INITIALIZER, ViewChild, ViewContainerRef, EventEmitter, Input, Output, NgModule, ChangeDetectorRef, HostBinding, ContentChild, forwardRef, TemplateRef, ContentChildren, Directive, ElementRef, Optional, SkipSelf, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { Location, DOCUMENT, CommonModule, PlatformLocation } from '@angular/common';
 import { map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, concatMap, bufferCount, switchMap, mergeMap, mapTo, catchError, startWith, throttleTime, shareReplay, scan, debounceTime, delay } from 'rxjs/operators';
@@ -29,6 +29,7 @@ import { ApolloLink as ApolloLink$1 } from '@apollo/client/link/core';
 import { createUploadLink } from 'apollo-upload-client';
 import { omit } from '@vendure/common/lib/omit';
 import { __awaiter } from 'tslib';
+import { CodeJar } from 'codejar';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { ClarityModule } from '@clr/angular';
@@ -455,9 +456,20 @@ const SET_AS_LOGGED_OUT = gql `
     }
     ${USER_STATUS_FRAGMENT}
 `;
-const SET_UI_LANGUAGE = gql `
-    mutation SetUiLanguage($languageCode: LanguageCode!) {
+const SET_UI_LANGUAGE_AND_LOCALE = gql `
+    mutation SetUiLanguage($languageCode: LanguageCode!, $locale: String) {
         setUiLanguage(languageCode: $languageCode) @client
+        setUiLocale(locale: $locale) @client
+    }
+`;
+const SET_UI_LOCALE = gql `
+    mutation SetUiLocale($locale: String) {
+        setUiLocale(locale: $locale) @client
+    }
+`;
+const SET_DISPLAY_UI_EXTENSION_POINTS = gql `
+    mutation SetDisplayUiExtensionPoints($display: Boolean!) {
+        setDisplayUiExtensionPoints(display: $display) @client
     }
 `;
 const SET_CONTENT_LANGUAGE = gql `
@@ -489,8 +501,10 @@ const GET_UI_STATE = gql `
     query GetUiState {
         uiState @client {
             language
+            locale
             contentLanguage
             theme
+            displayUiExtensionPoints
         }
     }
 `;
@@ -504,8 +518,10 @@ const GET_CLIENT_STATE = gql `
         }
         uiState @client {
             language
+            locale
             contentLanguage
             theme
+            displayUiExtensionPoints
         }
     }
     ${USER_STATUS_FRAGMENT}
@@ -528,8 +544,12 @@ const UPDATE_USER_CHANNELS = gql `
 `;
 
 /**
+ * @description
  * This class wraps the Apollo Angular QueryRef object and exposes some getters
  * for convenience.
+ *
+ * @docsCategory providers
+ * @docsPage DataService
  */
 class QueryResult {
     constructor(queryRef, apollo) {
@@ -539,11 +559,13 @@ class QueryResult {
         this.valueChanges = queryRef.valueChanges;
     }
     /**
-     * Refetch this query whenever the active Channel changes.
+     * @description
+     * Re-fetch this query whenever the active Channel changes.
      */
     refetchOnChannelChange() {
-        const userStatus$ = this.apollo.watchQuery({ query: GET_USER_STATUS })
-            .valueChanges;
+        const userStatus$ = this.apollo.watchQuery({
+            query: GET_USER_STATUS,
+        }).valueChanges;
         const activeChannelId$ = userStatus$.pipe(map(data => data.data.userStatus.activeChannelId), filter(notNullOrUndefined), distinctUntilChanged(), skip(1), takeUntil(this.completed$));
         const loggedOut$ = userStatus$.pipe(map(data => data.data.userStatus.isLoggedIn), distinctUntilChanged(), skip(1), filter(isLoggedIn => !isLoggedIn), takeUntil(this.completed$));
         this.valueChanges = merge(activeChannelId$, this.queryRef.valueChanges).pipe(tap(val => {
@@ -555,6 +577,7 @@ class QueryResult {
         return this;
     }
     /**
+     * @description
      * Returns an Observable which emits a single result and then completes.
      */
     get single$() {
@@ -564,6 +587,7 @@ class QueryResult {
         }));
     }
     /**
+     * @description
      * Returns an Observable which emits until unsubscribed.
      */
     get stream$() {
@@ -576,12 +600,14 @@ class QueryResult {
         return this.queryRef;
     }
     /**
+     * @description
      * Returns a single-result Observable after applying the map function.
      */
     mapSingle(mapFn) {
         return this.single$.pipe(map(mapFn));
     }
     /**
+     * @description
      * Returns a multiple-result Observable after applying the map function.
      */
     mapStream(mapFn) {
@@ -664,6 +690,8 @@ const DELETE_COUNTRY = gql `
 const ZONE_FRAGMENT = gql `
     fragment Zone on Zone {
         id
+        createdAt
+        updatedAt
         name
         members {
             ...Country
@@ -674,10 +702,7 @@ const ZONE_FRAGMENT = gql `
 const GET_ZONES = gql `
     query GetZones {
         zones {
-            id
-            createdAt
-            updatedAt
-            name
+            ...Zone
             members {
                 createdAt
                 updatedAt
@@ -688,6 +713,7 @@ const GET_ZONES = gql `
             }
         }
     }
+    ${ZONE_FRAGMENT}
 `;
 const GET_ZONE = gql `
     query GetZone($id: ID!) {
@@ -819,6 +845,29 @@ const GET_TAX_RATE_LIST = gql `
     }
     ${TAX_RATE_FRAGMENT}
 `;
+const GET_TAX_RATE_LIST_SIMPLE = gql `
+    query GetTaxRateListSimple($options: TaxRateListOptions) {
+        taxRates(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                enabled
+                value
+                category {
+                    id
+                    name
+                }
+                zone {
+                    id
+                    name
+                }
+            }
+            totalItems
+        }
+    }
+`;
 const GET_TAX_RATE = gql `
     query GetTaxRate($id: ID!) {
         taxRate(id: $id) {
@@ -1046,6 +1095,7 @@ const CUSTOM_FIELD_CONFIG_FRAGMENT = gql `
         }
         readonly
         nullable
+        ui
     }
 `;
 const STRING_CUSTOM_FIELD_FRAGMENT = gql `
@@ -1183,9 +1233,15 @@ const GET_SERVER_CONFIG = gql `
                     Collection {
                         ...CustomFields
                     }
+                    Country {
+                        ...CustomFields
+                    }
                     Customer {
                         ...CustomFields
                     }
+                    CustomerGroup {
+                        ...CustomFields
+                    }
                     Facet {
                         ...CustomFields
                     }
@@ -1204,6 +1260,9 @@ const GET_SERVER_CONFIG = gql `
                     OrderLine {
                         ...CustomFields
                     }
+                    PaymentMethod {
+                        ...CustomFields
+                    }
                     Product {
                         ...CustomFields
                     }
@@ -1216,12 +1275,24 @@ const GET_SERVER_CONFIG = gql `
                     ProductVariant {
                         ...CustomFields
                     }
+                    Promotion {
+                        ...CustomFields
+                    }
                     ShippingMethod {
                         ...CustomFields
                     }
+                    TaxCategory {
+                        ...CustomFields
+                    }
+                    TaxRate {
+                        ...CustomFields
+                    }
                     User {
                         ...CustomFields
                     }
+                    Zone {
+                        ...CustomFields
+                    }
                 }
             }
         }
@@ -1677,9 +1748,15 @@ class ClientDataService {
     uiState() {
         return this.baseDataService.query(GET_UI_STATE, {}, 'cache-first');
     }
-    setUiLanguage(languageCode) {
-        return this.baseDataService.mutate(SET_UI_LANGUAGE, {
+    setUiLanguage(languageCode, locale) {
+        return this.baseDataService.mutate(SET_UI_LANGUAGE_AND_LOCALE, {
             languageCode,
+            locale,
+        });
+    }
+    setUiLocale(locale) {
+        return this.baseDataService.mutate(SET_UI_LOCALE, {
+            locale,
         });
     }
     setContentLanguage(languageCode) {
@@ -1692,6 +1769,11 @@ class ClientDataService {
             theme,
         });
     }
+    setDisplayUiExtensionPoints(display) {
+        return this.baseDataService.mutate(SET_DISPLAY_UI_EXTENSION_POINTS, {
+            display,
+        });
+    }
     setActiveChannel(channelId) {
         return this.baseDataService.mutate(SET_ACTIVE_CHANNEL, {
             channelId,
@@ -2675,6 +2757,14 @@ const CUSTOMER_FRAGMENT = gql `
     }
     ${ADDRESS_FRAGMENT}
 `;
+const CUSTOMER_GROUP_FRAGMENT = gql `
+    fragment CustomerGroup on CustomerGroup {
+        id
+        createdAt
+        updatedAt
+        name
+    }
+`;
 const GET_CUSTOMER_LIST = gql `
     query GetCustomerList($options: CustomerListOptions) {
         customers(options: $options) {
@@ -2765,22 +2855,18 @@ const UPDATE_CUSTOMER_ADDRESS = gql `
 const CREATE_CUSTOMER_GROUP = gql `
     mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {
         createCustomerGroup(input: $input) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const UPDATE_CUSTOMER_GROUP = gql `
     mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {
         updateCustomerGroup(input: $input) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const DELETE_CUSTOMER_GROUP = gql `
     mutation DeleteCustomerGroup($id: ID!) {
@@ -2794,22 +2880,17 @@ const GET_CUSTOMER_GROUPS = gql `
     query GetCustomerGroups($options: CustomerGroupListOptions) {
         customerGroups(options: $options) {
             items {
-                id
-                createdAt
-                updatedAt
-                name
+                ...CustomerGroup
             }
             totalItems
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const GET_CUSTOMER_GROUP_WITH_CUSTOMERS = gql `
     query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {
         customerGroup(id: $id) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
             customers(options: $options) {
                 items {
                     id
@@ -2823,26 +2904,23 @@ const GET_CUSTOMER_GROUP_WITH_CUSTOMERS = gql `
             }
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const ADD_CUSTOMERS_TO_GROUP = gql `
     mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {
         addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const REMOVE_CUSTOMERS_FROM_GROUP = gql `
     mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {
         removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 const GET_CUSTOMER_HISTORY = gql `
     query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {
@@ -5038,12 +5116,12 @@ class SettingsDataService {
     }
     createCountry(input) {
         return this.baseDataService.mutate(CREATE_COUNTRY, {
-            input: pick(input, ['code', 'enabled', 'translations']),
+            input: pick(input, ['code', 'enabled', 'translations', 'customFields']),
         });
     }
     updateCountry(input) {
         return this.baseDataService.mutate(UPDATE_COUNTRY, {
-            input: pick(input, ['id', 'code', 'enabled', 'translations']),
+            input: pick(input, ['id', 'code', 'enabled', 'translations', 'customFields']),
         });
     }
     deleteCountry(id) {
@@ -5115,6 +5193,14 @@ class SettingsDataService {
             },
         }, fetchPolicy);
     }
+    getTaxRatesSimple(take = 10, skip = 0, fetchPolicy) {
+        return this.baseDataService.query(GET_TAX_RATE_LIST_SIMPLE, {
+            options: {
+                take,
+                skip,
+            },
+        }, fetchPolicy);
+    }
     getTaxRate(id) {
         return this.baseDataService.query(GET_TAX_RATE, {
             id,
@@ -5406,7 +5492,19 @@ class ShippingMethodDataService {
     }
 }
 
+/**
+ * @description
+ * Used to interact with the Admin API via GraphQL queries. Internally this service uses the
+ * Apollo Client, which means it maintains a normalized entity cache. For this reason, it is
+ * advisable to always select the `id` field of any entity, which will allow the returned data
+ * to be effectively cached.
+ *
+ * @docsCategory providers
+ * @docsPage DataService
+ * @docsWeight 0
+ */
 class DataService {
+    /** @internal */
     constructor(baseDataService) {
         this.baseDataService = baseDataService;
         this.promotion = new PromotionDataService(baseDataService);
@@ -5422,13 +5520,43 @@ class DataService {
         this.shippingMethod = new ShippingMethodDataService(baseDataService);
     }
     /**
-     * Perform a GraphQL query.
+     * @description
+     * Perform a GraphQL query. Returns a {@link QueryResult} which allows further control over
+     * they type of result returned, e.g. stream of values, single value etc.
+     *
+     * @example
+     * ```TypeScript
+     * const result$ = this.dataService.query(gql`
+     *   query MyQuery($id: ID!) {
+     *     product(id: $id) {
+     *       id
+     *       name
+     *       slug
+     *     }
+     *   },
+     *   { id: 123 },
+     * ).mapSingle(data => data.product);
+     * ```
      */
     query(query, variables, fetchPolicy = 'cache-and-network') {
         return this.baseDataService.query(query, variables, fetchPolicy);
     }
     /**
+     * @description
      * Perform a GraphQL mutation.
+     *
+     * @example
+     * ```TypeScript
+     * const result$ = this.dataService.mutate(gql`
+     *   mutation MyMutation($input: UpdateEntityInput!) {
+     *     updateEntity(input: $input) {
+     *       id
+     *       name
+     *     }
+     *   },
+     *   { input: updateEntityInput },
+     * );
+     * ```
      */
     mutate(mutation, variables, update) {
         return this.baseDataService.mutate(mutation, variables, update);
@@ -5481,6 +5609,21 @@ class AppComponent {
                 }
             },
         });
+        if (isDevMode()) {
+            // tslint:disable-next-line:no-console
+            console.log(`%cVendure Admin UI: Press "ctrl/cmd + u" to view UI extension points`, `color: #17C1FF; font-weight: bold;`);
+        }
+    }
+    handleGlobalHotkeys(event) {
+        if (event.ctrlKey === true && event.key === 'u') {
+            event.preventDefault();
+            if (isDevMode()) {
+                this.dataService.client
+                    .uiState()
+                    .single$.pipe(switchMap(({ uiState }) => this.dataService.client.setDisplayUiExtensionPoints(!uiState.displayUiExtensionPoints)))
+                    .subscribe();
+            }
+        }
     }
 }
 AppComponent.decorators = [
@@ -5495,7 +5638,10 @@ AppComponent.ctorParameters = () => [
     { type: ServerConfigService },
     { type: LocalStorageService },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
+];
+AppComponent.propDecorators = {
+    handleGlobalHotkeys: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+};
 
 let vendureUiConfig;
 function loadAppConfig() {
@@ -5514,6 +5660,14 @@ function getAppConfig() {
 
 function getDefaultUiLanguage() {
     return getAppConfig().defaultLanguage;
+}
+function getDefaultUiLocale() {
+    var _a;
+    const defaultLocale = getAppConfig().defaultLocale;
+    if (defaultLocale) {
+        return defaultLocale;
+    }
+    return (_a = navigator.language.split('-')[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
 }
 
 /**
@@ -5659,7 +5813,7 @@ I18nService.ctorParameters = () => [
 ];
 
 /**
- * This component should only be instatiated dynamically by the ModalService. It should not be used
+ * This component should only be instantiated dynamically by the ModalService. It should not be used
  * directly in templates. See {@link ModalService.fromComponent} method for more detail.
  */
 class ModalDialogComponent {
@@ -5778,8 +5932,13 @@ OverlayHostService.decorators = [
 ];
 
 /**
+ * @description
  * This service is responsible for instantiating a ModalDialog component and
  * embedding the specified component within.
+ *
+ * @docsCategory providers
+ * @docsPage ModalService
+ * @docsWeight 0
  */
 class ModalService {
     constructor(componentFactoryResolver, overlayHostService) {
@@ -5787,12 +5946,13 @@ class ModalService {
         this.overlayHostService = overlayHostService;
     }
     /**
+     * @description
      * Create a modal from a component. The component must implement the {@link Dialog} interface.
      * Additionally, the component should include templates for the title and the buttons to be
      * displayed in the modal dialog. See example:
      *
      * @example
-     * ```
+     * ```HTML
      * class MyDialog implements Dialog {
      *  resolveWith: (result?: any) => void;
      *
@@ -5808,31 +5968,32 @@ class ModalService {
      * }
      * ```
      *
-     * ```
+     * @example
+     * ```HTML
      * <ng-template vdrDialogTitle>Title of the modal</ng-template>
      *
      * <p>
-     *     My Content
+     *   My Content
      * </p>
      *
      * <ng-template vdrDialogButtons>
-     *     <button type="button"
-     *             class="btn"
-     *             (click)="cancel()">Cancel</button>
-     *     <button type="button"
-     *             class="btn btn-primary"
-     *             (click)="okay()">Okay</button>
+     *   <button type="button"
+     *           class="btn"
+     *           (click)="cancel()">Cancel</button>
+     *   <button type="button"
+     *           class="btn btn-primary"
+     *           (click)="okay()">Okay</button>
      * </ng-template>
      * ```
      */
     fromComponent(component, options) {
         const modalFactory = this.componentFactoryResolver.resolveComponentFactory(ModalDialogComponent);
-        return from(this.overlayHostService.getHostView()).pipe(mergeMap((hostView) => {
+        return from(this.overlayHostService.getHostView()).pipe(mergeMap(hostView => {
             const modalComponentRef = hostView.createComponent(modalFactory);
             const modalInstance = modalComponentRef.instance;
             modalInstance.childComponentType = component;
             modalInstance.options = options;
-            return new Observable((subscriber) => {
+            return new Observable(subscriber => {
                 modalInstance.closeModal = (result) => {
                     modalComponentRef.destroy();
                     subscriber.next(result);
@@ -5842,6 +6003,7 @@ class ModalService {
         }));
     }
     /**
+     * @description
      * Displays a modal dialog with the provided title, body and buttons.
      */
     dialog(config) {
@@ -5864,19 +6026,294 @@ ModalService.ctorParameters = () => [
 class UiLanguageSwitcherDialogComponent {
     constructor() {
         this.availableLanguages = [];
+        this.availableLocales = [
+            'AF',
+            'AL',
+            'DZ',
+            'AS',
+            'AD',
+            'AO',
+            'AI',
+            'AQ',
+            'AG',
+            'AR',
+            'AM',
+            'AW',
+            'AU',
+            'AT',
+            'AZ',
+            'BS',
+            'BH',
+            'BD',
+            'BB',
+            'BY',
+            'BE',
+            'BZ',
+            'BJ',
+            'BM',
+            'BT',
+            'BO',
+            'BQ',
+            'BA',
+            'BW',
+            'BV',
+            'BR',
+            'IO',
+            'BN',
+            'BG',
+            'BF',
+            'BI',
+            'CV',
+            'KH',
+            'CM',
+            'CA',
+            'KY',
+            'CF',
+            'TD',
+            'CL',
+            'CN',
+            'CX',
+            'CC',
+            'CO',
+            'KM',
+            'CD',
+            'CG',
+            'CK',
+            'CR',
+            'HR',
+            'CU',
+            'CW',
+            'CY',
+            'CZ',
+            'CI',
+            'DK',
+            'DJ',
+            'DM',
+            'DO',
+            'EC',
+            'EG',
+            'SV',
+            'GQ',
+            'ER',
+            'EE',
+            'SZ',
+            'ET',
+            'FK',
+            'FO',
+            'FJ',
+            'FI',
+            'FR',
+            'GF',
+            'PF',
+            'TF',
+            'GA',
+            'GM',
+            'GE',
+            'DE',
+            'GH',
+            'GI',
+            'GR',
+            'GL',
+            'GD',
+            'GP',
+            'GU',
+            'GT',
+            'GG',
+            'GN',
+            'GW',
+            'GY',
+            'HT',
+            'HM',
+            'VA',
+            'HN',
+            'HK',
+            'HU',
+            'IS',
+            'IN',
+            'ID',
+            'IR',
+            'IQ',
+            'IE',
+            'IM',
+            'IL',
+            'IT',
+            'JM',
+            'JP',
+            'JE',
+            'JO',
+            'KZ',
+            'KE',
+            'KI',
+            'KP',
+            'KR',
+            'KW',
+            'KG',
+            'LA',
+            'LV',
+            'LB',
+            'LS',
+            'LR',
+            'LY',
+            'LI',
+            'LT',
+            'LU',
+            'MO',
+            'MG',
+            'MW',
+            'MY',
+            'MV',
+            'ML',
+            'MT',
+            'MH',
+            'MQ',
+            'MR',
+            'MU',
+            'YT',
+            'MX',
+            'FM',
+            'MD',
+            'MC',
+            'MN',
+            'ME',
+            'MS',
+            'MA',
+            'MZ',
+            'MM',
+            'NA',
+            'NR',
+            'NP',
+            'NL',
+            'NC',
+            'NZ',
+            'NI',
+            'NE',
+            'NG',
+            'NU',
+            'NF',
+            'MK',
+            'MP',
+            'NO',
+            'OM',
+            'PK',
+            'PW',
+            'PS',
+            'PA',
+            'PG',
+            'PY',
+            'PE',
+            'PH',
+            'PN',
+            'PL',
+            'PT',
+            'PR',
+            'QA',
+            'RO',
+            'RU',
+            'RW',
+            'RE',
+            'BL',
+            'SH',
+            'KN',
+            'LC',
+            'MF',
+            'PM',
+            'VC',
+            'WS',
+            'SM',
+            'ST',
+            'SA',
+            'SN',
+            'RS',
+            'SC',
+            'SL',
+            'SG',
+            'SX',
+            'SK',
+            'SI',
+            'SB',
+            'SO',
+            'ZA',
+            'GS',
+            'SS',
+            'ES',
+            'LK',
+            'SD',
+            'SR',
+            'SJ',
+            'SE',
+            'CH',
+            'SY',
+            'TW',
+            'TJ',
+            'TZ',
+            'TH',
+            'TL',
+            'TG',
+            'TK',
+            'TO',
+            'TT',
+            'TN',
+            'TR',
+            'TM',
+            'TC',
+            'TV',
+            'UG',
+            'UA',
+            'AE',
+            'GB',
+            'UM',
+            'US',
+            'UY',
+            'UZ',
+            'VU',
+            'VE',
+            'VN',
+            'VG',
+            'VI',
+            'WF',
+            'EH',
+            'YE',
+            'ZM',
+            'ZW',
+            'AX',
+        ];
+        this.availableCurrencyCodes = Object.values(CurrencyCode);
+        this.selectedCurrencyCode = 'USD';
+        this.now = new Date().toISOString();
+        const browserLanguage = navigator.language.split('-');
+        this.browserDefaultLocale = browserLanguage.length === 1 ? undefined : browserLanguage[1];
+    }
+    ngOnInit() {
+        this.updatePreviewLocale();
+    }
+    updatePreviewLocale() {
+        if (!this.currentLocale || this.currentLocale.length === 0 || this.currentLocale.length === 2) {
+            this.previewLocale = this.createLocaleString(this.currentLanguage, this.currentLocale);
+        }
+    }
+    setLanguage() {
+        var _a;
+        this.resolveWith([this.currentLanguage, (_a = this.currentLocale) === null || _a === void 0 ? void 0 : _a.toUpperCase()]);
     }
-    setLanguage(languageCode) {
-        this.resolveWith(languageCode);
+    cancel() {
+        this.resolveWith();
+    }
+    createLocaleString(languageCode, region) {
+        if (!region) {
+            return languageCode;
+        }
+        return [languageCode, region.toUpperCase()].join('-');
     }
 }
 UiLanguageSwitcherDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-ui-language-switcher',
-                template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n\r\n<div *ngFor=\"let code of availableLanguages\" >\r\n    <button class=\"btn btn-link btn-sm\" (click)=\"setLanguage(code)\">\r\n        <clr-icon [attr.shape]=\"code === currentLanguage ? 'dot-circle' : 'circle'\"></clr-icon>\r\n        {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n    </button>\r\n</div>\r\n",
+                template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"]
             },] }
-];
+];
+UiLanguageSwitcherDialogComponent.ctorParameters = () => [];
 
 class AppShellComponent {
     constructor(authService, dataService, router, i18nService, modalService, localStorageService) {
@@ -5892,23 +6329,28 @@ class AppShellComponent {
         this.userName$ = this.dataService.client
             .userStatus()
             .single$.pipe(map(data => data.userStatus.username));
-        this.uiLanguage$ = this.dataService.client.uiState().stream$.pipe(map(data => data.uiState.language));
+        this.uiLanguageAndLocale$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => { var _a; return [uiState.language, (_a = uiState.locale) !== null && _a !== void 0 ? _a : undefined]; }));
         this.availableLanguages = this.i18nService.availableLanguages;
     }
     selectUiLanguage() {
-        this.uiLanguage$
-            .pipe(take(1), switchMap(currentLanguage => this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
+        this.uiLanguageAndLocale$
+            .pipe(take(1), switchMap(([currentLanguage, currentLocale]) => this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
             closable: true,
-            size: 'md',
+            size: 'lg',
             locals: {
                 availableLanguages: this.availableLanguages,
                 currentLanguage,
+                currentLocale,
             },
-        })), switchMap(value => (value ? this.dataService.client.setUiLanguage(value) : EMPTY)))
+        })), switchMap(result => result ? this.dataService.client.setUiLanguage(result[0], result[1]) : EMPTY))
             .subscribe(result => {
+            var _a;
             if (result.setUiLanguage) {
                 this.i18nService.setLanguage(result.setUiLanguage);
                 this.localStorageService.set('uiLanguageCode', result.setUiLanguage);
+                this.localStorageService.set('uiLocale', (_a = result.setUiLocale) !== null && _a !== void 0 ? _a : undefined);
             }
         });
     }
@@ -5927,7 +6369,7 @@ class AppShellComponent {
 AppShellComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-app-shell',
-                template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguage]=\"uiLanguage$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n",
+                template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                           [availableLanguages]=\"availableLanguages\"\r\n                           (selectUiLanguage)=\"selectUiLanguage()\"\r\n                           (logOut)=\"logOut()\"></vdr-user-menu>\r\n        </div>\r\n    </clr-header>\r\n    <nav class=\"subnav\"><vdr-breadcrumb></vdr-breadcrumb></nav>\r\n\r\n    <div class=\"content-container\">\r\n        <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        <vdr-main-nav></vdr-main-nav>\r\n    </div>\r\n</clr-main-container>\r\n",
                 styles: [".branding{min-width:0}.logo{width:60px}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:10.8rem}}.header-actions{align-items:center}.content-area{position:relative}\n"]
             },] }
 ];
@@ -6252,16 +6694,18 @@ JobQueueService.ctorParameters = () => [
  *   imports: [SharedModule],
  *   providers: [
  *     addNavMenuSection({
- *       id: 'reviews',
- *       label: 'Product Reviews',
- *       routerLink: ['/extensions/reviews'],
- *       icon: 'star',
+ *       id: 'reports',
+ *       label: 'Reports',
+ *       items: [{
+ *           // ...
+ *       }],
  *     },
  *     'settings'),
  *   ],
  * })
  * export class MyUiExtensionModule {}
  * ```
+ * @docsCategory nav-menu
  */
 function addNavMenuSection(config, before) {
     return {
@@ -6289,17 +6733,18 @@ function addNavMenuSection(config, before) {
  *   imports: [SharedModule],
  *   providers: [
  *     addNavMenuItem({
- *       id: 'reports',
- *       label: 'Reports',
- *       items: [{
- *           // ...
- *       }],
+ *       id: 'reviews',
+ *       label: 'Product Reviews',
+ *       routerLink: ['/extensions/reviews'],
+ *       icon: 'star',
  *     },
  *     'marketing'),
  *   ],
  * })
  * export class MyUiExtensionModule {}
- * ```
+ * ``
+ *
+ * @docsCategory nav-menu
  */
 function addNavMenuItem(config, sectionId, before) {
     return {
@@ -6334,6 +6779,7 @@ function addNavMenuItem(config, sectionId, before) {
  * })
  * export class MyUiExtensionModule {}
  * ```
+ * @docsCategory action-bar
  */
 function addActionBarItem(config) {
     return {
@@ -6742,7 +7188,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                <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                    <vdr-status-badge *ngIf=\"sectionBadge !== 'none'\" [type]=\"sectionBadge\"></vdr-status-badge>\r\n                </ng-container>\r\n                <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                <label [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 *ngIf=\"itemBadge.type !== 'none'\" [type]=\"itemBadge.type\"></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            </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 [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",
                 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)}.nav-list clr-icon{margin-right:12px}.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"]
             },] }
 ];
@@ -6884,202 +7330,268 @@ class UserMenuComponent {
 UserMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-user-menu',
-                template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link trigger\" vdrDropdownTrigger>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon shape=\"user\" size=\"24\"></clr-icon>\r\n        <clr-icon shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem>\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguage | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <div class=\"dropdown-item\">\r\n            <vdr-theme-switcher></vdr-theme-switcher>\r\n        </div>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n",
+                template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link trigger\" vdrDropdownTrigger>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon shape=\"user\" size=\"24\"></clr-icon>\r\n        <clr-icon shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem>\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <div class=\"dropdown-item\">\r\n            <vdr-theme-switcher></vdr-theme-switcher>\r\n        </div>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n",
                 styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.user-name{color:var(--color-grey-200);margin-right:12px}@media screen and (max-width: 768px){.user-name{display:none}}.trigger clr-icon{color:#fff}\n"]
             },] }
 ];
 UserMenuComponent.propDecorators = {
     userName: [{ type: Input }],
     availableLanguages: [{ type: Input }],
-    uiLanguage: [{ type: Input }],
+    uiLanguageAndLocale: [{ type: Input }],
     logOut: [{ type: Output }],
     selectUiLanguage: [{ type: Output }]
 };
 
 // tslint:disable
 const result = {
-    possibleTypes: {
-        AddFulfillmentToOrderResult: [
-            'Fulfillment',
-            'EmptyOrderLineSelectionError',
-            'ItemsAlreadyFulfilledError',
-            'InsufficientStockOnHandError',
-            'InvalidFulfillmentHandlerError',
-            'FulfillmentStateTransitionError',
-            'CreateFulfillmentError',
+    "possibleTypes": {
+        "AddFulfillmentToOrderResult": [
+            "Fulfillment",
+            "EmptyOrderLineSelectionError",
+            "ItemsAlreadyFulfilledError",
+            "InsufficientStockOnHandError",
+            "InvalidFulfillmentHandlerError",
+            "FulfillmentStateTransitionError",
+            "CreateFulfillmentError"
         ],
-        AddManualPaymentToOrderResult: ['Order', 'ManualPaymentStateError'],
-        AuthenticationResult: ['CurrentUser', 'InvalidCredentialsError'],
-        CancelOrderResult: [
-            'Order',
-            'EmptyOrderLineSelectionError',
-            'QuantityTooGreatError',
-            'MultipleOrderError',
-            'CancelActiveOrderError',
-            'OrderStateTransitionError',
+        "AddManualPaymentToOrderResult": [
+            "Order",
+            "ManualPaymentStateError"
         ],
-        CreateAssetResult: ['Asset', 'MimeTypeError'],
-        CreateChannelResult: ['Channel', 'LanguageNotAvailableError'],
-        CreateCustomerResult: ['Customer', 'EmailAddressConflictError'],
-        CreatePromotionResult: ['Promotion', 'MissingConditionsError'],
-        CustomField: [
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'StringCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "AuthenticationResult": [
+            "CurrentUser",
+            "InvalidCredentialsError"
         ],
-        CustomFieldConfig: [
-            'StringCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "CancelOrderResult": [
+            "Order",
+            "EmptyOrderLineSelectionError",
+            "QuantityTooGreatError",
+            "MultipleOrderError",
+            "CancelActiveOrderError",
+            "OrderStateTransitionError"
         ],
-        ErrorResult: [
-            'AlreadyRefundedError',
-            'CancelActiveOrderError',
-            'ChannelDefaultLanguageError',
-            'CreateFulfillmentError',
-            'EmailAddressConflictError',
-            'EmptyOrderLineSelectionError',
-            'FulfillmentStateTransitionError',
-            'InsufficientStockError',
-            'InsufficientStockOnHandError',
-            'InvalidCredentialsError',
-            'InvalidFulfillmentHandlerError',
-            'ItemsAlreadyFulfilledError',
-            'LanguageNotAvailableError',
-            'ManualPaymentStateError',
-            'MimeTypeError',
-            'MissingConditionsError',
-            'MultipleOrderError',
-            'NativeAuthStrategyError',
-            'NegativeQuantityError',
-            'NoChangesSpecifiedError',
-            'NothingToRefundError',
-            'OrderLimitError',
-            'OrderModificationStateError',
-            'OrderStateTransitionError',
-            'PaymentMethodMissingError',
-            'PaymentOrderMismatchError',
-            'PaymentStateTransitionError',
-            'ProductOptionInUseError',
-            'QuantityTooGreatError',
-            'RefundOrderStateError',
-            'RefundPaymentIdMissingError',
-            'RefundStateTransitionError',
-            'SettlePaymentError',
+        "CreateAssetResult": [
+            "Asset",
+            "MimeTypeError"
         ],
-        ModifyOrderResult: [
-            'Order',
-            'NoChangesSpecifiedError',
-            'OrderModificationStateError',
-            'PaymentMethodMissingError',
-            'RefundPaymentIdMissingError',
-            'OrderLimitError',
-            'NegativeQuantityError',
-            'InsufficientStockError',
+        "CreateChannelResult": [
+            "Channel",
+            "LanguageNotAvailableError"
         ],
-        NativeAuthenticationResult: ['CurrentUser', 'InvalidCredentialsError', 'NativeAuthStrategyError'],
-        Node: [
-            'Address',
-            'Administrator',
-            'Allocation',
-            'Asset',
-            'AuthenticationMethod',
-            'Cancellation',
-            'Channel',
-            'Collection',
-            'Country',
-            'Customer',
-            'CustomerGroup',
-            'Facet',
-            'FacetValue',
-            'Fulfillment',
-            'HistoryEntry',
-            'Job',
-            'Order',
-            'OrderItem',
-            'OrderLine',
-            'OrderModification',
-            'Payment',
-            'PaymentMethod',
-            'Product',
-            'ProductOption',
-            'ProductOptionGroup',
-            'ProductVariant',
-            'Promotion',
-            'Refund',
-            'Release',
-            'Return',
-            'Role',
-            'Sale',
-            'ShippingMethod',
-            'StockAdjustment',
-            'Surcharge',
-            'Tag',
-            'TaxCategory',
-            'TaxRate',
-            'User',
-            'Zone',
+        "CreateCustomerResult": [
+            "Customer",
+            "EmailAddressConflictError"
         ],
-        PaginatedList: [
-            'AdministratorList',
-            'AssetList',
-            'CollectionList',
-            'CountryList',
-            'CustomerGroupList',
-            'CustomerList',
-            'FacetList',
-            'HistoryEntryList',
-            'JobList',
-            'OrderList',
-            'PaymentMethodList',
-            'ProductList',
-            'ProductVariantList',
-            'PromotionList',
-            'RoleList',
-            'ShippingMethodList',
-            'TagList',
-            'TaxRateList',
+        "CreatePromotionResult": [
+            "Promotion",
+            "MissingConditionsError"
         ],
-        RefundOrderResult: [
-            'Refund',
-            'QuantityTooGreatError',
-            'NothingToRefundError',
-            'OrderStateTransitionError',
-            'MultipleOrderError',
-            'PaymentOrderMismatchError',
-            'RefundOrderStateError',
-            'AlreadyRefundedError',
-            'RefundStateTransitionError',
+        "CustomField": [
+            "BooleanCustomFieldConfig",
+            "DateTimeCustomFieldConfig",
+            "FloatCustomFieldConfig",
+            "IntCustomFieldConfig",
+            "LocaleStringCustomFieldConfig",
+            "RelationCustomFieldConfig",
+            "StringCustomFieldConfig",
+            "TextCustomFieldConfig"
         ],
-        RemoveOptionGroupFromProductResult: ['Product', 'ProductOptionInUseError'],
-        SearchResultPrice: ['PriceRange', 'SinglePrice'],
-        SettlePaymentResult: [
-            'Payment',
-            'SettlePaymentError',
-            'PaymentStateTransitionError',
-            'OrderStateTransitionError',
+        "CustomFieldConfig": [
+            "StringCustomFieldConfig",
+            "LocaleStringCustomFieldConfig",
+            "IntCustomFieldConfig",
+            "FloatCustomFieldConfig",
+            "BooleanCustomFieldConfig",
+            "DateTimeCustomFieldConfig",
+            "RelationCustomFieldConfig",
+            "TextCustomFieldConfig"
         ],
-        SettleRefundResult: ['Refund', 'RefundStateTransitionError'],
-        StockMovement: ['Allocation', 'Cancellation', 'Release', 'Return', 'Sale', 'StockAdjustment'],
-        StockMovementItem: ['StockAdjustment', 'Allocation', 'Sale', 'Cancellation', 'Return', 'Release'],
-        TransitionFulfillmentToStateResult: ['Fulfillment', 'FulfillmentStateTransitionError'],
-        TransitionOrderToStateResult: ['Order', 'OrderStateTransitionError'],
-        TransitionPaymentToStateResult: ['Payment', 'PaymentStateTransitionError'],
-        UpdateChannelResult: ['Channel', 'LanguageNotAvailableError'],
-        UpdateCustomerResult: ['Customer', 'EmailAddressConflictError'],
-        UpdateGlobalSettingsResult: ['GlobalSettings', 'ChannelDefaultLanguageError'],
-        UpdatePromotionResult: ['Promotion', 'MissingConditionsError'],
-    },
+        "ErrorResult": [
+            "AlreadyRefundedError",
+            "CancelActiveOrderError",
+            "ChannelDefaultLanguageError",
+            "CreateFulfillmentError",
+            "EmailAddressConflictError",
+            "EmptyOrderLineSelectionError",
+            "FulfillmentStateTransitionError",
+            "InsufficientStockError",
+            "InsufficientStockOnHandError",
+            "InvalidCredentialsError",
+            "InvalidFulfillmentHandlerError",
+            "ItemsAlreadyFulfilledError",
+            "LanguageNotAvailableError",
+            "ManualPaymentStateError",
+            "MimeTypeError",
+            "MissingConditionsError",
+            "MultipleOrderError",
+            "NativeAuthStrategyError",
+            "NegativeQuantityError",
+            "NoChangesSpecifiedError",
+            "NothingToRefundError",
+            "OrderLimitError",
+            "OrderModificationStateError",
+            "OrderStateTransitionError",
+            "PaymentMethodMissingError",
+            "PaymentOrderMismatchError",
+            "PaymentStateTransitionError",
+            "ProductOptionInUseError",
+            "QuantityTooGreatError",
+            "RefundOrderStateError",
+            "RefundPaymentIdMissingError",
+            "RefundStateTransitionError",
+            "SettlePaymentError"
+        ],
+        "ModifyOrderResult": [
+            "Order",
+            "NoChangesSpecifiedError",
+            "OrderModificationStateError",
+            "PaymentMethodMissingError",
+            "RefundPaymentIdMissingError",
+            "OrderLimitError",
+            "NegativeQuantityError",
+            "InsufficientStockError"
+        ],
+        "NativeAuthenticationResult": [
+            "CurrentUser",
+            "InvalidCredentialsError",
+            "NativeAuthStrategyError"
+        ],
+        "Node": [
+            "Address",
+            "Administrator",
+            "Allocation",
+            "Asset",
+            "AuthenticationMethod",
+            "Cancellation",
+            "Channel",
+            "Collection",
+            "Country",
+            "Customer",
+            "CustomerGroup",
+            "Facet",
+            "FacetValue",
+            "Fulfillment",
+            "HistoryEntry",
+            "Job",
+            "Order",
+            "OrderItem",
+            "OrderLine",
+            "OrderModification",
+            "Payment",
+            "PaymentMethod",
+            "Product",
+            "ProductOption",
+            "ProductOptionGroup",
+            "ProductVariant",
+            "Promotion",
+            "Refund",
+            "Release",
+            "Return",
+            "Role",
+            "Sale",
+            "ShippingMethod",
+            "StockAdjustment",
+            "Surcharge",
+            "Tag",
+            "TaxCategory",
+            "TaxRate",
+            "User",
+            "Zone"
+        ],
+        "PaginatedList": [
+            "AdministratorList",
+            "AssetList",
+            "CollectionList",
+            "CountryList",
+            "CustomerGroupList",
+            "CustomerList",
+            "FacetList",
+            "HistoryEntryList",
+            "JobList",
+            "OrderList",
+            "PaymentMethodList",
+            "ProductList",
+            "ProductVariantList",
+            "PromotionList",
+            "RoleList",
+            "ShippingMethodList",
+            "TagList",
+            "TaxRateList"
+        ],
+        "RefundOrderResult": [
+            "Refund",
+            "QuantityTooGreatError",
+            "NothingToRefundError",
+            "OrderStateTransitionError",
+            "MultipleOrderError",
+            "PaymentOrderMismatchError",
+            "RefundOrderStateError",
+            "AlreadyRefundedError",
+            "RefundStateTransitionError"
+        ],
+        "RemoveOptionGroupFromProductResult": [
+            "Product",
+            "ProductOptionInUseError"
+        ],
+        "SearchResultPrice": [
+            "PriceRange",
+            "SinglePrice"
+        ],
+        "SettlePaymentResult": [
+            "Payment",
+            "SettlePaymentError",
+            "PaymentStateTransitionError",
+            "OrderStateTransitionError"
+        ],
+        "SettleRefundResult": [
+            "Refund",
+            "RefundStateTransitionError"
+        ],
+        "StockMovement": [
+            "Allocation",
+            "Cancellation",
+            "Release",
+            "Return",
+            "Sale",
+            "StockAdjustment"
+        ],
+        "StockMovementItem": [
+            "StockAdjustment",
+            "Allocation",
+            "Sale",
+            "Cancellation",
+            "Return",
+            "Release"
+        ],
+        "TransitionFulfillmentToStateResult": [
+            "Fulfillment",
+            "FulfillmentStateTransitionError"
+        ],
+        "TransitionOrderToStateResult": [
+            "Order",
+            "OrderStateTransitionError"
+        ],
+        "TransitionPaymentToStateResult": [
+            "Payment",
+            "PaymentStateTransitionError"
+        ],
+        "UpdateChannelResult": [
+            "Channel",
+            "LanguageNotAvailableError"
+        ],
+        "UpdateCustomerResult": [
+            "Customer",
+            "EmailAddressConflictError"
+        ],
+        "UpdateGlobalSettingsResult": [
+            "GlobalSettings",
+            "ChannelDefaultLanguageError"
+        ],
+        "UpdatePromotionResult": [
+            "Promotion",
+            "MissingConditionsError"
+        ]
+    }
 };
 
 // Allows the introspectionResult to be imported as a named symbol
@@ -7116,6 +7628,7 @@ class CheckJobsLink extends ApolloLink {
 
 function getClientDefaults(localStorageService) {
     const currentLanguage = localStorageService.get('uiLanguageCode') || getDefaultUiLanguage();
+    const currentLocale = localStorageService.get('uiLocale') || getDefaultUiLocale();
     const currentContentLanguage = localStorageService.get('contentLanguageCode') || getDefaultUiLanguage();
     const activeTheme = localStorageService.get('activeTheme') || 'default';
     return {
@@ -7134,8 +7647,10 @@ function getClientDefaults(localStorageService) {
         },
         uiState: {
             language: currentLanguage,
+            locale: currentLocale || '',
             contentLanguage: currentContentLanguage,
             theme: activeTheme,
+            displayUiExtensionPoints: false,
             __typename: 'UiState',
         },
     };
@@ -7179,43 +7694,35 @@ const ɵ0$2 = (_, args, { cache }) => {
 }, ɵ4 = (_, args, { cache }) => {
     // tslint:disable-next-line:no-non-null-assertion
     const previous = cache.readQuery({ query: GET_UI_STATE });
-    const data = {
-        uiState: {
-            __typename: 'UiState',
-            language: args.languageCode,
-            contentLanguage: previous.uiState.contentLanguage,
-            theme: previous.uiState.theme,
-        },
-    };
+    const data = updateUiState(previous, 'language', args.languageCode);
     cache.writeQuery({ query: GET_UI_STATE, data });
     return args.languageCode;
 }, ɵ5 = (_, args, { cache }) => {
+    var _a;
     // tslint:disable-next-line:no-non-null-assertion
     const previous = cache.readQuery({ query: GET_UI_STATE });
-    const data = {
-        uiState: {
-            __typename: 'UiState',
-            language: previous.uiState.language,
-            contentLanguage: args.languageCode,
-            theme: previous.uiState.theme,
-        },
-    };
+    const data = updateUiState(previous, 'locale', args.locale);
     cache.writeQuery({ query: GET_UI_STATE, data });
-    return args.languageCode;
+    return (_a = args.locale) !== null && _a !== void 0 ? _a : undefined;
 }, ɵ6 = (_, args, { cache }) => {
     // tslint:disable-next-line:no-non-null-assertion
     const previous = cache.readQuery({ query: GET_UI_STATE });
-    const data = {
-        uiState: {
-            __typename: 'UiState',
-            language: previous.uiState.language,
-            contentLanguage: previous.uiState.contentLanguage,
-            theme: args.theme,
-        },
-    };
+    const data = updateUiState(previous, 'contentLanguage', args.languageCode);
     cache.writeQuery({ query: GET_UI_STATE, data });
-    return args.theme;
+    return args.languageCode;
 }, ɵ7 = (_, args, { cache }) => {
+    // tslint:disable-next-line:no-non-null-assertion
+    const previous = cache.readQuery({ query: GET_UI_STATE });
+    const data = updateUiState(previous, 'theme', args.theme);
+    cache.writeQuery({ query: GET_UI_STATE, data });
+    return args.theme;
+}, ɵ8 = (_, args, { cache }) => {
+    // tslint:disable-next-line:no-non-null-assertion
+    const previous = cache.readQuery({ query: GET_UI_STATE });
+    const data = updateUiState(previous, 'displayUiExtensionPoints', args.display);
+    cache.writeQuery({ query: GET_UI_STATE, data });
+    return args.display;
+}, ɵ9 = (_, args, { cache }) => {
     // tslint:disable-next-line:no-non-null-assertion
     const previous = cache.readQuery({ query: GET_USER_STATUS });
     const activeChannel = previous.userStatus.channels.find(c => c.id === args.channelId);
@@ -7228,7 +7735,7 @@ const ɵ0$2 = (_, args, { cache }) => {
     };
     cache.writeQuery({ query: GET_USER_STATUS, data });
     return data.userStatus;
-}, ɵ8 = (_, args, { cache }) => {
+}, ɵ10 = (_, args, { cache }) => {
     // tslint:disable-next-line:no-non-null-assertion
     const previous = cache.readQuery({ query: GET_USER_STATUS });
     const data = {
@@ -7244,12 +7751,19 @@ const clientResolvers = {
         setAsLoggedIn: ɵ2,
         setAsLoggedOut: ɵ3,
         setUiLanguage: ɵ4,
-        setContentLanguage: ɵ5,
-        setUiTheme: ɵ6,
-        setActiveChannel: ɵ7,
-        updateUserChannels: ɵ8,
+        setUiLocale: ɵ5,
+        setContentLanguage: ɵ6,
+        setUiTheme: ɵ7,
+        setDisplayUiExtensionPoints: ɵ8,
+        setActiveChannel: ɵ9,
+        updateUserChannels: ɵ10,
     },
 };
+function updateUiState(previous, key, value) {
+    return {
+        uiState: Object.assign(Object.assign({}, previous.uiState), { [key]: value, __typename: 'UiState' }),
+    };
+}
 function updateRequestsInFlight(cache, increment) {
     const previous = cache.readQuery({ query: GET_NEWTORK_STATUS });
     const inFlightRequests = previous ? previous.networkStatus.inFlightRequests + increment : increment;
@@ -7320,7 +7834,25 @@ FetchAdapter.ctorParameters = () => [
 // How many ms before the toast is dismissed.
 const TOAST_DURATION = 3000;
 /**
+ * @description
  * Provides toast notification functionality.
+ *
+ * @example
+ * ```TypeScript
+ * class MyComponent {
+ *   constructor(private notificationService: NotificationService) {}
+ *
+ *   save() {
+ *     this.notificationService
+ *         .success(_('asset.notify-create-assets-success'), {
+ *           count: successCount,
+ *         });
+ *   }
+ * }
+ *
+ * @docsCategory providers
+ * @docsPage NotificationService
+ * @docsWeight 0
  */
 class NotificationService {
     constructor(i18nService, resolver, overlayHostService) {
@@ -7333,6 +7865,7 @@ class NotificationService {
         return this.overlayHostService.getHostView();
     }
     /**
+     * @description
      * Display a success toast notification
      */
     success(message, translationVars) {
@@ -7343,6 +7876,7 @@ class NotificationService {
         });
     }
     /**
+     * @description
      * Display an info toast notification
      */
     info(message, translationVars) {
@@ -7353,6 +7887,7 @@ class NotificationService {
         });
     }
     /**
+     * @description
      * Display a warning toast notification
      */
     warning(message, translationVars) {
@@ -7363,6 +7898,7 @@ class NotificationService {
         });
     }
     /**
+     * @description
      * Display an error toast notification
      */
     error(message, translationVars) {
@@ -7374,6 +7910,7 @@ class NotificationService {
         });
     }
     /**
+     * @description
      * Display a toast notification.
      */
     notify(config) {
@@ -7753,10 +8290,11 @@ ComponentRegistryService.decorators = [
 
 /**
  * This service allows the registration of custom controls for customFields.
+ *
+ * @deprecated The ComponentRegistryService now handles custom field components directly.
  */
 class CustomFieldComponentService {
-    constructor(componentFactoryResolver, componentRegistryService) {
-        this.componentFactoryResolver = componentFactoryResolver;
+    constructor(componentRegistryService) {
         this.componentRegistryService = componentRegistryService;
     }
     /**
@@ -7783,17 +8321,23 @@ class CustomFieldComponentService {
         return id;
     }
 }
-CustomFieldComponentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CustomFieldComponentService_Factory() { return new CustomFieldComponentService(i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(ComponentRegistryService)); }, token: CustomFieldComponentService, providedIn: "root" });
+CustomFieldComponentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CustomFieldComponentService_Factory() { return new CustomFieldComponentService(i0.ɵɵinject(ComponentRegistryService)); }, token: CustomFieldComponentService, providedIn: "root" });
 CustomFieldComponentService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root',
             },] }
 ];
 CustomFieldComponentService.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
     { type: ComponentRegistryService }
 ];
 
+/**
+ * @description
+ * A checkbox input. The default input component for `boolean` fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class BooleanFormInputComponent {
 }
 BooleanFormInputComponent.id = 'boolean-form-input';
@@ -7806,36 +8350,174 @@ BooleanFormInputComponent.decorators = [
             },] }
 ];
 
-class CurrencyFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.currencyCode$ = this.dataService.settings
-            .getActiveChannel()
-            .mapStream(data => data.activeChannel.currencyCode);
-    }
+function jsonValidator() {
+    return (control) => {
+        const error = { jsonInvalid: true };
+        try {
+            JSON.parse(control.value);
+        }
+        catch (e) {
+            control.setErrors(error);
+            return error;
+        }
+        control.setErrors(null);
+        return null;
+    };
 }
-CurrencyFormInputComponent.id = 'currency-form-input';
-CurrencyFormInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-currency-form-input',
-                template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-CurrencyFormInputComponent.ctorParameters = () => [
-    { type: DataService }
-];
-CurrencyFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
-
-class CustomerGroupFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
+/**
+ * @description
+ * A JSON editor input with syntax highlighting and error detection. Works well
+ * with `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class JsonEditorFormInputComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.isValid = true;
+    }
+    get height() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.height) || this.config.height;
     }
     ngOnInit() {
-        this.customerGroups$ = this.dataService.customer
+        this.formControl.addValidators(jsonValidator());
+    }
+    ngAfterViewInit() {
+        let lastVal = '';
+        const highlight = (editor) => {
+            var _a;
+            const code = (_a = editor.textContent) !== null && _a !== void 0 ? _a : '';
+            if (code === lastVal) {
+                return;
+            }
+            lastVal = code;
+            this.errorMessage = this.getJsonError(code);
+            this.changeDetector.markForCheck();
+            editor.innerHTML = this.syntaxHighlight(code, this.getErrorPos(this.errorMessage));
+        };
+        this.jar = CodeJar(this.editorElementRef.nativeElement, highlight);
+        this.jar.onUpdate(value => {
+            this.formControl.setValue(value);
+            this.formControl.markAsDirty();
+            this.isValid = this.formControl.valid;
+        });
+        this.jar.updateCode(this.formControl.value);
+        if (this.readonly) {
+            this.editorElementRef.nativeElement.contentEditable = 'false';
+        }
+    }
+    getJsonError(json) {
+        try {
+            JSON.parse(json);
+        }
+        catch (e) {
+            return e.message;
+        }
+        return;
+    }
+    getErrorPos(errorMessage) {
+        if (!errorMessage) {
+            return;
+        }
+        const matches = errorMessage.match(/at position (\d+)/);
+        const pos = matches === null || matches === void 0 ? void 0 : matches[1];
+        return pos != null ? +pos : undefined;
+    }
+    syntaxHighlight(json, errorPos) {
+        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        let hasMarkedError = false;
+        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (match, ...args) => {
+            let cls = 'number';
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = 'key';
+                }
+                else {
+                    cls = 'string';
+                }
+            }
+            else if (/true|false/.test(match)) {
+                cls = 'boolean';
+            }
+            else if (/null/.test(match)) {
+                cls = 'null';
+            }
+            let errorClass = '';
+            if (errorPos && !hasMarkedError) {
+                const length = args[0].length;
+                const offset = args[4];
+                if (errorPos <= length + offset) {
+                    errorClass = 'je-error';
+                    hasMarkedError = true;
+                }
+            }
+            return '<span class="je-' + cls + ' ' + errorClass + '">' + match + '</span>';
+        });
+    }
+}
+JsonEditorFormInputComponent.id = 'json-editor-form-input';
+JsonEditorFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-json-editor-form-input',
+                template: "<div #editor class=\"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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".json-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;-moz-tab-size:4;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}.json-editor:focus{border-color:var(--color-primary-500)}.json-editor.invalid{border-color:var(--clr-forms-invalid-color)}.json-editor ::ng-deep .je-string{color:var(--color-json-editor-string)}.json-editor ::ng-deep .je-number{color:var(--color-json-editor-number)}.json-editor ::ng-deep .je-boolean{color:var(--color-json-editor-boolean)}.json-editor ::ng-deep .je-null{color:var(--color-json-editor-null)}.json-editor ::ng-deep .je-key{color:var(--color-json-editor-key)}.json-editor ::ng-deep .je-error{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:wavy;text-decoration-style:wavy;-webkit-text-decoration-color:var(--color-json-editor-error);text-decoration-color:var(--color-json-editor-error)}.error-message{min-height:1rem;color:var(--color-json-editor-error)}\n"]
+            },] }
+];
+JsonEditorFormInputComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+JsonEditorFormInputComponent.propDecorators = {
+    editorElementRef: [{ type: ViewChild, args: ['editor',] }]
+};
+
+/**
+ * @description
+ * An input for monetary values. Should be used with `int` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class CurrencyFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.currencyCode$ = this.dataService.settings
+            .getActiveChannel()
+            .mapStream(data => data.activeChannel.currencyCode);
+    }
+}
+CurrencyFormInputComponent.id = 'currency-form-input';
+CurrencyFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-currency-form-input',
+                template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+CurrencyFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
+CurrencyFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
+
+/**
+ * @description
+ * Allows the selection of a Customer via an autocomplete select input.
+ * Should be used with `ID` type fields which represent Customer IDs.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class CustomerGroupFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
+    ngOnInit() {
+        this.customerGroups$ = this.dataService.customer
             .getCustomerGroupList({
             take: 1000,
         })
@@ -7862,13 +8544,32 @@ CustomerGroupFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Allows selection of a datetime. Default input for `datetime` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class DateFormInputComponent {
+    get min() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    }
+    get max() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    }
+    get yearRange() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.yearRange) || this.config.yearRange;
+    }
 }
 DateFormInputComponent.id = 'date-form-input';
 DateFormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-date-form-input',
-                template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"config?.min\"\r\n    [max]=\"config?.max\"\r\n    [yearRange]=\"config?.yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n",
+                template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -7877,6 +8578,14 @@ DateFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Allows the selection of multiple FacetValues via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent FacetValue IDs.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class FacetValueFormInputComponent {
     constructor(dataService) {
         this.dataService = dataService;
@@ -7902,13 +8611,40 @@ FacetValueFormInputComponent.ctorParameters = () => [
     { type: DataService }
 ];
 
+/**
+ * @description
+ * Displays a number input. Default input for `int` and `float` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class NumberFormInputComponent {
+    get prefix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+    }
+    get suffix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+    }
+    get min() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    }
+    get max() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    }
+    get step() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.step) || this.config.step;
+    }
 }
 NumberFormInputComponent.id = 'number-form-input';
 NumberFormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-number-form-input',
-                template: "<vdr-affixed-input [suffix]=\"config?.suffix\" [prefix]=\"config?.prefix\">\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"config?.min\"\r\n        [max]=\"config?.max\"\r\n        [step]=\"config?.step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n",
+                template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [readonly]=\"readonly\"\r\n        [min]=\"min\"\r\n        [max]=\"max\"\r\n        [step]=\"step\"\r\n        [formControl]=\"formControl\"\r\n    />\r\n</vdr-affixed-input>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -7917,6 +8653,13 @@ NumberFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Displays a password text input. Should be used with `string` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class PasswordFormInputComponent {
 }
 PasswordFormInputComponent.id = 'password-form-input';
@@ -7929,6 +8672,14 @@ PasswordFormInputComponent.decorators = [
             },] }
 ];
 
+/**
+ * @description
+ * Allows the selection of multiple ProductVariants via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class ProductSelectorFormInputComponent {
     constructor(dataService) {
         this.dataService = dataService;
@@ -7976,6 +8727,15 @@ ProductSelectorFormInputComponent.ctorParameters = () => [
     { type: DataService }
 ];
 
+/**
+ * @description
+ * The default input component for `relation` type custom fields. Allows the selection
+ * of a ProductVariant, Product, Customer or Asset. For other entity types, a custom
+ * implementation will need to be defined. See {@link registerFormInputComponent}.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class RelationFormInputComponent {
 }
 RelationFormInputComponent.id = 'relation-form-input';
@@ -7991,13 +8751,44 @@ RelationFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class RichTextFormInputComponent {
+}
+RichTextFormInputComponent.id = 'rich-text-form-input';
+RichTextFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-rich-text-form-input',
+                template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+            },] }
+];
+
+/**
+ * @description
+ * Uses a select input to allow the selection of a string value. Should be used with
+ * `string` type fields with options.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class SelectFormInputComponent {
+    get options() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
+    }
 }
 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 config.options\" [value]=\"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\" [value]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["select{width:100%}\n"]
             },] }
@@ -8006,18 +8797,40 @@ SelectFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class TextFormInputComponent {
+    get prefix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+    }
+    get suffix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+    }
 }
 TextFormInputComponent.id = 'text-form-input';
 TextFormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-text-form-input',
-                template: "<input\r\n    type=\"text\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n",
+                template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["input{width:100%}\n"]
             },] }
 ];
 
+/**
+ * @description
+ * Uses textarea form input. This is the default input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
 class TextareaFormInputComponent {
     get spellcheck() {
         return this.config.spellcheck === true;
@@ -8046,11 +8859,14 @@ const defaultFormInputs = [
     PasswordFormInputComponent,
     RelationFormInputComponent,
     TextareaFormInputComponent,
+    RichTextFormInputComponent,
+    JsonEditorFormInputComponent,
 ];
 /**
  * @description
  * Registers a custom FormInputComponent which can be used to control the argument inputs
- * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc)
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * a custom field.
  *
  * @example
  * ```TypeScript
@@ -8063,6 +8879,35 @@ const defaultFormInputs = [
  * })
  * export class MyUiExtensionModule {}
  * ```
+ *
+ * This input component can then be used in a custom field:
+ *
+ * @example
+ * ```TypeScript
+ * const config = {
+ *   // ...
+ *   customFields: {
+ *     ProductVariant: [
+ *       {
+ *         name: 'rrp',
+ *         type: 'int',
+ *         ui: { component: 'my-custom-input' },
+ *       },
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * or with an argument of a {@link ConfigurableOperationDef}:
+ *
+ * @example
+ * ```TypeScript
+ * args: {
+ *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+ * }
+ * ```
+ *
+ * @docsCategory custom-input-components
  */
 function registerFormInputComponent(id, component) {
     return {
@@ -8076,6 +8921,8 @@ function registerFormInputComponent(id, component) {
 }
 /**
  * @description
+ * **Deprecated** use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
  * Registers a custom component to act as the form input control for the given custom field.
  * This should be used in the NgModule `providers` array of your ui extension module.
  *
@@ -8090,6 +8937,10 @@ function registerFormInputComponent(id, component) {
  * })
  * export class MyUiExtensionModule {}
  * ```
+ *
+ * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
+ * @docsCategory custom-input-components
  */
 function registerCustomFieldComponent(entity, fieldName, component) {
     return {
@@ -8163,9 +9014,9 @@ class ActionBarItemsComponent {
 ActionBarItemsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-action-bar-items',
-                template: "<ng-container *ngFor=\"let item of items$ | async\">\r\n    <button *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\">\r\n        <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n        {{ item.label | translate }}\r\n    </button>\r\n</ng-container>\r\n",
+                template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                styles: [":host{display:inline-block;min-height:36px}\n"]
             },] }
 ];
 ActionBarItemsComponent.ctorParameters = () => [
@@ -8216,7 +9067,7 @@ ActionBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-action-bar',
                 template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n",
-                styles: [":host{display:flex;justify-content:space-between;align-items:flex-start;background-color:var(--color-component-bg-100);position:sticky;top:-24px;z-index:25;border-bottom:1px solid var(--color-component-border-200)}:host>.grow{flex:1}\n"]
+                styles: [":host{display:flex;justify-content:space-between;align-items:baseline;background-color:var(--color-component-bg-100);position:sticky;top:-24px;z-index:25;border-bottom:1px solid var(--color-component-border-200)}:host>.grow{flex:1}\n"]
             },] }
 ];
 ActionBarComponent.propDecorators = {
@@ -8229,7 +9080,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        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                entityName=\"Address\"\r\n                [customFieldsFormGroup]=\"customFieldsGroup\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n</form>\r\n",
+                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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -8546,7 +9397,25 @@ AssetGalleryComponent.propDecorators = {
 };
 
 /**
+ * @description
  * A dialog which allows the creation and selection of assets.
+ *
+ * @example
+ * ```TypeScript
+ * selectAssets() {
+ *   this.modalService
+ *     .fromComponent(AssetPickerDialogComponent, {
+ *         size: 'xl',
+ *     })
+ *     .subscribe(result => {
+ *         if (result && result.length) {
+ *             // ...
+ *         }
+ *     });
+ * }
+ * ```
+ *
+ * @docsCategory components
  */
 class AssetPickerDialogComponent {
     constructor(dataService, notificationService) {
@@ -8762,10 +9631,6 @@ class AssetPreviewComponent {
             this.subscription.unsubscribe();
         }
     }
-    customFieldIsSet(name) {
-        var _a;
-        return !!((_a = this.customFieldsForm) === null || _a === void 0 ? void 0 : _a.get([name]));
-    }
     getSourceFileName() {
         const parts = this.asset.source.split('/');
         return parts[parts.length - 1];
@@ -8861,7 +9726,7 @@ class AssetPreviewComponent {
 AssetPreviewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-asset-preview',
-                template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <ng-container *ngFor=\"let customField of customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [customField]=\"customField\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <a\r\n        *ngIf=\"!editable\"\r\n        class=\"btn btn-link btn-sm\"\r\n        [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n        (click)=\"editClick.emit()\"\r\n    >\r\n        <clr-icon shape=\"edit\"></clr-icon> {{ 'common.edit' | translate }}\r\n    </a>\r\n</div>\r\n",
+                template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <a\r\n        *ngIf=\"!editable\"\r\n        class=\"btn btn-link btn-sm\"\r\n        [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n        (click)=\"editClick.emit()\"\r\n    >\r\n        <clr-icon shape=\"edit\"></clr-icon>\r\n        {{ 'common.edit' | translate }}\r\n    </a>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center;margin-bottom:12px}.controls .preview-select clr-select-container{margin-right:12px}\n"]
             },] }
@@ -9042,7 +9907,15 @@ class ChannelAssignmentControlComponent {
         this.disabled = false;
     }
     ngOnInit() {
-        this.channels$ = this.dataService.client.userStatus().single$.pipe(map(({ userStatus }) => userStatus.channels.filter(c => this.includeDefaultChannel ? true : c.code !== DEFAULT_CHANNEL_CODE)), tap(channels => (this.channels = channels)));
+        this.channels$ = this.dataService.client.userStatus().single$.pipe(map(({ userStatus }) => userStatus.channels.filter(c => this.includeDefaultChannel ? true : c.code !== DEFAULT_CHANNEL_CODE)), tap(channels => {
+            if (!this.channels) {
+                this.channels = channels;
+                this.mapIncomingValueToChannels(this.lastIncomingValue);
+            }
+            else {
+                this.channels = channels;
+            }
+        }));
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -9054,26 +9927,8 @@ class ChannelAssignmentControlComponent {
         this.disabled = isDisabled;
     }
     writeValue(obj) {
-        var _a;
-        if (Array.isArray(obj)) {
-            if (typeof obj[0] === 'string') {
-                this.value = obj.map(id => { var _a; return (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === id); }).filter(notNullOrUndefined);
-            }
-            else {
-                this.value = obj;
-            }
-        }
-        else {
-            if (typeof obj === 'string') {
-                const channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === obj);
-                if (channel) {
-                    this.value = [channel];
-                }
-            }
-            else if (obj && obj.id) {
-                this.value = [obj];
-            }
-        }
+        this.lastIncomingValue = obj;
+        this.mapIncomingValueToChannels(obj);
     }
     focussed() {
         if (this.onTouched) {
@@ -9096,6 +9951,30 @@ class ChannelAssignmentControlComponent {
         const c2id = typeof c2 === 'string' ? c2 : c2.id;
         return c1id === c2id;
     }
+    mapIncomingValueToChannels(value) {
+        var _a;
+        if (Array.isArray(value)) {
+            if (typeof value[0] === 'string') {
+                this.value = value
+                    .map(id => { var _a; return (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === id); })
+                    .filter(notNullOrUndefined);
+            }
+            else {
+                this.value = value;
+            }
+        }
+        else {
+            if (typeof value === 'string') {
+                const channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === value);
+                if (channel) {
+                    this.value = [channel];
+                }
+            }
+            else if (value && value.id) {
+                this.value = [value];
+            }
+        }
+    }
 }
 ChannelAssignmentControlComponent.decorators = [
     { type: Component, args: [{
@@ -9139,12 +10018,23 @@ ChannelBadgeComponent.propDecorators = {
 };
 
 /**
+ * @description
  * A chip component for displaying a label with an optional action icon.
+ *
+ * @example
+ * ```HTML
+ * <vdr-chip [colorFrom]="item.value"
+ *           icon="close"
+ *           (iconClick)="clear(item)">
+ * {{ item.value }}</vdr-chip>
+ * ```
+ * @docsCategory components
  */
 class ChipComponent {
     constructor() {
         this.invert = false;
         /**
+         * @description
          * If set, the chip will have an auto-generated background
          * color based on the string value passed in.
          */
@@ -9398,8 +10288,19 @@ ConfigurableInputComponent.propDecorators = {
 };
 
 /**
+ * @description
  * A form input control which displays currency in decimal format, whilst working
  * with the integer cent value in the background.
+ *
+ * @example
+ * ```HTML
+ * <vdr-currency-input
+ *     [(ngModel)]="entityPrice"
+ *     [currencyCode]="currencyCode"
+ * ></vdr-currency-input>
+ * ```
+ *
+ * @docsCategory components
  */
 class CurrencyInputComponent {
     constructor(dataService, changeDetectorRef) {
@@ -9526,6 +10427,90 @@ CurrencyInputComponent.propDecorators = {
     valueChange: [{ type: Output }]
 };
 
+/**
+ * @description
+ * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
+ * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
+ *
+ * @docsCategory custom-detail-components
+ */
+function registerCustomDetailComponent(config) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customDetailComponentService) => () => {
+            customDetailComponentService.registerCustomDetailComponent(config);
+        },
+        deps: [CustomDetailComponentService],
+    };
+}
+class CustomDetailComponentService {
+    constructor() {
+        this.customDetailComponents = new Map();
+    }
+    registerCustomDetailComponent(config) {
+        var _a;
+        if (this.customDetailComponents.has(config.locationId)) {
+            (_a = this.customDetailComponents.get(config.locationId)) === null || _a === void 0 ? void 0 : _a.push(config);
+        }
+        else {
+            this.customDetailComponents.set(config.locationId, [config]);
+        }
+    }
+    getCustomDetailComponentsFor(locationId) {
+        var _a;
+        return (_a = this.customDetailComponents.get(locationId)) !== null && _a !== void 0 ? _a : [];
+    }
+}
+CustomDetailComponentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CustomDetailComponentService_Factory() { return new CustomDetailComponentService(); }, token: CustomDetailComponentService, providedIn: "root" });
+CustomDetailComponentService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+
+class CustomDetailComponentHostComponent {
+    constructor(viewContainerRef, componentFactoryResolver, customDetailComponentService) {
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.customDetailComponentService = customDetailComponentService;
+        this.componentRefs = [];
+    }
+    ngOnInit() {
+        const customComponents = this.customDetailComponentService.getCustomDetailComponentsFor(this.locationId);
+        for (const config of customComponents) {
+            const factory = this.componentFactoryResolver.resolveComponentFactory(config.component);
+            const componentRef = this.viewContainerRef.createComponent(factory);
+            componentRef.instance.entity$ = this.entity$;
+            componentRef.instance.detailForm = this.detailForm;
+            this.componentRefs.push(componentRef);
+        }
+    }
+    ngOnDestroy() {
+        for (const ref of this.componentRefs) {
+            ref.destroy();
+        }
+    }
+}
+CustomDetailComponentHostComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-custom-detail-component-host',
+                template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"detailComponent\"></vdr-ui-extension-point>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+CustomDetailComponentHostComponent.ctorParameters = () => [
+    { type: ViewContainerRef },
+    { type: ComponentFactoryResolver },
+    { type: CustomDetailComponentService }
+];
+CustomDetailComponentHostComponent.propDecorators = {
+    locationId: [{ type: Input }],
+    entity$: [{ type: Input }],
+    detailForm: [{ type: Input }]
+};
+
 /**
  * This component renders the appropriate type of form input control based
  * on the "type" property of the provided CustomFieldConfig.
@@ -9613,6 +10598,65 @@ DataTableColumnComponent.propDecorators = {
     template: [{ type: ViewChild, args: [TemplateRef, { static: true },] }]
 };
 
+/**
+ * @description
+ * A table for displaying PaginatedList results. It is designed to be used inside components which
+ * extend the {@link BaseListComponent} class.
+ *
+ * @example
+ * ```HTML
+ * <vdr-data-table
+ *   [items]="items$ | async"
+ *   [itemsPerPage]="itemsPerPage$ | async"
+ *   [totalItems]="totalItems$ | async"
+ *   [currentPage]="currentPage$ | async"
+ *   (pageChange)="setPageNumber($event)"
+ *   (itemsPerPageChange)="setItemsPerPage($event)"
+ * >
+ *   <!-- The header columns are defined first -->
+ *   <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
+ *   <vdr-dt-column></vdr-dt-column>
+ *   <vdr-dt-column></vdr-dt-column>
+ *
+ *   <!-- Then we define how a row is rendered -->
+ *   <ng-template let-taxRate="item">
+ *     <td class="left align-middle">{{ taxRate.name }}</td>
+ *     <td class="left align-middle">{{ taxRate.category.name }}</td>
+ *     <td class="left align-middle">{{ taxRate.zone.name }}</td>
+ *     <td class="left align-middle">{{ taxRate.value }}%</td>
+ *     <td class="right align-middle">
+ *       <vdr-table-row-action
+ *         iconShape="edit"
+ *         [label]="'common.edit' | translate"
+ *         [linkTo]="['./', taxRate.id]"
+ *       ></vdr-table-row-action>
+ *     </td>
+ *     <td class="right align-middle">
+ *       <vdr-dropdown>
+ *         <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+ *           {{ 'common.actions' | translate }}
+ *           <clr-icon shape="caret down"></clr-icon>
+ *         </button>
+ *         <vdr-dropdown-menu vdrPosition="bottom-right">
+ *           <button
+ *               type="button"
+ *               class="delete-button"
+ *               (click)="deleteTaxRate(taxRate)"
+ *               [disabled]="!(['DeleteSettings', 'DeleteTaxRate'] | hasPermission)"
+ *               vdrDropdownItem
+ *           >
+ *               <clr-icon shape="trash" class="is-danger"></clr-icon>
+ *               {{ 'common.delete' | translate }}
+ *           </button>
+ *         </vdr-dropdown-menu>
+ *       </vdr-dropdown>
+ *     </td>
+ *   </ng-template>
+ * </vdr-data-table>
+ * ```
+ *
+ * @docsCategory components
+ */
 class DataTableComponent {
     constructor() {
         this.allSelectChange = new EventEmitter();
@@ -9870,27 +10914,43 @@ DatetimePickerService.decorators = [
 ];
 DatetimePickerService.ctorParameters = () => [];
 
+/**
+ * @description
+ * A form input for selecting datetime values.
+ *
+ * @example
+ * ```HTML
+ * <vdr-datetime-picker [(ngModel)]="startDate"></vdr-datetime-picker>
+ * ```
+ *
+ * @docsCategory components
+ */
 class DatetimePickerComponent {
     constructor(changeDetectorRef, datetimePickerService) {
         this.changeDetectorRef = changeDetectorRef;
         this.datetimePickerService = datetimePickerService;
         /**
+         * @description
          * The day that the week should start with in the calendar view.
          */
         this.weekStartDay = 'mon';
         /**
+         * @description
          * The granularity of the minutes time picker
          */
         this.timeGranularityInterval = 5;
         /**
+         * @description
          * The minimum date as an ISO string
          */
         this.min = null;
         /**
+         * @description
          * The maximum date as an ISO string
          */
         this.max = null;
         /**
+         * @description
          * Sets the readonly state
          */
         this.readonly = false;
@@ -10054,6 +11114,31 @@ DatetimePickerComponent.propDecorators = {
     calendarTable: [{ type: ViewChild, args: ['calendarTable',] }]
 };
 
+/**
+ * @description
+ * Used for building dropdown menus.
+ *
+ * @example
+ * ```HTML
+ * <vdr-dropdown>
+ *   <button class="btn btn-outline" vdrDropdownTrigger>
+ *       <clr-icon shape="plus"></clr-icon>
+ *       Select type
+ *   </button>
+ *   <vdr-dropdown-menu vdrPosition="bottom-left">
+ *     <button
+ *       *ngFor="let typeName of allTypes"
+ *       type="button"
+ *       vdrDropdownItem
+ *       (click)="selectType(typeName)"
+ *     >
+ *       typeName
+ *     </button>
+ *   </vdr-dropdown-menu>
+ * </vdr-dropdown>
+ * ```
+ * @docsCategory components
+ */
 class DropdownComponent {
     constructor() {
         this.isOpen = false;
@@ -10327,6 +11412,19 @@ class ExtensionHostService {
                         this.destroyMessage$.next();
                         break;
                     }
+                    case 'active-route': {
+                        const routeData = {
+                            url: window.location.href,
+                            origin: window.location.origin,
+                            pathname: window.location.pathname,
+                            params: this.routeSnapshot.params,
+                            queryParams: this.routeSnapshot.queryParams,
+                            fragment: this.routeSnapshot.fragment,
+                        };
+                        this.sendMessage({ data: routeData, error: false, complete: false, requestId: data.requestId }, origin);
+                        this.sendMessage({ data: null, error: false, complete: true, requestId: data.requestId }, origin);
+                        break;
+                    }
                     case 'graphql-query': {
                         const { document, variables, fetchPolicy } = data.data;
                         this.dataService
@@ -10353,8 +11451,9 @@ class ExtensionHostService {
             }
         };
     }
-    init(extensionWindow) {
+    init(extensionWindow, routeSnapshot) {
         this.extensionWindow = extensionWindow;
+        this.routeSnapshot = routeSnapshot;
         window.addEventListener('message', this.handleMessage);
     }
     destroy() {
@@ -10411,7 +11510,7 @@ class ExtensionHostComponent {
         if (this.openInIframe) {
             const extensionWindow = this.extensionFrame.nativeElement.contentWindow;
             if (extensionWindow) {
-                this.extensionHostService.init(extensionWindow);
+                this.extensionHostService.init(extensionWindow, this.route.snapshot);
             }
         }
     }
@@ -10425,7 +11524,7 @@ class ExtensionHostComponent {
         if (!extensionWindow) {
             return;
         }
-        this.extensionHostService.init(extensionWindow);
+        this.extensionHostService.init(extensionWindow, this.route.snapshot);
         this.extensionWindowIsOpen = true;
         this.extensionWindow = extensionWindow;
         let timer;
@@ -10491,6 +11590,28 @@ function flattenFacetValues(facetsWithValues) {
     return facetsWithValues.reduce((flattened, facet) => flattened.concat(facet.values), []);
 }
 
+/**
+ * @description
+ * A form control for selecting facet values.
+ *
+ * @example
+ * ```HTML
+ * <vdr-facet-value-selector
+ *   [facets]="facets"
+ *   (selectedValuesChange)="selectedValues = $event"
+ * ></vdr-facet-value-selector>
+ * ```
+ * The `facets` input should be provided from the parent component
+ * like this:
+ *
+ * @example
+ * ```TypeScript
+ * this.facets = this.dataService
+ *   .facet.getAllFacets()
+ *   .mapSingle(data => data.facets.items);
+ * ```
+ * @docsCategory components
+ */
 class FacetValueSelectorComponent {
     constructor(dataService) {
         this.dataService = dataService;
@@ -10934,7 +12055,15 @@ DialogTitleDirective.ctorParameters = () => [
 ];
 
 /**
+ * @description
  * This component displays a plain JavaScript object as an expandable tree.
+ *
+ * @example
+ * ```HTML
+ * <vdr-object-tree [value]="payment.metadata"></vdr-object-tree>
+ * ```
+ *
+ * @docsCategory components
  */
 class ObjectTreeComponent {
     constructor(parent) {
@@ -10955,7 +12084,7 @@ class ObjectTreeComponent {
         return typeof value === 'object' && value !== null;
     }
     getEntries(inputValue) {
-        if (typeof inputValue === 'string') {
+        if (!this.isObject(inputValue)) {
             return [{ key: '', value: inputValue }];
         }
         return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
@@ -10964,7 +12093,7 @@ class ObjectTreeComponent {
 ObjectTreeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-object-tree',
-                template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value)\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!isObject(entry.value)\">\r\n            {{ entry.value }}\r\n        </ng-container>\r\n    </li>\r\n</ul>\r\n",
+                template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1{margin-left:6px}.object-tree-node.depth-2{margin-left:6px}.object-tree-node.depth-3{margin-left:6px}.object-tree-node.depth-4{margin-left:6px}.object-tree-node.depth-5{margin-left:6px}.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"]
             },] }
@@ -10977,6 +12106,16 @@ ObjectTreeComponent.propDecorators = {
     isArrayItem: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Displays the state of an order in a colored chip.
+ *
+ * @example
+ * ```HTML
+ * <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
+ * ```
+ * @docsCategory components
+ */
 class OrderStateLabelComponent {
     get chipColorType() {
         switch (this.state) {
@@ -11030,6 +12169,18 @@ PaginationControlsComponent.propDecorators = {
     pageChange: [{ type: Output }]
 };
 
+/**
+ * @description
+ * A component for selecting product variants via an autocomplete-style select input.
+ *
+ * @example
+ * ```HTML
+ * <vdr-product-selector
+ *   (productSelected)="selectResult($event)"></vdr-product-selector>
+ * ```
+ *
+ * @docsCategory components
+ */
 class ProductSelectorComponent {
     constructor(dataService) {
         this.dataService = dataService;
@@ -11750,7 +12901,18 @@ ProsemirrorService.ctorParameters = () => [
 ];
 
 /**
- * A rich text (HTML) editor based on Trix (https://github.com/basecamp/trix)
+ * @description
+ * A rich text (HTML) editor based on Prosemirror (https://prosemirror.net/)
+ *
+ * @example
+ * ```HTML
+ * <vdr-rich-text-editor
+ *     [(ngModel)]="description"
+ *     label="Description"
+ * ></vdr-rich-text-editor>
+ * ```
+ *
+ * @docsCategory components
  */
 class RichTextEditorComponent {
     constructor(changeDetector, prosemirrorService) {
@@ -11807,7 +12969,7 @@ RichTextEditorComponent.decorators = [
                     },
                     ProsemirrorService,
                 ],
-                styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-right:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-right:1px solid var(--color-component-border-200);margin-right:3px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:white;color:var(--color-grey-600);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-100)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid var(--color-grey-100);margin-left:0;margin-right:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:normal;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-grey-800)}:host{display:block;max-width:710px;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}::ng-deep .ProseMirror-menubar{position:sticky;top:24px;margin-top:6px;border:1px solid var(--color-component-border-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);padding:6px 12px}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);min-height:128px;border:1px solid var(--color-component-border-200);border-radius:0 0 3px 3px;transition:border-color .2s;overflow:auto}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}\n"]
+                styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-right:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-right:1px solid var(--color-component-border-200);margin-right:3px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:white;color:var(--color-grey-600);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-100)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid var(--color-grey-100);margin-left:0;margin-right:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:normal;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-grey-800)!important}:host{display:block;max-width:710px;margin-bottom:.5rem}:host.readonly ::ng-deep .ProseMirror-menubar{display:none}::ng-deep .ProseMirror-menubar{position:sticky;top:24px;margin-top:6px;border:1px solid var(--color-component-border-200);border-bottom:none;background-color:var(--color-component-bg-200);color:var(--color-icon-button);padding:6px 12px;display:flex;flex-wrap:wrap}::ng-deep .vdr-prosemirror{background:var(--color-form-input-bg);min-height:128px;min-width:200px;border:1px solid var(--color-component-border-200);border-radius:0 0 3px 3px;transition:border-color .2s;overflow:auto;text-align:initial}::ng-deep .vdr-prosemirror:focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}::ng-deep .vdr-prosemirror hr{padding:2px 10px;border:none;margin:1em 0}::ng-deep .vdr-prosemirror hr:after{content:\"\";display:block;height:1px;background-color:silver;line-height:2px}::ng-deep .vdr-prosemirror img{cursor:default;max-width:100%}\n"]
             },] }
 ];
 RichTextEditorComponent.ctorParameters = () => [
@@ -11865,6 +13027,53 @@ StatusBadgeComponent.propDecorators = {
     type: [{ type: Input }]
 };
 
+class TabbedCustomFieldsComponent {
+    constructor() {
+        this.readonly = false;
+        this.compact = false;
+        this.showLabel = true;
+        this.defaultTabName = '__default_tab__';
+    }
+    ngOnInit() {
+        this.tabbedCustomFields = this.groupByTabs(this.customFields);
+    }
+    customFieldIsSet(name) {
+        return !!this.customFieldsFormGroup.get(name);
+    }
+    groupByTabs(customFieldConfigs) {
+        var _a, _b, _c;
+        const tabMap = new Map();
+        for (const field of customFieldConfigs) {
+            const tabName = (_b = (_a = field.ui) === null || _a === void 0 ? void 0 : _a.tab) !== null && _b !== void 0 ? _b : this.defaultTabName;
+            if (tabMap.has(tabName)) {
+                (_c = tabMap.get(tabName)) === null || _c === void 0 ? void 0 : _c.push(field);
+            }
+            else {
+                tabMap.set(tabName, [field]);
+            }
+        }
+        return Array.from(tabMap.entries())
+            .sort((a, b) => (a[0] === this.defaultTabName ? -1 : 1))
+            .map(([tabName, customFields]) => ({ tabName, customFields }));
+    }
+}
+TabbedCustomFieldsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-tabbed-custom-fields',
+                template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                group.tabName === defaultTabName\r\n                    ? ('common.general' | translate)\r\n                    : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt4\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n        <vdr-custom-field-control\r\n            *ngIf=\"customFieldIsSet(customField.name)\"\r\n            [entityName]=\"entityName\"\r\n            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            [customField]=\"customField\"\r\n            [readonly]=\"readonly\"\r\n            [compact]=\"compact\"\r\n            [showLabel]=\"showLabel\"\r\n        ></vdr-custom-field-control>\r\n    </ng-container>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+TabbedCustomFieldsComponent.propDecorators = {
+    entityName: [{ type: Input }],
+    customFields: [{ type: Input }],
+    customFieldsFormGroup: [{ type: Input }],
+    readonly: [{ type: Input }],
+    compact: [{ type: Input }],
+    showLabel: [{ type: Input }]
+};
+
 /**
  * A button link to be used as actions in rows of a table.
  */
@@ -11987,13 +13196,42 @@ TitleInputComponent.decorators = [
                 selector: 'vdr-title-input',
                 template: "<ng-content></ng-content>\r\n<div class=\"edit-icon\" *ngIf=\"!readonly\">\r\n    <clr-icon shape=\"edit\"></clr-icon>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;position:relative}:host ::ng-deep input{font-size:18px;color:var(--clr-p1-color);max-width:100%}:host ::ng-deep input:not(:focus){border-color:transparent!important;background-color:transparent!important}:host ::ng-deep input:focus{background-color:var(--clr-global-app-background)}:host ::ng-deep .clr-control-container{max-width:100%}:host ::ng-deep .clr-input-wrapper{max-width:100%!important}:host .edit-icon{position:absolute;right:8px;top:6px;color:var(--color-grey-300);opacity:0;transition:opacity .2s}:host:hover ::ng-deep input:not(:focus){background-color:var(--color-component-bg-200)!important}:host:hover .edit-icon{opacity:1}:host.readonly .edit-icon{display:none}:host.readonly:hover ::ng-deep input:not(:focus){background-color:var(--color-grey-200)!important}\n"]
+                styles: [":host{display:block;position:relative}:host ::ng-deep input{font-size:18px;color:var(--clr-p1-color);max-width:100%}:host ::ng-deep input:not(:focus){border-color:transparent!important;background-color:var(--color-component-bg-100)!important}:host ::ng-deep input:focus{background-color:var(--clr-global-app-background)}:host ::ng-deep .clr-control-container{max-width:100%}:host ::ng-deep .clr-input-wrapper{max-width:100%!important}:host .edit-icon{position:absolute;right:8px;top:6px;color:var(--color-grey-400);opacity:0;transition:opacity .2s}:host:hover ::ng-deep input:not(:focus){background-color:var(--color-component-bg-200)!important}:host:hover .edit-icon{opacity:1}:host.readonly .edit-icon{display:none}:host.readonly:hover ::ng-deep input:not(:focus){background-color:var(--color-grey-200)!important}\n"]
             },] }
 ];
 TitleInputComponent.propDecorators = {
     readonly: [{ type: HostBinding, args: ['class.readonly',] }, { type: Input }]
 };
 
+class UiExtensionPointComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.isDevMode = isDevMode();
+    }
+    ngOnInit() {
+        this.display$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.displayUiExtensionPoints);
+    }
+}
+UiExtensionPointComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-ui-extension-point',
+                template: "<div [class.highlight]=\"isDevMode && (display$ | async)\" class=\"wrapper\">\r\n    <vdr-dropdown *ngIf=\"isDevMode && (display$ | async)\">\r\n        <button class=\"btn btn-icon btn-link extension-point-info-trigger\"\r\n                [style.top.px]=\"topPx ?? 0\"\r\n                [style.left.px]=\"leftPx ?? 0\"\r\n                vdrDropdownTrigger>\r\n            <clr-icon shape=\"plugin\" class=\"\" size=\"16\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu>\r\n            <div class=\"extension-info\">\r\n                <pre *ngIf=\"api === 'actionBar'\">\r\naddActionBarItem({{ '{' }}\r\n  id: 'my-button',\r\n  label: 'My Action',\r\n  locationId: '{{ locationId }}',\r\n{{ '}' }})</pre>\r\n                <pre *ngIf=\"api === 'navMenu'\">\r\naddNavMenuItem({{ '{' }}\r\n  id: 'my-menu-item',\r\n  label: 'My Menu Item',\r\n  routerLink: ['/extensions/my-plugin'],\r\n  {{ '}' }},\r\n  '{{ locationId }}'\r\n)</pre>\r\n                <pre *ngIf=\"api === 'detailComponent'\">\r\nregisterCustomDetailComponent({{ '{' }}\r\n  locationId: '{{ locationId }}',\r\n  component: MyCustomComponent,\r\n{{ '}' }})</pre>\r\n            </div>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n    <ng-content></ng-content>\r\n</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{position:relative;display:inline-block}.wrapper{display:inline-block;height:100%}.extension-point-info-trigger{position:absolute;margin:0;padding:0;z-index:100}.extension-point-info-trigger clr-icon{color:var(--color-success-500)}.extension-info{padding:12px}pre{padding:6px;font-family:\"Source Code Pro\",\"Lucida Console\",Monaco,monospace;background-color:var(--color-grey-200)}\n"]
+            },] }
+];
+UiExtensionPointComponent.ctorParameters = () => [
+    { type: DataService }
+];
+UiExtensionPointComponent.propDecorators = {
+    locationId: [{ type: Input }],
+    topPx: [{ type: Input }],
+    leftPx: [{ type: Input }],
+    api: [{ type: Input }]
+};
+
 /**
  * Allows declarative binding to the "disabled" property of a reactive form
  * control.
@@ -12139,6 +13377,20 @@ IfDefaultChannelActiveDirective.propDecorators = {
     vdrIfMultichannelElse: [{ type: Input }]
 };
 
+/**
+ * @description
+ * Structural directive that displays the given element if the Vendure instance has multiple channels
+ * configured.
+ *
+ * @example
+ * ```html
+ * <div *vdrIfMultichannel class="channel-selector">
+ *   <!-- ... -->
+ * </ng-container>
+ * ```
+ *
+ * @docsCategory directives
+ */
 class IfMultichannelDirective extends IfDirectiveBase {
     constructor(_viewContainer, templateRef, dataService) {
         super(_viewContainer, templateRef, () => {
@@ -12170,6 +13422,7 @@ IfMultichannelDirective.propDecorators = {
 };
 
 /**
+ * @description
  * Conditionally shows/hides templates based on the current active user having the specified permission.
  * Based on the ngIf source. Also support "else" templates:
  *
@@ -12181,6 +13434,8 @@ IfMultichannelDirective.propDecorators = {
  *
  * The permission can be a single string, or an array. If an array is passed, then _all_ of the permissions
  * must match (logical AND)
+ *
+ * @docsCategory directives
  */
 class IfPermissionsDirective extends IfDirectiveBase {
     constructor(_viewContainer, templateRef, dataService, changeDetectorRef) {
@@ -12310,6 +13565,7 @@ class DynamicFormInputComponent {
                             this.onChange(val);
                             this.control.patchValue(val, { emitEvent: false });
                         });
+                        setTimeout(() => this.changeDetectorRef.markForCheck());
                     }
                 };
                 // initial render
@@ -12813,6 +14069,20 @@ RelationCardComponent.propDecorators = {
     detailTemplate: [{ type: ContentChild, args: [RelationCardDetailDirective, { read: TemplateRef },] }]
 };
 
+/**
+ * @description
+ * Given an Asset object (an object with `preview` and optionally `focalPoint` properties), this pipe
+ * returns a string with query parameters designed to work with the image resize capabilities of the
+ * AssetServerPlugin.
+ *
+ * @example
+ * ```HTML
+ * <img [src]="asset | assetPreview:'tiny'" />
+ * <img [src]="asset | assetPreview:150" />
+ * ```
+ *
+ * @docsCategory pipes
+ */
 class AssetPreviewPipe {
     transform(asset, preset = 'thumb') {
         if (!asset) {
@@ -12897,8 +14167,16 @@ CustomFieldLabelPipe.ctorParameters = () => [
 ];
 
 /**
+ * @description
  * Displays a number of milliseconds in a more human-readable format,
  * e.g. "12ms", "33s", "2:03m"
+ *
+ * @example
+ * ```TypeScript
+ * {{ timeInMs | duration }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class DurationPipe {
     constructor(i18nService) {
@@ -12934,7 +14212,15 @@ DurationPipe.ctorParameters = () => [
 ];
 
 /**
+ * @description
  * Formats a number into a human-readable file size string.
+ *
+ * @example
+ * ```TypeScript
+ * {{ fileSizeInBytes | filesize }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class FileSizePipe {
     transform(value, useSiUnits = true) {
@@ -12968,13 +14254,15 @@ function humanFileSize(bytes, si) {
 }
 
 /**
+ * @description
  * A pipe which checks the provided permission against all the permissions of the current user.
  * Returns `true` if the current user has that permission.
  *
  * @example
- * ```
+ * ```HTML
  * <button [disabled]="!('UpdateCatalog' | hasPermission)">Save Changes</button>
  * ```
+ * @docsCategory pipes
  */
 class HasPermissionPipe {
     constructor(dataService, changeDetectorRef) {
@@ -13037,9 +14325,12 @@ class LocaleBasePipe {
         if (dataService && changeDetectorRef) {
             this.subscription = dataService.client
                 .uiState()
-                .mapStream(data => data.uiState.language)
-                .subscribe(languageCode => {
-                this.locale = languageCode.replace(/_/g, '-');
+                .mapStream(data => data.uiState)
+                .subscribe(({ language, locale }) => {
+                this.locale = language.replace(/_/g, '-');
+                if (locale) {
+                    this.locale += `-${locale}`;
+                }
                 changeDetectorRef.markForCheck();
             });
         }
@@ -13059,7 +14350,15 @@ LocaleBasePipe.ctorParameters = () => [
 ];
 
 /**
+ * @description
  * Displays a human-readable name for a given ISO 4217 currency code.
+ *
+ * @example
+ * ```HTML
+ * {{ order.currencyCode | localeCurrencyName }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class LocaleCurrencyNamePipe extends LocaleBasePipe {
     constructor(dataService, changeDetectorRef) {
@@ -13105,6 +14404,18 @@ LocaleCurrencyNamePipe.ctorParameters = () => [
     { type: ChangeDetectorRef, decorators: [{ type: Optional }] }
 ];
 
+/**
+ * @description
+ * Formats a Vendure monetary value (in cents) into the correct format for the configured currency and display
+ * locale.
+ *
+ * @example
+ * ```HTML
+ * {{ variant.priceWithTax | localeCurrency }}
+ * ```
+ *
+ * @docsCategory pipes
+ */
 class LocaleCurrencyPipe extends LocaleBasePipe {
     constructor(dataService, changeDetectorRef) {
         super(dataService, changeDetectorRef);
@@ -13134,6 +14445,13 @@ LocaleCurrencyPipe.ctorParameters = () => [
  * @description
  * A replacement of the Angular DatePipe which makes use of the Intl API
  * to format dates according to the selected UI language.
+ *
+ * @example
+ * ```HTML
+ * {{ order.orderPlacedAt | localeDate }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class LocaleDatePipe extends LocaleBasePipe {
     constructor(dataService, changeDetectorRef) {
@@ -13201,7 +14519,15 @@ LocaleDatePipe.ctorParameters = () => [
 ];
 
 /**
- * Displays a human-readable name for a given ISO 4217 currency code.
+ * @description
+ * Displays a human-readable name for a given ISO 639-1 language code.
+ *
+ * @example
+ * ```HTML
+ * {{ 'zh_Hant' | localeLanguageName }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class LocaleLanguageNamePipe extends LocaleBasePipe {
     constructor(dataService, changeDetectorRef) {
@@ -13237,6 +14563,51 @@ LocaleLanguageNamePipe.ctorParameters = () => [
     { type: ChangeDetectorRef, decorators: [{ type: Optional }] }
 ];
 
+/**
+ * @description
+ * Displays a human-readable name for a given region.
+ *
+ * @example
+ * ```HTML
+ * {{ 'GB' | localeRegionName }}
+ * ```
+ *
+ * @docsCategory pipes
+ */
+class LocaleRegionNamePipe extends LocaleBasePipe {
+    constructor(dataService, changeDetectorRef) {
+        super(dataService, changeDetectorRef);
+    }
+    transform(value, locale) {
+        var _a;
+        if (value == null || value === '') {
+            return '';
+        }
+        if (typeof value !== 'string') {
+            return `Invalid region code "${value}"`;
+        }
+        const activeLocale = typeof locale === 'string' ? locale : (_a = this.locale) !== null && _a !== void 0 ? _a : 'en';
+        // Awaiting TS types for this API: https://github.com/microsoft/TypeScript/pull/44022/files
+        const DisplayNames = Intl.DisplayNames;
+        try {
+            return new DisplayNames([activeLocale.replace('_', '-')], { type: 'region' }).of(value.replace('_', '-'));
+        }
+        catch (e) {
+            return value;
+        }
+    }
+}
+LocaleRegionNamePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'localeRegionName',
+                pure: false,
+            },] }
+];
+LocaleRegionNamePipe.ctorParameters = () => [
+    { type: DataService, decorators: [{ type: Optional }] },
+    { type: ChangeDetectorRef, decorators: [{ type: Optional }] }
+];
+
 /**
  * Formats a string into sentence case (first letter of first word uppercase).
  */
@@ -13384,7 +14755,15 @@ StringToColorPipe.decorators = [
 ];
 
 /**
+ * @description
  * Converts a date into the format "3 minutes ago", "5 hours ago" etc.
+ *
+ * @example
+ * ```HTML
+ * {{ order.orderPlacedAt | timeAgo }}
+ * ```
+ *
+ * @docsCategory pipes
  */
 class TimeAgoPipe {
     constructor(i18nService) {
@@ -13546,11 +14925,15 @@ const DECLARATIONS = [
     LocaleDatePipe,
     LocaleCurrencyPipe,
     LocaleLanguageNamePipe,
+    LocaleRegionNamePipe,
     TagSelectorComponent,
     ManageTagsDialogComponent,
     RelationSelectorDialogComponent,
     RelationCardComponent,
     StatusBadgeComponent,
+    TabbedCustomFieldsComponent,
+    UiExtensionPointComponent,
+    CustomDetailComponentHostComponent,
 ];
 const DYNAMIC_FORM_INPUTS = [
     TextFormInputComponent,
@@ -13571,6 +14954,8 @@ const DYNAMIC_FORM_INPUTS = [
     RelationCardDetailDirective,
     RelationSelectorDialogComponent,
     TextareaFormInputComponent,
+    RichTextFormInputComponent,
+    JsonEditorFormInputComponent,
 ];
 class SharedModule {
 }
@@ -13691,6 +15076,45 @@ AppComponentModule.decorators = [
             },] }
 ];
 
+/**
+ * @description
+ * A base class for entity detail views. It should be used in conjunction with the
+ * {@link BaseEntityResolver}.
+ *
+ * @example
+ * ```TypeScript
+ * \@Component({
+ *   selector: 'app-my-entity',
+ *   templateUrl: './my-entity.component.html',
+ *   styleUrls: ['./my-entity.component.scss'],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ * })
+ * export class GlobalSettingsComponent extends BaseDetailComponent<MyEntity.Fragment> implements OnInit {
+ *   detailForm: FormGroup;
+ *
+ *   constructor(
+ *     router: Router,
+ *     route: ActivatedRoute,
+ *     serverConfigService: ServerConfigService,
+ *     protected dataService: DataService,
+ *     private formBuilder: FormBuilder,
+ *   ) {
+ *     super(route, router, serverConfigService, dataService);
+ *     this.detailForm = this.formBuilder.group({
+ *       name: [''],
+ *     });
+ *   }
+ *
+ *   protected setFormValues(entity: MyEntity.Fragment, languageCode: LanguageCode): void {
+ *     this.detailForm.patchValue({
+ *       name: entity.name,
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @docsCategory list-detail-views
+ */
 class BaseDetailComponent {
     constructor(route, router, serverConfigService, dataService) {
         this.route = route;
@@ -13729,6 +15153,19 @@ class BaseDetailComponent {
     canDeactivate() {
         return this.detailForm && this.detailForm.pristine;
     }
+    setCustomFieldFormValues(customFields, formGroup, entity, currentTranslation) {
+        var _a, _b;
+        for (const fieldDef of customFields) {
+            const key = fieldDef.name;
+            const value = fieldDef.type === 'localeString'
+                ? (_a = currentTranslation.customFields) === null || _a === void 0 ? void 0 : _a[key]
+                : (_b = entity.customFields) === null || _b === void 0 ? void 0 : _b[key];
+            const control = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get(key);
+            if (control) {
+                control.patchValue(value);
+            }
+        }
+    }
     getCustomFieldConfig(key) {
         return this.serverConfigService.getCustomFieldsFor(key);
     }
@@ -13749,8 +15186,34 @@ function createResolveData(resolver) {
     };
 }
 /**
+ * @description
  * A base resolver for an entity detail route. Resolves to an observable of the given entity, or a "blank"
- * version if the route id equals "create".
+ * version if the route id equals "create". Should be used together with details views which extend the
+ * {@link BaseDetailComponent}.
+ *
+ * @example
+ * ```TypeScript
+ * \@Injectable({
+ *   providedIn: 'root',
+ * })
+ * export class MyEntityResolver extends BaseEntityResolver<MyEntity.Fragment> {
+ *   constructor(router: Router, dataService: DataService) {
+ *     super(
+ *       router,
+ *       {
+ *         __typename: 'MyEntity',
+ *         id: '',
+ *         createdAt: '',
+ *         updatedAt: '',
+ *         name: '',
+ *       },
+ *       id => dataService.query(GET_MY_ENTITY, { id }).mapStream(data => data.myEntity),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * @docsCategory list-detail-views
  */
 class BaseEntityResolver {
     constructor(router, emptyEntity, entityStream) {
@@ -13758,6 +15221,7 @@ class BaseEntityResolver {
         this.emptyEntity = emptyEntity;
         this.entityStream = entityStream;
     }
+    /** @internal */
     resolve(route, state) {
         const id = route.paramMap.get('id');
         // Complete the entity stream upon navigating away
@@ -13773,8 +15237,70 @@ class BaseEntityResolver {
 }
 
 /**
+ * @description
  * This is a base class which implements the logic required to fetch and manipulate
  * a list of data from a query which returns a PaginatedList type.
+ *
+ * @example
+ * ```TypeScript
+ * \@Component({
+ *   selector: 'my-entity-list',
+ *   templateUrl: './my-entity-list.component.html',
+ *   styleUrls: ['./my-entity-list.component.scss'],
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ * })
+ * export class MyEntityListComponent extends BaseListComponent<GetMyEntityList.Query, GetMyEntityList.Items> {
+ *   constructor(
+ *     private dataService: DataService,
+ *     router: Router,
+ *     route: ActivatedRoute,
+ *   ) {
+ *     super(router, route);
+ *     super.setQueryFn(
+ *       (...args: any[]) => this.dataService.query<GetMyEntityList.Query>(GET_MY_ENTITY_LIST),
+ *       data => data.myEntities,
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * The template for the component will typically use the {@link DataTableComponent} to display the results.
+ *
+ * @example
+ * ```HTML
+ * <vdr-action-bar>
+ *   <vdr-ab-right>
+ *     <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="['CreateSettings', 'CreateTaxRate']">
+ *       <clr-icon shape="plus"></clr-icon>
+ *       Create new my entity
+ *     </a>
+ *   </vdr-ab-right>
+ * </vdr-action-bar>
+ *
+ * <vdr-data-table
+ *   [items]="items$ | async"
+ *   [itemsPerPage]="itemsPerPage$ | async"
+ *   [totalItems]="totalItems$ | async"
+ *   [currentPage]="currentPage$ | async"
+ *   (pageChange)="setPageNumber($event)"
+ *   (itemsPerPageChange)="setItemsPerPage($event)"
+ * >
+ *   <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
+ *   <vdr-dt-column></vdr-dt-column>
+ *   <ng-template let-myEntity="item">
+ *     <td class="left align-middle">{{ myEntity.name }}</td>
+ *     <td class="right align-middle">
+ *       <vdr-table-row-action
+ *         iconShape="edit"
+ *         [label]="'common.edit' | translate"
+ *         [linkTo]="['./', myEntity.id]"
+ *       ></vdr-table-row-action>
+ *     </td>
+ *   </ng-template>
+ * </vdr-data-table>
+ * ```
+ *
+ * @docsCategory list-detail-views
  */
 // tslint:disable-next-line:directive-class-suffix
 class BaseListComponent {
@@ -13787,6 +15313,7 @@ class BaseListComponent {
         this.defaults = { take: 10, skip: 0 };
     }
     /**
+     * @description
      * Sets the fetch function for the list being implemented.
      */
     setQueryFn(listQueryFn, mappingFn, onPageChangeFn, defaults) {
@@ -13799,6 +15326,7 @@ class BaseListComponent {
             this.defaults = defaults;
         }
     }
+    /** @internal */
     ngOnInit() {
         if (!this.listQueryFn) {
             throw new Error(`No listQueryFn has been defined. Please call super.setQueryFn() in the constructor.`);
@@ -13818,19 +15346,29 @@ class BaseListComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe(fetchPage);
     }
+    /** @internal */
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
         this.listQuery.completed$.next();
     }
+    /**
+     * @description
+     * Sets the current page number in the url.
+     */
     setPageNumber(page) {
         this.setQueryParam('page', page, { replaceUrl: true });
     }
+    /**
+     * @description
+     * Sets the number of items per page in the url.
+     */
     setItemsPerPage(perPage) {
         this.setQueryParam('perPage', perPage, { replaceUrl: true });
     }
     /**
-     * Re-fetch the current page
+     * @description
+     * Re-fetch the current page of results.
      */
     refresh() {
         this.refresh$.next(undefined);
@@ -13955,7 +15493,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '1.3.2';
+const ADMIN_UI_VERSION = '1.4.0';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.
@@ -14175,5 +15713,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, ASSET_FRAGMENT, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddressFormComponent, AdjustmentType, AdministratorDataService, AffixedInputComponent, AppComponent, AppComponentModule, AppShellComponent, AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewPipe, AssetSearchInputComponent, AssetType, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BooleanFormInputComponent, BreadcrumbComponent, CANCEL_JOB, CANCEL_ORDER, CHANNEL_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelLabelPipe, ChannelSwitcherComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, ComponentRegistryService, ConfigurableInputComponent, CoreModule, CurrencyCode, CurrencyFormInputComponent, CurrencyInputComponent, CustomFieldComponentService, CustomFieldControlComponent, CustomFieldLabelPipe, CustomHttpTranslationLoader, CustomerDataService, CustomerGroupFormInputComponent, CustomerLabelComponent, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ASSETS, DELETE_CHANNEL, DELETE_COLLECTION, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_NOTE, DELETE_FACET, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PRODUCT, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_ROLE, DELETE_SHIPPING_METHOD, DELETE_TAG, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_ZONE, DISCOUNT_FRAGMENT, DashboardWidgetService, DataModule, DataService, DataTableColumnComponent, DataTableComponent, DateFormInputComponent, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueSelectorComponent, FetchAdapter, FileSizePipe, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ADMINISTRATOR, GET_ADMINISTRATORS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNEL, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_COUNTRY, GET_COUNTRY_LIST, GET_CURRENT_USER, GET_CUSTOMER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_LIST, GET_FACET_WITH_VALUES, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_ORDER_SUMMARY, GET_PAYMENT_METHOD, GET_PAYMENT_METHOD_LIST, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_PROMOTION, GET_PROMOTION_LIST, GET_ROLE, GET_ROLES, GET_SERVER_CONFIG, GET_SHIPPING_METHOD, GET_SHIPPING_METHOD_LIST, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_CATEGORY, GET_TAX_RATE, GET_TAX_RATE_LIST, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONES, GLOBAL_SETTINGS_FRAGMENT, GlobalFlag, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryDetailComponent, HistoryEntryType, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobQueueService, JobState, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, ModalDialogComponent, ModalService, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderDataService, OrderStateLabelComponent, OverlayHostComponent, OverlayHostService, PAYMENT_METHOD_FRAGMENT, PRODUCT_DETAIL_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PaginationControlsComponent, PasswordFormInputComponent, PercentageSuffixInputComponent, Permission, ProductDataService, ProductSelectorComponent, ProductSelectorFormInputComponent, PromotionDataService, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RelationAssetInputComponent, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomerInputComponent, RelationFormInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RichTextEditorComponent, SEARCH_PRODUCTS, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_CONTENT_LANGUAGE, SET_UI_LANGUAGE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SelectFormInputComponent, SelectToggleComponent, SentenceCasePipe, ServerConfigService, SettingsDataService, SharedModule, ShippingMethodDataService, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, StateI18nTokenPipe, StatusBadgeComponent, StockMovementType, StringToColorPipe, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TableRowActionComponent, TagSelectorComponent, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiLanguageSwitcherDialogComponent, UserMenuComponent, ZONE_FRAGMENT, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createResolveData, createUpdatedTranslatable, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, encodeConfigArgValue, findTranslation, flattenFacetValues, getAppConfig, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getLocales, getMarkRange, getServerLocation, headingRule, hostExternalFrame, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, registerCustomFieldComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, removeReadonlyCustomFields, setDashboardWidgetLayout, stringToColor, toConfigurableOperationInput, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8 };
+export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, ASSET_FRAGMENT, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddressFormComponent, AdjustmentType, AdministratorDataService, AffixedInputComponent, AppComponent, AppComponentModule, AppShellComponent, AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewPipe, AssetSearchInputComponent, AssetType, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BooleanFormInputComponent, BreadcrumbComponent, CANCEL_JOB, CANCEL_ORDER, CHANNEL_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelLabelPipe, ChannelSwitcherComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, ComponentRegistryService, ConfigurableInputComponent, CoreModule, CurrencyCode, CurrencyFormInputComponent, CurrencyInputComponent, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldControlComponent, CustomFieldLabelPipe, CustomHttpTranslationLoader, CustomerDataService, CustomerGroupFormInputComponent, CustomerLabelComponent, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ASSETS, DELETE_CHANNEL, DELETE_COLLECTION, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_NOTE, DELETE_FACET, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PRODUCT, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_ROLE, DELETE_SHIPPING_METHOD, DELETE_TAG, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_ZONE, DISCOUNT_FRAGMENT, DashboardWidgetService, DataModule, DataService, DataTableColumnComponent, DataTableComponent, DateFormInputComponent, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueSelectorComponent, FetchAdapter, FileSizePipe, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ADMINISTRATOR, GET_ADMINISTRATORS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNEL, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_COUNTRY, GET_COUNTRY_LIST, GET_CURRENT_USER, GET_CUSTOMER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_LIST, GET_FACET_WITH_VALUES, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_ORDER_SUMMARY, GET_PAYMENT_METHOD, GET_PAYMENT_METHOD_LIST, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_PROMOTION, GET_PROMOTION_LIST, GET_ROLE, GET_ROLES, GET_SERVER_CONFIG, GET_SHIPPING_METHOD, GET_SHIPPING_METHOD_LIST, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_CATEGORY, GET_TAX_RATE, GET_TAX_RATE_LIST, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONES, GLOBAL_SETTINGS_FRAGMENT, GlobalFlag, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryDetailComponent, HistoryEntryType, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, ModalDialogComponent, ModalService, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderDataService, OrderStateLabelComponent, OverlayHostComponent, OverlayHostService, PAYMENT_METHOD_FRAGMENT, PRODUCT_DETAIL_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PaginationControlsComponent, PasswordFormInputComponent, PercentageSuffixInputComponent, Permission, ProductDataService, ProductSelectorComponent, ProductSelectorFormInputComponent, PromotionDataService, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RelationAssetInputComponent, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomerInputComponent, RelationFormInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RichTextEditorComponent, RichTextFormInputComponent, SEARCH_PRODUCTS, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_CONTENT_LANGUAGE, SET_DISPLAY_UI_EXTENSION_POINTS, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SelectFormInputComponent, SelectToggleComponent, SentenceCasePipe, ServerConfigService, SettingsDataService, SharedModule, ShippingMethodDataService, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, StateI18nTokenPipe, StatusBadgeComponent, StockMovementType, StringToColorPipe, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagSelectorComponent, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UserMenuComponent, ZONE_FRAGMENT, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createResolveData, createUpdatedTranslatable, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, encodeConfigArgValue, findTranslation, flattenFacetValues, getAppConfig, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getLocales, getMarkRange, getServerLocation, headingRule, hostExternalFrame, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, jsonValidator, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, registerCustomDetailComponent, registerCustomFieldComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, removeReadonlyCustomFields, setDashboardWidgetLayout, stringToColor, toConfigurableOperationInput, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, ɵ1, ɵ10, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
 //# sourceMappingURL=vendure-admin-ui-core.js.map