npm - @vendure/admin-ui - Versions diffs - 1.3.3 → 1.4.1 - Mend

@vendure/admin-ui 1.3.3 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (252) hide show

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs/operators'), require('apollo-angular'), require('@angular/common/http'), require('@vendure/common/lib/simple-deep-clone'), require('@apollo/client/core'), require('@vendure/common/lib/shared-utils'), require('rxjs'), require('graphql'), require('@vendure/common/lib/pick'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@ngx-translate/core'), require('ngx-translate-messageformat-compiler'), require('@angular/router'), require('@vendure/common/lib/shared-constants'), require('lodash'), require('@angular/forms'), require('@biesbjerg/ngx-translate-extract-marker'), require('@apollo/client/link/context'), require('@apollo/client/link/core'), require('apollo-upload-client'), require('@vendure/common/lib/omit'), require('@angular/cdk/drag-drop'), require('@angular/cdk/overlay'), require('@clr/angular'), require('@clr/icons'), require('@clr/icons/shapes/all-shapes'), require('@ng-select/ng-select'), require('@webcomponents/custom-elements/custom-elements.min.js'), require('ngx-pagination'), require('dayjs'), require('@angular/cdk/portal'), require('prosemirror-commands'), require('prosemirror-dropcursor'), require('prosemirror-gapcursor'), require('prosemirror-history'), require('prosemirror-keymap'), require('prosemirror-menu'), require('prosemirror-model'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('prosemirror-state'), require('prosemirror-view'), require('prosemirror-inputrules')) :
-    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/core', ['exports', '@angular/core', '@angular/common', 'rxjs/operators', 'apollo-angular', '@angular/common/http', '@vendure/common/lib/simple-deep-clone', '@apollo/client/core', '@vendure/common/lib/shared-utils', 'rxjs', 'graphql', '@vendure/common/lib/pick', '@angular/platform-browser', '@angular/platform-browser/animations', '@ngx-translate/core', 'ngx-translate-messageformat-compiler', '@angular/router', '@vendure/common/lib/shared-constants', 'lodash', '@angular/forms', '@biesbjerg/ngx-translate-extract-marker', '@apollo/client/link/context', '@apollo/client/link/core', 'apollo-upload-client', '@vendure/common/lib/omit', '@angular/cdk/drag-drop', '@angular/cdk/overlay', '@clr/angular', '@clr/icons', '@clr/icons/shapes/all-shapes', '@ng-select/ng-select', '@webcomponents/custom-elements/custom-elements.min.js', 'ngx-pagination', 'dayjs', '@angular/cdk/portal', 'prosemirror-commands', 'prosemirror-dropcursor', 'prosemirror-gapcursor', 'prosemirror-history', 'prosemirror-keymap', 'prosemirror-menu', 'prosemirror-model', 'prosemirror-schema-basic', 'prosemirror-schema-list', 'prosemirror-state', 'prosemirror-view', 'prosemirror-inputrules'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].core = {}), global.ng.core, global.ng.common, global.rxjs.operators, global.apolloAngular, global.ng.common.http, global.simpleDeepClone, global.core, global.sharedUtils, global.rxjs, global.graphql, global.pick, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.i1$2, global.i1$4, global.ng.router, global.sharedConstants, global.lodash, global.ng.forms, global.ngxTranslateExtractMarker, global.context, global.core$1, global.apolloUploadClient, global.omit, global.ng.cdk.dragDrop, global.ng.cdk.overlay, global.angular, null, null, global.ngSelect, null, global.ngxPagination, global.dayjs, global.ng.cdk.portal, global.prosemirrorCommands, global.prosemirrorDropcursor, global.prosemirrorGapcursor, global.prosemirrorHistory, global.prosemirrorKeymap, global.prosemirrorMenu, global.prosemirrorModel, global.prosemirrorSchemaBasic, global.prosemirrorSchemaList, global.prosemirrorState, global.prosemirrorView, global.prosemirrorInputrules));
-}(this, (function (exports, i0, i1, operators, apolloAngular, i1$1, simpleDeepClone, core, sharedUtils, rxjs, graphql, pick, platformBrowser, animations, i1$2, i1$4, i1$3, sharedConstants, lodash, forms, ngxTranslateExtractMarker, context, core$1, apolloUploadClient, omit, dragDrop, overlay, angular, icons, allShapes, ngSelect, customElements_min_js, ngxPagination, dayjs, portal, prosemirrorCommands, prosemirrorDropcursor, prosemirrorGapcursor, prosemirrorHistory, prosemirrorKeymap, prosemirrorMenu, prosemirrorModel, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorState, prosemirrorView, prosemirrorInputrules) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs/operators'), require('apollo-angular'), require('@angular/common/http'), require('@vendure/common/lib/simple-deep-clone'), require('@apollo/client/core'), require('@vendure/common/lib/shared-utils'), require('rxjs'), require('graphql'), require('@vendure/common/lib/pick'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@ngx-translate/core'), require('ngx-translate-messageformat-compiler'), require('@angular/router'), require('@vendure/common/lib/shared-constants'), require('lodash'), require('@angular/forms'), require('@biesbjerg/ngx-translate-extract-marker'), require('@apollo/client/link/context'), require('@apollo/client/link/core'), require('apollo-upload-client'), require('@vendure/common/lib/omit'), require('codejar'), require('@angular/cdk/drag-drop'), require('@angular/cdk/overlay'), require('@clr/angular'), require('@clr/icons'), require('@clr/icons/shapes/all-shapes'), require('@ng-select/ng-select'), require('@webcomponents/custom-elements/custom-elements.min.js'), require('ngx-pagination'), require('dayjs'), require('@angular/cdk/portal'), require('prosemirror-commands'), require('prosemirror-dropcursor'), require('prosemirror-gapcursor'), require('prosemirror-history'), require('prosemirror-keymap'), require('prosemirror-menu'), require('prosemirror-model'), require('prosemirror-schema-basic'), require('prosemirror-schema-list'), require('prosemirror-state'), require('prosemirror-view'), require('prosemirror-inputrules')) :
+    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/core', ['exports', '@angular/core', '@angular/common', 'rxjs/operators', 'apollo-angular', '@angular/common/http', '@vendure/common/lib/simple-deep-clone', '@apollo/client/core', '@vendure/common/lib/shared-utils', 'rxjs', 'graphql', '@vendure/common/lib/pick', '@angular/platform-browser', '@angular/platform-browser/animations', '@ngx-translate/core', 'ngx-translate-messageformat-compiler', '@angular/router', '@vendure/common/lib/shared-constants', 'lodash', '@angular/forms', '@biesbjerg/ngx-translate-extract-marker', '@apollo/client/link/context', '@apollo/client/link/core', 'apollo-upload-client', '@vendure/common/lib/omit', 'codejar', '@angular/cdk/drag-drop', '@angular/cdk/overlay', '@clr/angular', '@clr/icons', '@clr/icons/shapes/all-shapes', '@ng-select/ng-select', '@webcomponents/custom-elements/custom-elements.min.js', 'ngx-pagination', 'dayjs', '@angular/cdk/portal', 'prosemirror-commands', 'prosemirror-dropcursor', 'prosemirror-gapcursor', 'prosemirror-history', 'prosemirror-keymap', 'prosemirror-menu', 'prosemirror-model', 'prosemirror-schema-basic', 'prosemirror-schema-list', 'prosemirror-state', 'prosemirror-view', 'prosemirror-inputrules'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].core = {}), global.ng.core, global.ng.common, global.rxjs.operators, global.apolloAngular, global.ng.common.http, global.simpleDeepClone, global.core, global.sharedUtils, global.rxjs, global.graphql, global.pick, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.i1$2, global.i1$4, global.ng.router, global.sharedConstants, global.lodash, global.ng.forms, global.ngxTranslateExtractMarker, global.context, global.core$1, global.apolloUploadClient, global.omit, global.codejar, global.ng.cdk.dragDrop, global.ng.cdk.overlay, global.angular, null, null, global.ngSelect, null, global.ngxPagination, global.dayjs, global.ng.cdk.portal, global.prosemirrorCommands, global.prosemirrorDropcursor, global.prosemirrorGapcursor, global.prosemirrorHistory, global.prosemirrorKeymap, global.prosemirrorMenu, global.prosemirrorModel, global.prosemirrorSchemaBasic, global.prosemirrorSchemaList, global.prosemirrorState, global.prosemirrorView, global.prosemirrorInputrules));
+}(this, (function (exports, i0, i1, operators, apolloAngular, i1$1, simpleDeepClone, core, sharedUtils, rxjs, graphql, pick, platformBrowser, animations, i1$2, i1$4, i1$3, sharedConstants, lodash, forms, ngxTranslateExtractMarker, context, core$1, apolloUploadClient, omit, codejar, dragDrop, overlay, angular, icons, allShapes, ngSelect, customElements_min_js, ngxPagination, dayjs, portal, prosemirrorCommands, prosemirrorDropcursor, prosemirrorGapcursor, prosemirrorHistory, prosemirrorKeymap, prosemirrorMenu, prosemirrorModel, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorState, prosemirrorView, prosemirrorInputrules) { 'use strict';
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -366,8 +366,8 @@
     var CREATE_ROLE = apolloAngular.gql(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n    mutation CreateRole($input: CreateRoleInput!) {\n        createRole(input: $input) {\n            ...Role\n        }\n    }\n    ", "\n"], ["\n    mutation CreateRole($input: CreateRoleInput!) {\n        createRole(input: $input) {\n            ...Role\n        }\n    }\n    ", "\n"])), ROLE_FRAGMENT);
     var UPDATE_ROLE = apolloAngular.gql(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject(["\n    mutation UpdateRole($input: UpdateRoleInput!) {\n        updateRole(input: $input) {\n            ...Role\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateRole($input: UpdateRoleInput!) {\n        updateRole(input: $input) {\n            ...Role\n        }\n    }\n    ", "\n"])), ROLE_FRAGMENT);
     var DELETE_ROLE = apolloAngular.gql(templateObject_14$5 || (templateObject_14$5 = __makeTemplateObject(["\n    mutation DeleteRole($id: ID!) {\n        deleteRole(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteRole($id: ID!) {\n        deleteRole(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var ASSIGN_ROLE_TO_ADMINISTRATOR = apolloAngular.gql(templateObject_15$4 || (templateObject_15$4 = __makeTemplateObject(["\n    mutation AssignRoleToAdministrator($administratorId: ID!, $roleId: ID!) {\n        assignRoleToAdministrator(administratorId: $administratorId, roleId: $roleId) {\n            ...Administrator\n        }\n    }\n    ", "\n"], ["\n    mutation AssignRoleToAdministrator($administratorId: ID!, $roleId: ID!) {\n        assignRoleToAdministrator(administratorId: $administratorId, roleId: $roleId) {\n            ...Administrator\n        }\n    }\n    ", "\n"])), ADMINISTRATOR_FRAGMENT);
-    var templateObject_1$b, templateObject_2$b, templateObject_3$b, templateObject_4$a, templateObject_5$9, templateObject_6$9, templateObject_7$9, templateObject_8$8, templateObject_9$8, templateObject_10$6, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$5, templateObject_15$4;
+    var ASSIGN_ROLE_TO_ADMINISTRATOR = apolloAngular.gql(templateObject_15$5 || (templateObject_15$5 = __makeTemplateObject(["\n    mutation AssignRoleToAdministrator($administratorId: ID!, $roleId: ID!) {\n        assignRoleToAdministrator(administratorId: $administratorId, roleId: $roleId) {\n            ...Administrator\n        }\n    }\n    ", "\n"], ["\n    mutation AssignRoleToAdministrator($administratorId: ID!, $roleId: ID!) {\n        assignRoleToAdministrator(administratorId: $administratorId, roleId: $roleId) {\n            ...Administrator\n        }\n    }\n    ", "\n"])), ADMINISTRATOR_FRAGMENT);
+    var templateObject_1$b, templateObject_2$b, templateObject_3$b, templateObject_4$a, templateObject_5$9, templateObject_6$9, templateObject_7$9, templateObject_8$8, templateObject_9$8, templateObject_10$6, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$5, templateObject_15$5;
     var AdministratorDataService = /** @class */ (function () {
         function AdministratorDataService(baseDataService) {
@@ -540,20 +540,26 @@
     var USER_STATUS_FRAGMENT = apolloAngular.gql(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n    fragment UserStatus on UserStatus {\n        username\n        isLoggedIn\n        loginTime\n        activeChannelId\n        permissions\n        channels {\n            id\n            code\n            token\n            permissions\n        }\n    }\n"], ["\n    fragment UserStatus on UserStatus {\n        username\n        isLoggedIn\n        loginTime\n        activeChannelId\n        permissions\n        channels {\n            id\n            code\n            token\n            permissions\n        }\n    }\n"])));
     var SET_AS_LOGGED_IN = apolloAngular.gql(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n    mutation SetAsLoggedIn($input: UserStatusInput!) {\n        setAsLoggedIn(input: $input) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation SetAsLoggedIn($input: UserStatusInput!) {\n        setAsLoggedIn(input: $input) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
     var SET_AS_LOGGED_OUT = apolloAngular.gql(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n    mutation SetAsLoggedOut {\n        setAsLoggedOut @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation SetAsLoggedOut {\n        setAsLoggedOut @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
-    var SET_UI_LANGUAGE = apolloAngular.gql(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n    mutation SetUiLanguage($languageCode: LanguageCode!) {\n        setUiLanguage(languageCode: $languageCode) @client\n    }\n"], ["\n    mutation SetUiLanguage($languageCode: LanguageCode!) {\n        setUiLanguage(languageCode: $languageCode) @client\n    }\n"])));
-    var SET_CONTENT_LANGUAGE = apolloAngular.gql(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    mutation SetContentLanguage($languageCode: LanguageCode!) {\n        setContentLanguage(languageCode: $languageCode) @client\n    }\n"], ["\n    mutation SetContentLanguage($languageCode: LanguageCode!) {\n        setContentLanguage(languageCode: $languageCode) @client\n    }\n"])));
-    var SET_UI_THEME = apolloAngular.gql(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n    mutation SetUiTheme($theme: String!) {\n        setUiTheme(theme: $theme) @client\n    }\n"], ["\n    mutation SetUiTheme($theme: String!) {\n        setUiTheme(theme: $theme) @client\n    }\n"])));
-    var GET_NEWTORK_STATUS = apolloAngular.gql(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n    query GetNetworkStatus {\n        networkStatus @client {\n            inFlightRequests\n        }\n    }\n"], ["\n    query GetNetworkStatus {\n        networkStatus @client {\n            inFlightRequests\n        }\n    }\n"])));
-    var GET_USER_STATUS = apolloAngular.gql(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n    query GetUserStatus {\n        userStatus @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    query GetUserStatus {\n        userStatus @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
-    var GET_UI_STATE = apolloAngular.gql(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n    query GetUiState {\n        uiState @client {\n            language\n            contentLanguage\n            theme\n        }\n    }\n"], ["\n    query GetUiState {\n        uiState @client {\n            language\n            contentLanguage\n            theme\n        }\n    }\n"])));
-    var GET_CLIENT_STATE = apolloAngular.gql(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    query GetClientState {\n        networkStatus @client {\n            inFlightRequests\n        }\n        userStatus @client {\n            ...UserStatus\n        }\n        uiState @client {\n            language\n            contentLanguage\n            theme\n        }\n    }\n    ", "\n"], ["\n    query GetClientState {\n        networkStatus @client {\n            inFlightRequests\n        }\n        userStatus @client {\n            ...UserStatus\n        }\n        uiState @client {\n            language\n            contentLanguage\n            theme\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
-    var SET_ACTIVE_CHANNEL = apolloAngular.gql(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    mutation SetActiveChannel($channelId: ID!) {\n        setActiveChannel(channelId: $channelId) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation SetActiveChannel($channelId: ID!) {\n        setActiveChannel(channelId: $channelId) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
-    var UPDATE_USER_CHANNELS = apolloAngular.gql(templateObject_14$4 || (templateObject_14$4 = __makeTemplateObject(["\n    mutation UpdateUserChannels($channels: [CurrentUserChannelInput!]!) {\n        updateUserChannels(channels: $channels) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateUserChannels($channels: [CurrentUserChannelInput!]!) {\n        updateUserChannels(channels: $channels) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
-    var templateObject_1$8, templateObject_2$8, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$8, templateObject_7$8, templateObject_8$7, templateObject_9$7, templateObject_10$5, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$4;
+    var SET_UI_LANGUAGE_AND_LOCALE = apolloAngular.gql(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n    mutation SetUiLanguage($languageCode: LanguageCode!, $locale: String) {\n        setUiLanguage(languageCode: $languageCode) @client\n        setUiLocale(locale: $locale) @client\n    }\n"], ["\n    mutation SetUiLanguage($languageCode: LanguageCode!, $locale: String) {\n        setUiLanguage(languageCode: $languageCode) @client\n        setUiLocale(locale: $locale) @client\n    }\n"])));
+    var SET_UI_LOCALE = apolloAngular.gql(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n    mutation SetUiLocale($locale: String) {\n        setUiLocale(locale: $locale) @client\n    }\n"], ["\n    mutation SetUiLocale($locale: String) {\n        setUiLocale(locale: $locale) @client\n    }\n"])));
+    var SET_DISPLAY_UI_EXTENSION_POINTS = apolloAngular.gql(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n    mutation SetDisplayUiExtensionPoints($display: Boolean!) {\n        setDisplayUiExtensionPoints(display: $display) @client\n    }\n"], ["\n    mutation SetDisplayUiExtensionPoints($display: Boolean!) {\n        setDisplayUiExtensionPoints(display: $display) @client\n    }\n"])));
+    var SET_CONTENT_LANGUAGE = apolloAngular.gql(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n    mutation SetContentLanguage($languageCode: LanguageCode!) {\n        setContentLanguage(languageCode: $languageCode) @client\n    }\n"], ["\n    mutation SetContentLanguage($languageCode: LanguageCode!) {\n        setContentLanguage(languageCode: $languageCode) @client\n    }\n"])));
+    var SET_UI_THEME = apolloAngular.gql(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n    mutation SetUiTheme($theme: String!) {\n        setUiTheme(theme: $theme) @client\n    }\n"], ["\n    mutation SetUiTheme($theme: String!) {\n        setUiTheme(theme: $theme) @client\n    }\n"])));
+    var GET_NEWTORK_STATUS = apolloAngular.gql(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n    query GetNetworkStatus {\n        networkStatus @client {\n            inFlightRequests\n        }\n    }\n"], ["\n    query GetNetworkStatus {\n        networkStatus @client {\n            inFlightRequests\n        }\n    }\n"])));
+    var GET_USER_STATUS = apolloAngular.gql(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n    query GetUserStatus {\n        userStatus @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    query GetUserStatus {\n        userStatus @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
+    var GET_UI_STATE = apolloAngular.gql(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n    query GetUiState {\n        uiState @client {\n            language\n            locale\n            contentLanguage\n            theme\n            displayUiExtensionPoints\n        }\n    }\n"], ["\n    query GetUiState {\n        uiState @client {\n            language\n            locale\n            contentLanguage\n            theme\n            displayUiExtensionPoints\n        }\n    }\n"])));
+    var GET_CLIENT_STATE = apolloAngular.gql(templateObject_14$4 || (templateObject_14$4 = __makeTemplateObject(["\n    query GetClientState {\n        networkStatus @client {\n            inFlightRequests\n        }\n        userStatus @client {\n            ...UserStatus\n        }\n        uiState @client {\n            language\n            locale\n            contentLanguage\n            theme\n            displayUiExtensionPoints\n        }\n    }\n    ", "\n"], ["\n    query GetClientState {\n        networkStatus @client {\n            inFlightRequests\n        }\n        userStatus @client {\n            ...UserStatus\n        }\n        uiState @client {\n            language\n            locale\n            contentLanguage\n            theme\n            displayUiExtensionPoints\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
+    var SET_ACTIVE_CHANNEL = apolloAngular.gql(templateObject_15$4 || (templateObject_15$4 = __makeTemplateObject(["\n    mutation SetActiveChannel($channelId: ID!) {\n        setActiveChannel(channelId: $channelId) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation SetActiveChannel($channelId: ID!) {\n        setActiveChannel(channelId: $channelId) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
+    var UPDATE_USER_CHANNELS = apolloAngular.gql(templateObject_16$4 || (templateObject_16$4 = __makeTemplateObject(["\n    mutation UpdateUserChannels($channels: [CurrentUserChannelInput!]!) {\n        updateUserChannels(channels: $channels) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateUserChannels($channels: [CurrentUserChannelInput!]!) {\n        updateUserChannels(channels: $channels) @client {\n            ...UserStatus\n        }\n    }\n    ", "\n"])), USER_STATUS_FRAGMENT);
+    var templateObject_1$8, templateObject_2$8, templateObject_3$8, templateObject_4$8, templateObject_5$8, templateObject_6$8, templateObject_7$8, templateObject_8$7, templateObject_9$7, templateObject_10$5, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$4, templateObject_16$4;
     /**
+     * @description
      * This class wraps the Apollo Angular QueryRef object and exposes some getters
      * for convenience.
+     *
+     * @docsCategory providers
+     * @docsPage DataService
      */
     var QueryResult = /** @class */ (function () {
         function QueryResult(queryRef, apollo) {
@@ -563,12 +569,14 @@
             this.valueChanges = queryRef.valueChanges;
         }
         /**
-         * Refetch this query whenever the active Channel changes.
+         * @description
+         * Re-fetch this query whenever the active Channel changes.
          */
         QueryResult.prototype.refetchOnChannelChange = function () {
             var _this = this;
-            var userStatus$ = this.apollo.watchQuery({ query: GET_USER_STATUS })
-                .valueChanges;
+            var userStatus$ = this.apollo.watchQuery({
+                query: GET_USER_STATUS,
+            }).valueChanges;
             var activeChannelId$ = userStatus$.pipe(operators.map(function (data) { return data.data.userStatus.activeChannelId; }), operators.filter(sharedUtils.notNullOrUndefined), operators.distinctUntilChanged(), operators.skip(1), operators.takeUntil(this.completed$));
             var loggedOut$ = userStatus$.pipe(operators.map(function (data) { return data.data.userStatus.isLoggedIn; }), operators.distinctUntilChanged(), operators.skip(1), operators.filter(function (isLoggedIn) { return !isLoggedIn; }), operators.takeUntil(this.completed$));
             this.valueChanges = rxjs.merge(activeChannelId$, this.queryRef.valueChanges).pipe(operators.tap(function (val) {
@@ -581,6 +589,7 @@
         };
         Object.defineProperty(QueryResult.prototype, "single$", {
             /**
+             * @description
              * Returns an Observable which emits a single result and then completes.
              */
             get: function () {
@@ -595,6 +604,7 @@
         });
         Object.defineProperty(QueryResult.prototype, "stream$", {
             /**
+             * @description
              * Returns an Observable which emits until unsubscribed.
              */
             get: function () {
@@ -615,12 +625,14 @@
             configurable: true
         });
         /**
+         * @description
          * Returns a single-result Observable after applying the map function.
          */
         QueryResult.prototype.mapSingle = function (mapFn) {
             return this.single$.pipe(operators.map(mapFn));
         };
         /**
+         * @description
          * Returns a multiple-result Observable after applying the map function.
          */
         QueryResult.prototype.mapStream = function (mapFn) {
@@ -636,8 +648,8 @@
     var CREATE_COUNTRY = apolloAngular.gql(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n    mutation CreateCountry($input: CreateCountryInput!) {\n        createCountry(input: $input) {\n            ...Country\n        }\n    }\n    ", "\n"], ["\n    mutation CreateCountry($input: CreateCountryInput!) {\n        createCountry(input: $input) {\n            ...Country\n        }\n    }\n    ", "\n"])), COUNTRY_FRAGMENT);
     var UPDATE_COUNTRY = apolloAngular.gql(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n    mutation UpdateCountry($input: UpdateCountryInput!) {\n        updateCountry(input: $input) {\n            ...Country\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateCountry($input: UpdateCountryInput!) {\n        updateCountry(input: $input) {\n            ...Country\n        }\n    }\n    ", "\n"])), COUNTRY_FRAGMENT);
     var DELETE_COUNTRY = apolloAngular.gql(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n    mutation DeleteCountry($id: ID!) {\n        deleteCountry(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCountry($id: ID!) {\n        deleteCountry(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var ZONE_FRAGMENT = apolloAngular.gql(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    fragment Zone on Zone {\n        id\n        name\n        members {\n            ...Country\n        }\n    }\n    ", "\n"], ["\n    fragment Zone on Zone {\n        id\n        name\n        members {\n            ...Country\n        }\n    }\n    ", "\n"])), COUNTRY_FRAGMENT);
-    var GET_ZONES = apolloAngular.gql(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n    query GetZones {\n        zones {\n            id\n            createdAt\n            updatedAt\n            name\n            members {\n                createdAt\n                updatedAt\n                id\n                name\n                code\n                enabled\n            }\n        }\n    }\n"], ["\n    query GetZones {\n        zones {\n            id\n            createdAt\n            updatedAt\n            name\n            members {\n                createdAt\n                updatedAt\n                id\n                name\n                code\n                enabled\n            }\n        }\n    }\n"])));
+    var ZONE_FRAGMENT = apolloAngular.gql(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n    fragment Zone on Zone {\n        id\n        createdAt\n        updatedAt\n        name\n        members {\n            ...Country\n        }\n    }\n    ", "\n"], ["\n    fragment Zone on Zone {\n        id\n        createdAt\n        updatedAt\n        name\n        members {\n            ...Country\n        }\n    }\n    ", "\n"])), COUNTRY_FRAGMENT);
+    var GET_ZONES = apolloAngular.gql(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n    query GetZones {\n        zones {\n            ...Zone\n            members {\n                createdAt\n                updatedAt\n                id\n                name\n                code\n                enabled\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetZones {\n        zones {\n            ...Zone\n            members {\n                createdAt\n                updatedAt\n                id\n                name\n                code\n                enabled\n            }\n        }\n    }\n    ", "\n"])), ZONE_FRAGMENT);
     var GET_ZONE = apolloAngular.gql(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n    query GetZone($id: ID!) {\n        zone(id: $id) {\n            ...Zone\n        }\n    }\n    ", "\n"], ["\n    query GetZone($id: ID!) {\n        zone(id: $id) {\n            ...Zone\n        }\n    }\n    ", "\n"])), ZONE_FRAGMENT);
     var CREATE_ZONE = apolloAngular.gql(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n    mutation CreateZone($input: CreateZoneInput!) {\n        createZone(input: $input) {\n            ...Zone\n        }\n    }\n    ", "\n"], ["\n    mutation CreateZone($input: CreateZoneInput!) {\n        createZone(input: $input) {\n            ...Zone\n        }\n    }\n    ", "\n"])), ZONE_FRAGMENT);
     var UPDATE_ZONE = apolloAngular.gql(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n    mutation UpdateZone($input: UpdateZoneInput!) {\n        updateZone(input: $input) {\n            ...Zone\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateZone($input: UpdateZoneInput!) {\n        updateZone(input: $input) {\n            ...Zone\n        }\n    }\n    ", "\n"])), ZONE_FRAGMENT);
@@ -649,51 +661,52 @@
     var GET_TAX_CATEGORY = apolloAngular.gql(templateObject_18$3 || (templateObject_18$3 = __makeTemplateObject(["\n    query GetTaxCategory($id: ID!) {\n        taxCategory(id: $id) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"], ["\n    query GetTaxCategory($id: ID!) {\n        taxCategory(id: $id) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"])), TAX_CATEGORY_FRAGMENT);
     var CREATE_TAX_CATEGORY = apolloAngular.gql(templateObject_19$3 || (templateObject_19$3 = __makeTemplateObject(["\n    mutation CreateTaxCategory($input: CreateTaxCategoryInput!) {\n        createTaxCategory(input: $input) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"], ["\n    mutation CreateTaxCategory($input: CreateTaxCategoryInput!) {\n        createTaxCategory(input: $input) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"])), TAX_CATEGORY_FRAGMENT);
     var UPDATE_TAX_CATEGORY = apolloAngular.gql(templateObject_20$3 || (templateObject_20$3 = __makeTemplateObject(["\n    mutation UpdateTaxCategory($input: UpdateTaxCategoryInput!) {\n        updateTaxCategory(input: $input) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateTaxCategory($input: UpdateTaxCategoryInput!) {\n        updateTaxCategory(input: $input) {\n            ...TaxCategory\n        }\n    }\n    ", "\n"])), TAX_CATEGORY_FRAGMENT);
-    var DELETE_TAX_CATEGORY = apolloAngular.gql(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n    mutation DeleteTaxCategory($id: ID!) {\n        deleteTaxCategory(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteTaxCategory($id: ID!) {\n        deleteTaxCategory(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var DELETE_TAX_CATEGORY = apolloAngular.gql(templateObject_21$3 || (templateObject_21$3 = __makeTemplateObject(["\n    mutation DeleteTaxCategory($id: ID!) {\n        deleteTaxCategory(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteTaxCategory($id: ID!) {\n        deleteTaxCategory(id: $id) {\n            result\n            message\n        }\n    }\n"])));
     var TAX_RATE_FRAGMENT = apolloAngular.gql(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n    fragment TaxRate on TaxRate {\n        id\n        createdAt\n        updatedAt\n        name\n        enabled\n        value\n        category {\n            id\n            name\n        }\n        zone {\n            id\n            name\n        }\n        customerGroup {\n            id\n            name\n        }\n    }\n"], ["\n    fragment TaxRate on TaxRate {\n        id\n        createdAt\n        updatedAt\n        name\n        enabled\n        value\n        category {\n            id\n            name\n        }\n        zone {\n            id\n            name\n        }\n        customerGroup {\n            id\n            name\n        }\n    }\n"])));
     var GET_TAX_RATE_LIST = apolloAngular.gql(templateObject_23$2 || (templateObject_23$2 = __makeTemplateObject(["\n    query GetTaxRateList($options: TaxRateListOptions) {\n        taxRates(options: $options) {\n            items {\n                ...TaxRate\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetTaxRateList($options: TaxRateListOptions) {\n        taxRates(options: $options) {\n            items {\n                ...TaxRate\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
-    var GET_TAX_RATE = apolloAngular.gql(templateObject_24$2 || (templateObject_24$2 = __makeTemplateObject(["\n    query GetTaxRate($id: ID!) {\n        taxRate(id: $id) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    query GetTaxRate($id: ID!) {\n        taxRate(id: $id) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
-    var CREATE_TAX_RATE = apolloAngular.gql(templateObject_25$2 || (templateObject_25$2 = __makeTemplateObject(["\n    mutation CreateTaxRate($input: CreateTaxRateInput!) {\n        createTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    mutation CreateTaxRate($input: CreateTaxRateInput!) {\n        createTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
-    var UPDATE_TAX_RATE = apolloAngular.gql(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["\n    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {\n        updateTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {\n        updateTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
-    var DELETE_TAX_RATE = apolloAngular.gql(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n    mutation DeleteTaxRate($id: ID!) {\n        deleteTaxRate(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteTaxRate($id: ID!) {\n        deleteTaxRate(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var CHANNEL_FRAGMENT = apolloAngular.gql(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject(["\n    fragment Channel on Channel {\n        id\n        createdAt\n        updatedAt\n        code\n        token\n        pricesIncludeTax\n        currencyCode\n        defaultLanguageCode\n        defaultShippingZone {\n            id\n            name\n        }\n        defaultTaxZone {\n            id\n            name\n        }\n    }\n"], ["\n    fragment Channel on Channel {\n        id\n        createdAt\n        updatedAt\n        code\n        token\n        pricesIncludeTax\n        currencyCode\n        defaultLanguageCode\n        defaultShippingZone {\n            id\n            name\n        }\n        defaultTaxZone {\n            id\n            name\n        }\n    }\n"])));
-    var GET_CHANNELS = apolloAngular.gql(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["\n    query GetChannels {\n        channels {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetChannels {\n        channels {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
-    var GET_CHANNEL = apolloAngular.gql(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["\n    query GetChannel($id: ID!) {\n        channel(id: $id) {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetChannel($id: ID!) {\n        channel(id: $id) {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
-    var GET_ACTIVE_CHANNEL = apolloAngular.gql(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["\n    query GetActiveChannel {\n        activeChannel {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetActiveChannel {\n        activeChannel {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
-    var CREATE_CHANNEL = apolloAngular.gql(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["\n    mutation CreateChannel($input: CreateChannelInput!) {\n        createChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateChannel($input: CreateChannelInput!) {\n        createChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CHANNEL_FRAGMENT, ERROR_RESULT_FRAGMENT);
-    var UPDATE_CHANNEL = apolloAngular.gql(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["\n    mutation UpdateChannel($input: UpdateChannelInput!) {\n        updateChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateChannel($input: UpdateChannelInput!) {\n        updateChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CHANNEL_FRAGMENT, ERROR_RESULT_FRAGMENT);
-    var DELETE_CHANNEL = apolloAngular.gql(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["\n    mutation DeleteChannel($id: ID!) {\n        deleteChannel(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteChannel($id: ID!) {\n        deleteChannel(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var PAYMENT_METHOD_FRAGMENT = apolloAngular.gql(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["\n    fragment PaymentMethod on PaymentMethod {\n        id\n        createdAt\n        updatedAt\n        name\n        code\n        description\n        enabled\n        checker {\n            ...ConfigurableOperation\n        }\n        handler {\n            ...ConfigurableOperation\n        }\n    }\n    ", "\n"], ["\n    fragment PaymentMethod on PaymentMethod {\n        id\n        createdAt\n        updatedAt\n        name\n        code\n        description\n        enabled\n        checker {\n            ...ConfigurableOperation\n        }\n        handler {\n            ...ConfigurableOperation\n        }\n    }\n    ", "\n"])), CONFIGURABLE_OPERATION_FRAGMENT);
-    var GET_PAYMENT_METHOD_LIST = apolloAngular.gql(templateObject_36$1 || (templateObject_36$1 = __makeTemplateObject(["\n    query GetPaymentMethodList($options: PaymentMethodListOptions!) {\n        paymentMethods(options: $options) {\n            items {\n                ...PaymentMethod\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethodList($options: PaymentMethodListOptions!) {\n        paymentMethods(options: $options) {\n            items {\n                ...PaymentMethod\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
-    var GET_PAYMENT_METHOD_OPERATIONS = apolloAngular.gql(templateObject_37$1 || (templateObject_37$1 = __makeTemplateObject(["\n    query GetPaymentMethodOperations {\n        paymentMethodEligibilityCheckers {\n            ...ConfigurableOperationDef\n        }\n        paymentMethodHandlers {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethodOperations {\n        paymentMethodEligibilityCheckers {\n            ...ConfigurableOperationDef\n        }\n        paymentMethodHandlers {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"])), CONFIGURABLE_OPERATION_DEF_FRAGMENT);
-    var GET_PAYMENT_METHOD = apolloAngular.gql(templateObject_38$1 || (templateObject_38$1 = __makeTemplateObject(["\n    query GetPaymentMethod($id: ID!) {\n        paymentMethod(id: $id) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethod($id: ID!) {\n        paymentMethod(id: $id) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
-    var CREATE_PAYMENT_METHOD = apolloAngular.gql(templateObject_39$1 || (templateObject_39$1 = __makeTemplateObject(["\n    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {\n        createPaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {\n        createPaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
-    var UPDATE_PAYMENT_METHOD = apolloAngular.gql(templateObject_40$1 || (templateObject_40$1 = __makeTemplateObject(["\n    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {\n        updatePaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {\n        updatePaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
-    var DELETE_PAYMENT_METHOD = apolloAngular.gql(templateObject_41$1 || (templateObject_41$1 = __makeTemplateObject(["\n    mutation DeletePaymentMethod($id: ID!, $force: Boolean) {\n        deletePaymentMethod(id: $id, force: $force) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeletePaymentMethod($id: ID!, $force: Boolean) {\n        deletePaymentMethod(id: $id, force: $force) {\n            result\n            message\n        }\n    }\n"])));
-    var GLOBAL_SETTINGS_FRAGMENT = apolloAngular.gql(templateObject_42$1 || (templateObject_42$1 = __makeTemplateObject(["\n    fragment GlobalSettings on GlobalSettings {\n        id\n        availableLanguages\n        trackInventory\n        outOfStockThreshold\n        serverConfig {\n            permissions {\n                name\n                description\n                assignable\n            }\n            orderProcess {\n                name\n            }\n        }\n    }\n"], ["\n    fragment GlobalSettings on GlobalSettings {\n        id\n        availableLanguages\n        trackInventory\n        outOfStockThreshold\n        serverConfig {\n            permissions {\n                name\n                description\n                assignable\n            }\n            orderProcess {\n                name\n            }\n        }\n    }\n"])));
-    var GET_GLOBAL_SETTINGS = apolloAngular.gql(templateObject_43$1 || (templateObject_43$1 = __makeTemplateObject(["\n    query GetGlobalSettings {\n        globalSettings {\n            ...GlobalSettings\n        }\n    }\n    ", "\n"], ["\n    query GetGlobalSettings {\n        globalSettings {\n            ...GlobalSettings\n        }\n    }\n    ", "\n"])), GLOBAL_SETTINGS_FRAGMENT);
-    var UPDATE_GLOBAL_SETTINGS = apolloAngular.gql(templateObject_44$1 || (templateObject_44$1 = __makeTemplateObject(["\n    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {\n        updateGlobalSettings(input: $input) {\n            ...GlobalSettings\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {\n        updateGlobalSettings(input: $input) {\n            ...GlobalSettings\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), GLOBAL_SETTINGS_FRAGMENT, ERROR_RESULT_FRAGMENT);
-    var CUSTOM_FIELD_CONFIG_FRAGMENT = apolloAngular.gql(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    fragment CustomFieldConfig on CustomField {\n        name\n        type\n        list\n        description {\n            languageCode\n            value\n        }\n        label {\n            languageCode\n            value\n        }\n        readonly\n        nullable\n    }\n"], ["\n    fragment CustomFieldConfig on CustomField {\n        name\n        type\n        list\n        description {\n            languageCode\n            value\n        }\n        label {\n            languageCode\n            value\n        }\n        readonly\n        nullable\n    }\n"])));
-    var STRING_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n    fragment StringCustomField on StringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n        options {\n            label {\n                languageCode\n                value\n            }\n            value\n        }\n    }\n    ", "\n"], ["\n    fragment StringCustomField on StringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n        options {\n            label {\n                languageCode\n                value\n            }\n            value\n        }\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var LOCALE_STRING_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    fragment LocaleStringCustomField on LocaleStringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n    }\n    ", "\n"], ["\n    fragment LocaleStringCustomField on LocaleStringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var TEXT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n    fragment TextCustomField on TextCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"], ["\n    fragment TextCustomField on TextCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var BOOLEAN_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n    fragment BooleanCustomField on BooleanCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"], ["\n    fragment BooleanCustomField on BooleanCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var INT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n    fragment IntCustomField on IntCustomFieldConfig {\n        ...CustomFieldConfig\n        intMin: min\n        intMax: max\n        intStep: step\n    }\n    ", "\n"], ["\n    fragment IntCustomField on IntCustomFieldConfig {\n        ...CustomFieldConfig\n        intMin: min\n        intMax: max\n        intStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var FLOAT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n    fragment FloatCustomField on FloatCustomFieldConfig {\n        ...CustomFieldConfig\n        floatMin: min\n        floatMax: max\n        floatStep: step\n    }\n    ", "\n"], ["\n    fragment FloatCustomField on FloatCustomFieldConfig {\n        ...CustomFieldConfig\n        floatMin: min\n        floatMax: max\n        floatStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var DATE_TIME_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n    fragment DateTimeCustomField on DateTimeCustomFieldConfig {\n        ...CustomFieldConfig\n        datetimeMin: min\n        datetimeMax: max\n        datetimeStep: step\n    }\n    ", "\n"], ["\n    fragment DateTimeCustomField on DateTimeCustomFieldConfig {\n        ...CustomFieldConfig\n        datetimeMin: min\n        datetimeMax: max\n        datetimeStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var RELATION_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n    fragment RelationCustomField on RelationCustomFieldConfig {\n        ...CustomFieldConfig\n        entity\n        scalarFields\n    }\n    ", "\n"], ["\n    fragment RelationCustomField on RelationCustomFieldConfig {\n        ...CustomFieldConfig\n        entity\n        scalarFields\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
-    var ALL_CUSTOM_FIELDS_FRAGMENT = apolloAngular.gql(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n    fragment CustomFields on CustomField {\n        ... on StringCustomFieldConfig {\n            ...StringCustomField\n        }\n        ... on LocaleStringCustomFieldConfig {\n            ...LocaleStringCustomField\n        }\n        ... on TextCustomFieldConfig {\n            ...TextCustomField\n        }\n        ... on BooleanCustomFieldConfig {\n            ...BooleanCustomField\n        }\n        ... on IntCustomFieldConfig {\n            ...IntCustomField\n        }\n        ... on FloatCustomFieldConfig {\n            ...FloatCustomField\n        }\n        ... on DateTimeCustomFieldConfig {\n            ...DateTimeCustomField\n        }\n        ... on RelationCustomFieldConfig {\n            ...RelationCustomField\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n"], ["\n    fragment CustomFields on CustomField {\n        ... on StringCustomFieldConfig {\n            ...StringCustomField\n        }\n        ... on LocaleStringCustomFieldConfig {\n            ...LocaleStringCustomField\n        }\n        ... on TextCustomFieldConfig {\n            ...TextCustomField\n        }\n        ... on BooleanCustomFieldConfig {\n            ...BooleanCustomField\n        }\n        ... on IntCustomFieldConfig {\n            ...IntCustomField\n        }\n        ... on FloatCustomFieldConfig {\n            ...FloatCustomField\n        }\n        ... on DateTimeCustomFieldConfig {\n            ...DateTimeCustomField\n        }\n        ... on RelationCustomFieldConfig {\n            ...RelationCustomField\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n"])), STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, TEXT_CUSTOM_FIELD_FRAGMENT, BOOLEAN_CUSTOM_FIELD_FRAGMENT, INT_CUSTOM_FIELD_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, DATE_TIME_CUSTOM_FIELD_FRAGMENT, RELATION_CUSTOM_FIELD_FRAGMENT);
-    var GET_SERVER_CONFIG = apolloAngular.gql(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n    query GetServerConfig {\n        globalSettings {\n            id\n            serverConfig {\n                orderProcess {\n                    name\n                    to\n                }\n                permittedAssetTypes\n                permissions {\n                    name\n                    description\n                    assignable\n                }\n                customFieldConfig {\n                    Address {\n                        ...CustomFields\n                    }\n                    Administrator {\n                        ...CustomFields\n                    }\n                    Asset {\n                        ...CustomFields\n                    }\n                    Channel {\n                        ...CustomFields\n                    }\n                    Collection {\n                        ...CustomFields\n                    }\n                    Customer {\n                        ...CustomFields\n                    }\n                    Facet {\n                        ...CustomFields\n                    }\n                    FacetValue {\n                        ...CustomFields\n                    }\n                    Fulfillment {\n                        ...CustomFields\n                    }\n                    GlobalSettings {\n                        ...CustomFields\n                    }\n                    Order {\n                        ...CustomFields\n                    }\n                    OrderLine {\n                        ...CustomFields\n                    }\n                    Product {\n                        ...CustomFields\n                    }\n                    ProductOption {\n                        ...CustomFields\n                    }\n                    ProductOptionGroup {\n                        ...CustomFields\n                    }\n                    ProductVariant {\n                        ...CustomFields\n                    }\n                    ShippingMethod {\n                        ...CustomFields\n                    }\n                    User {\n                        ...CustomFields\n                    }\n                }\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetServerConfig {\n        globalSettings {\n            id\n            serverConfig {\n                orderProcess {\n                    name\n                    to\n                }\n                permittedAssetTypes\n                permissions {\n                    name\n                    description\n                    assignable\n                }\n                customFieldConfig {\n                    Address {\n                        ...CustomFields\n                    }\n                    Administrator {\n                        ...CustomFields\n                    }\n                    Asset {\n                        ...CustomFields\n                    }\n                    Channel {\n                        ...CustomFields\n                    }\n                    Collection {\n                        ...CustomFields\n                    }\n                    Customer {\n                        ...CustomFields\n                    }\n                    Facet {\n                        ...CustomFields\n                    }\n                    FacetValue {\n                        ...CustomFields\n                    }\n                    Fulfillment {\n                        ...CustomFields\n                    }\n                    GlobalSettings {\n                        ...CustomFields\n                    }\n                    Order {\n                        ...CustomFields\n                    }\n                    OrderLine {\n                        ...CustomFields\n                    }\n                    Product {\n                        ...CustomFields\n                    }\n                    ProductOption {\n                        ...CustomFields\n                    }\n                    ProductOptionGroup {\n                        ...CustomFields\n                    }\n                    ProductVariant {\n                        ...CustomFields\n                    }\n                    ShippingMethod {\n                        ...CustomFields\n                    }\n                    User {\n                        ...CustomFields\n                    }\n                }\n            }\n        }\n    }\n    ", "\n"])), ALL_CUSTOM_FIELDS_FRAGMENT);
-    var JOB_INFO_FRAGMENT = apolloAngular.gql(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n    fragment JobInfo on Job {\n        id\n        createdAt\n        startedAt\n        settledAt\n        queueName\n        state\n        isSettled\n        progress\n        duration\n        data\n        result\n        error\n        retries\n        attempts\n    }\n"], ["\n    fragment JobInfo on Job {\n        id\n        createdAt\n        startedAt\n        settledAt\n        queueName\n        state\n        isSettled\n        progress\n        duration\n        data\n        result\n        error\n        retries\n        attempts\n    }\n"])));
-    var GET_JOB_INFO = apolloAngular.gql(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n    query GetJobInfo($id: ID!) {\n        job(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    query GetJobInfo($id: ID!) {\n        job(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
-    var GET_JOBS_LIST = apolloAngular.gql(templateObject_58 || (templateObject_58 = __makeTemplateObject(["\n    query GetAllJobs($options: JobListOptions) {\n        jobs(options: $options) {\n            items {\n                ...JobInfo\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetAllJobs($options: JobListOptions) {\n        jobs(options: $options) {\n            items {\n                ...JobInfo\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
-    var GET_JOBS_BY_ID = apolloAngular.gql(templateObject_59 || (templateObject_59 = __makeTemplateObject(["\n    query GetJobsById($ids: [ID!]!) {\n        jobsById(jobIds: $ids) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    query GetJobsById($ids: [ID!]!) {\n        jobsById(jobIds: $ids) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
-    var GET_JOB_QUEUE_LIST = apolloAngular.gql(templateObject_60 || (templateObject_60 = __makeTemplateObject(["\n    query GetJobQueueList {\n        jobQueues {\n            name\n            running\n        }\n    }\n"], ["\n    query GetJobQueueList {\n        jobQueues {\n            name\n            running\n        }\n    }\n"])));
-    var CANCEL_JOB = apolloAngular.gql(templateObject_61 || (templateObject_61 = __makeTemplateObject(["\n    mutation CancelJob($id: ID!) {\n        cancelJob(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    mutation CancelJob($id: ID!) {\n        cancelJob(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
-    var REINDEX = apolloAngular.gql(templateObject_62 || (templateObject_62 = __makeTemplateObject(["\n    mutation Reindex {\n        reindex {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    mutation Reindex {\n        reindex {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
-    var GET_PENDING_SEARCH_INDEX_UPDATES = apolloAngular.gql(templateObject_63 || (templateObject_63 = __makeTemplateObject(["\n    query GetPendingSearchIndexUpdates {\n        pendingSearchIndexUpdates\n    }\n"], ["\n    query GetPendingSearchIndexUpdates {\n        pendingSearchIndexUpdates\n    }\n"])));
-    var RUN_PENDING_SEARCH_INDEX_UPDATES = apolloAngular.gql(templateObject_64 || (templateObject_64 = __makeTemplateObject(["\n    mutation RunPendingSearchIndexUpdates {\n        runPendingSearchIndexUpdates {\n            success\n        }\n    }\n"], ["\n    mutation RunPendingSearchIndexUpdates {\n        runPendingSearchIndexUpdates {\n            success\n        }\n    }\n"])));
-    var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$3, templateObject_17$3, templateObject_18$3, templateObject_19$3, templateObject_20$3, templateObject_21$2, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36$1, templateObject_37$1, templateObject_38$1, templateObject_39$1, templateObject_40$1, templateObject_41$1, templateObject_42$1, templateObject_43$1, templateObject_44$1, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60, templateObject_61, templateObject_62, templateObject_63, templateObject_64;
+    var GET_TAX_RATE_LIST_SIMPLE = apolloAngular.gql(templateObject_24$2 || (templateObject_24$2 = __makeTemplateObject(["\n    query GetTaxRateListSimple($options: TaxRateListOptions) {\n        taxRates(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                name\n                enabled\n                value\n                category {\n                    id\n                    name\n                }\n                zone {\n                    id\n                    name\n                }\n            }\n            totalItems\n        }\n    }\n"], ["\n    query GetTaxRateListSimple($options: TaxRateListOptions) {\n        taxRates(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                name\n                enabled\n                value\n                category {\n                    id\n                    name\n                }\n                zone {\n                    id\n                    name\n                }\n            }\n            totalItems\n        }\n    }\n"])));
+    var GET_TAX_RATE = apolloAngular.gql(templateObject_25$2 || (templateObject_25$2 = __makeTemplateObject(["\n    query GetTaxRate($id: ID!) {\n        taxRate(id: $id) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    query GetTaxRate($id: ID!) {\n        taxRate(id: $id) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
+    var CREATE_TAX_RATE = apolloAngular.gql(templateObject_26$1 || (templateObject_26$1 = __makeTemplateObject(["\n    mutation CreateTaxRate($input: CreateTaxRateInput!) {\n        createTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    mutation CreateTaxRate($input: CreateTaxRateInput!) {\n        createTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
+    var UPDATE_TAX_RATE = apolloAngular.gql(templateObject_27$1 || (templateObject_27$1 = __makeTemplateObject(["\n    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {\n        updateTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateTaxRate($input: UpdateTaxRateInput!) {\n        updateTaxRate(input: $input) {\n            ...TaxRate\n        }\n    }\n    ", "\n"])), TAX_RATE_FRAGMENT);
+    var DELETE_TAX_RATE = apolloAngular.gql(templateObject_28$1 || (templateObject_28$1 = __makeTemplateObject(["\n    mutation DeleteTaxRate($id: ID!) {\n        deleteTaxRate(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteTaxRate($id: ID!) {\n        deleteTaxRate(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var CHANNEL_FRAGMENT = apolloAngular.gql(templateObject_29$1 || (templateObject_29$1 = __makeTemplateObject(["\n    fragment Channel on Channel {\n        id\n        createdAt\n        updatedAt\n        code\n        token\n        pricesIncludeTax\n        currencyCode\n        defaultLanguageCode\n        defaultShippingZone {\n            id\n            name\n        }\n        defaultTaxZone {\n            id\n            name\n        }\n    }\n"], ["\n    fragment Channel on Channel {\n        id\n        createdAt\n        updatedAt\n        code\n        token\n        pricesIncludeTax\n        currencyCode\n        defaultLanguageCode\n        defaultShippingZone {\n            id\n            name\n        }\n        defaultTaxZone {\n            id\n            name\n        }\n    }\n"])));
+    var GET_CHANNELS = apolloAngular.gql(templateObject_30$1 || (templateObject_30$1 = __makeTemplateObject(["\n    query GetChannels {\n        channels {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetChannels {\n        channels {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
+    var GET_CHANNEL = apolloAngular.gql(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["\n    query GetChannel($id: ID!) {\n        channel(id: $id) {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetChannel($id: ID!) {\n        channel(id: $id) {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
+    var GET_ACTIVE_CHANNEL = apolloAngular.gql(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["\n    query GetActiveChannel {\n        activeChannel {\n            ...Channel\n        }\n    }\n    ", "\n"], ["\n    query GetActiveChannel {\n        activeChannel {\n            ...Channel\n        }\n    }\n    ", "\n"])), CHANNEL_FRAGMENT);
+    var CREATE_CHANNEL = apolloAngular.gql(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["\n    mutation CreateChannel($input: CreateChannelInput!) {\n        createChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateChannel($input: CreateChannelInput!) {\n        createChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CHANNEL_FRAGMENT, ERROR_RESULT_FRAGMENT);
+    var UPDATE_CHANNEL = apolloAngular.gql(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["\n    mutation UpdateChannel($input: UpdateChannelInput!) {\n        updateChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateChannel($input: UpdateChannelInput!) {\n        updateChannel(input: $input) {\n            ...Channel\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CHANNEL_FRAGMENT, ERROR_RESULT_FRAGMENT);
+    var DELETE_CHANNEL = apolloAngular.gql(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["\n    mutation DeleteChannel($id: ID!) {\n        deleteChannel(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteChannel($id: ID!) {\n        deleteChannel(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var PAYMENT_METHOD_FRAGMENT = apolloAngular.gql(templateObject_36$1 || (templateObject_36$1 = __makeTemplateObject(["\n    fragment PaymentMethod on PaymentMethod {\n        id\n        createdAt\n        updatedAt\n        name\n        code\n        description\n        enabled\n        checker {\n            ...ConfigurableOperation\n        }\n        handler {\n            ...ConfigurableOperation\n        }\n    }\n    ", "\n"], ["\n    fragment PaymentMethod on PaymentMethod {\n        id\n        createdAt\n        updatedAt\n        name\n        code\n        description\n        enabled\n        checker {\n            ...ConfigurableOperation\n        }\n        handler {\n            ...ConfigurableOperation\n        }\n    }\n    ", "\n"])), CONFIGURABLE_OPERATION_FRAGMENT);
+    var GET_PAYMENT_METHOD_LIST = apolloAngular.gql(templateObject_37$1 || (templateObject_37$1 = __makeTemplateObject(["\n    query GetPaymentMethodList($options: PaymentMethodListOptions!) {\n        paymentMethods(options: $options) {\n            items {\n                ...PaymentMethod\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethodList($options: PaymentMethodListOptions!) {\n        paymentMethods(options: $options) {\n            items {\n                ...PaymentMethod\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
+    var GET_PAYMENT_METHOD_OPERATIONS = apolloAngular.gql(templateObject_38$1 || (templateObject_38$1 = __makeTemplateObject(["\n    query GetPaymentMethodOperations {\n        paymentMethodEligibilityCheckers {\n            ...ConfigurableOperationDef\n        }\n        paymentMethodHandlers {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethodOperations {\n        paymentMethodEligibilityCheckers {\n            ...ConfigurableOperationDef\n        }\n        paymentMethodHandlers {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"])), CONFIGURABLE_OPERATION_DEF_FRAGMENT);
+    var GET_PAYMENT_METHOD = apolloAngular.gql(templateObject_39$1 || (templateObject_39$1 = __makeTemplateObject(["\n    query GetPaymentMethod($id: ID!) {\n        paymentMethod(id: $id) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    query GetPaymentMethod($id: ID!) {\n        paymentMethod(id: $id) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
+    var CREATE_PAYMENT_METHOD = apolloAngular.gql(templateObject_40$1 || (templateObject_40$1 = __makeTemplateObject(["\n    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {\n        createPaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    mutation CreatePaymentMethod($input: CreatePaymentMethodInput!) {\n        createPaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
+    var UPDATE_PAYMENT_METHOD = apolloAngular.gql(templateObject_41$1 || (templateObject_41$1 = __makeTemplateObject(["\n    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {\n        updatePaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"], ["\n    mutation UpdatePaymentMethod($input: UpdatePaymentMethodInput!) {\n        updatePaymentMethod(input: $input) {\n            ...PaymentMethod\n        }\n    }\n    ", "\n"])), PAYMENT_METHOD_FRAGMENT);
+    var DELETE_PAYMENT_METHOD = apolloAngular.gql(templateObject_42$1 || (templateObject_42$1 = __makeTemplateObject(["\n    mutation DeletePaymentMethod($id: ID!, $force: Boolean) {\n        deletePaymentMethod(id: $id, force: $force) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeletePaymentMethod($id: ID!, $force: Boolean) {\n        deletePaymentMethod(id: $id, force: $force) {\n            result\n            message\n        }\n    }\n"])));
+    var GLOBAL_SETTINGS_FRAGMENT = apolloAngular.gql(templateObject_43$1 || (templateObject_43$1 = __makeTemplateObject(["\n    fragment GlobalSettings on GlobalSettings {\n        id\n        availableLanguages\n        trackInventory\n        outOfStockThreshold\n        serverConfig {\n            permissions {\n                name\n                description\n                assignable\n            }\n            orderProcess {\n                name\n            }\n        }\n    }\n"], ["\n    fragment GlobalSettings on GlobalSettings {\n        id\n        availableLanguages\n        trackInventory\n        outOfStockThreshold\n        serverConfig {\n            permissions {\n                name\n                description\n                assignable\n            }\n            orderProcess {\n                name\n            }\n        }\n    }\n"])));
+    var GET_GLOBAL_SETTINGS = apolloAngular.gql(templateObject_44$1 || (templateObject_44$1 = __makeTemplateObject(["\n    query GetGlobalSettings {\n        globalSettings {\n            ...GlobalSettings\n        }\n    }\n    ", "\n"], ["\n    query GetGlobalSettings {\n        globalSettings {\n            ...GlobalSettings\n        }\n    }\n    ", "\n"])), GLOBAL_SETTINGS_FRAGMENT);
+    var UPDATE_GLOBAL_SETTINGS = apolloAngular.gql(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {\n        updateGlobalSettings(input: $input) {\n            ...GlobalSettings\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateGlobalSettings($input: UpdateGlobalSettingsInput!) {\n        updateGlobalSettings(input: $input) {\n            ...GlobalSettings\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), GLOBAL_SETTINGS_FRAGMENT, ERROR_RESULT_FRAGMENT);
+    var CUSTOM_FIELD_CONFIG_FRAGMENT = apolloAngular.gql(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n    fragment CustomFieldConfig on CustomField {\n        name\n        type\n        list\n        description {\n            languageCode\n            value\n        }\n        label {\n            languageCode\n            value\n        }\n        readonly\n        nullable\n        ui\n    }\n"], ["\n    fragment CustomFieldConfig on CustomField {\n        name\n        type\n        list\n        description {\n            languageCode\n            value\n        }\n        label {\n            languageCode\n            value\n        }\n        readonly\n        nullable\n        ui\n    }\n"])));
+    var STRING_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n    fragment StringCustomField on StringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n        options {\n            label {\n                languageCode\n                value\n            }\n            value\n        }\n    }\n    ", "\n"], ["\n    fragment StringCustomField on StringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n        options {\n            label {\n                languageCode\n                value\n            }\n            value\n        }\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var LOCALE_STRING_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n    fragment LocaleStringCustomField on LocaleStringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n    }\n    ", "\n"], ["\n    fragment LocaleStringCustomField on LocaleStringCustomFieldConfig {\n        ...CustomFieldConfig\n        pattern\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var TEXT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n    fragment TextCustomField on TextCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"], ["\n    fragment TextCustomField on TextCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var BOOLEAN_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n    fragment BooleanCustomField on BooleanCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"], ["\n    fragment BooleanCustomField on BooleanCustomFieldConfig {\n        ...CustomFieldConfig\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var INT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n    fragment IntCustomField on IntCustomFieldConfig {\n        ...CustomFieldConfig\n        intMin: min\n        intMax: max\n        intStep: step\n    }\n    ", "\n"], ["\n    fragment IntCustomField on IntCustomFieldConfig {\n        ...CustomFieldConfig\n        intMin: min\n        intMax: max\n        intStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var FLOAT_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n    fragment FloatCustomField on FloatCustomFieldConfig {\n        ...CustomFieldConfig\n        floatMin: min\n        floatMax: max\n        floatStep: step\n    }\n    ", "\n"], ["\n    fragment FloatCustomField on FloatCustomFieldConfig {\n        ...CustomFieldConfig\n        floatMin: min\n        floatMax: max\n        floatStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var DATE_TIME_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n    fragment DateTimeCustomField on DateTimeCustomFieldConfig {\n        ...CustomFieldConfig\n        datetimeMin: min\n        datetimeMax: max\n        datetimeStep: step\n    }\n    ", "\n"], ["\n    fragment DateTimeCustomField on DateTimeCustomFieldConfig {\n        ...CustomFieldConfig\n        datetimeMin: min\n        datetimeMax: max\n        datetimeStep: step\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var RELATION_CUSTOM_FIELD_FRAGMENT = apolloAngular.gql(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n    fragment RelationCustomField on RelationCustomFieldConfig {\n        ...CustomFieldConfig\n        entity\n        scalarFields\n    }\n    ", "\n"], ["\n    fragment RelationCustomField on RelationCustomFieldConfig {\n        ...CustomFieldConfig\n        entity\n        scalarFields\n    }\n    ", "\n"])), CUSTOM_FIELD_CONFIG_FRAGMENT);
+    var ALL_CUSTOM_FIELDS_FRAGMENT = apolloAngular.gql(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n    fragment CustomFields on CustomField {\n        ... on StringCustomFieldConfig {\n            ...StringCustomField\n        }\n        ... on LocaleStringCustomFieldConfig {\n            ...LocaleStringCustomField\n        }\n        ... on TextCustomFieldConfig {\n            ...TextCustomField\n        }\n        ... on BooleanCustomFieldConfig {\n            ...BooleanCustomField\n        }\n        ... on IntCustomFieldConfig {\n            ...IntCustomField\n        }\n        ... on FloatCustomFieldConfig {\n            ...FloatCustomField\n        }\n        ... on DateTimeCustomFieldConfig {\n            ...DateTimeCustomField\n        }\n        ... on RelationCustomFieldConfig {\n            ...RelationCustomField\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n"], ["\n    fragment CustomFields on CustomField {\n        ... on StringCustomFieldConfig {\n            ...StringCustomField\n        }\n        ... on LocaleStringCustomFieldConfig {\n            ...LocaleStringCustomField\n        }\n        ... on TextCustomFieldConfig {\n            ...TextCustomField\n        }\n        ... on BooleanCustomFieldConfig {\n            ...BooleanCustomField\n        }\n        ... on IntCustomFieldConfig {\n            ...IntCustomField\n        }\n        ... on FloatCustomFieldConfig {\n            ...FloatCustomField\n        }\n        ... on DateTimeCustomFieldConfig {\n            ...DateTimeCustomField\n        }\n        ... on RelationCustomFieldConfig {\n            ...RelationCustomField\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n"])), STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, TEXT_CUSTOM_FIELD_FRAGMENT, BOOLEAN_CUSTOM_FIELD_FRAGMENT, INT_CUSTOM_FIELD_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, DATE_TIME_CUSTOM_FIELD_FRAGMENT, RELATION_CUSTOM_FIELD_FRAGMENT);
+    var GET_SERVER_CONFIG = apolloAngular.gql(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n    query GetServerConfig {\n        globalSettings {\n            id\n            serverConfig {\n                orderProcess {\n                    name\n                    to\n                }\n                permittedAssetTypes\n                permissions {\n                    name\n                    description\n                    assignable\n                }\n                customFieldConfig {\n                    Address {\n                        ...CustomFields\n                    }\n                    Administrator {\n                        ...CustomFields\n                    }\n                    Asset {\n                        ...CustomFields\n                    }\n                    Channel {\n                        ...CustomFields\n                    }\n                    Collection {\n                        ...CustomFields\n                    }\n                    Country {\n                        ...CustomFields\n                    }\n                    Customer {\n                        ...CustomFields\n                    }\n                    CustomerGroup {\n                        ...CustomFields\n                    }\n                    Facet {\n                        ...CustomFields\n                    }\n                    FacetValue {\n                        ...CustomFields\n                    }\n                    Fulfillment {\n                        ...CustomFields\n                    }\n                    GlobalSettings {\n                        ...CustomFields\n                    }\n                    Order {\n                        ...CustomFields\n                    }\n                    OrderLine {\n                        ...CustomFields\n                    }\n                    PaymentMethod {\n                        ...CustomFields\n                    }\n                    Product {\n                        ...CustomFields\n                    }\n                    ProductOption {\n                        ...CustomFields\n                    }\n                    ProductOptionGroup {\n                        ...CustomFields\n                    }\n                    ProductVariant {\n                        ...CustomFields\n                    }\n                    Promotion {\n                        ...CustomFields\n                    }\n                    ShippingMethod {\n                        ...CustomFields\n                    }\n                    TaxCategory {\n                        ...CustomFields\n                    }\n                    TaxRate {\n                        ...CustomFields\n                    }\n                    User {\n                        ...CustomFields\n                    }\n                    Zone {\n                        ...CustomFields\n                    }\n                }\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetServerConfig {\n        globalSettings {\n            id\n            serverConfig {\n                orderProcess {\n                    name\n                    to\n                }\n                permittedAssetTypes\n                permissions {\n                    name\n                    description\n                    assignable\n                }\n                customFieldConfig {\n                    Address {\n                        ...CustomFields\n                    }\n                    Administrator {\n                        ...CustomFields\n                    }\n                    Asset {\n                        ...CustomFields\n                    }\n                    Channel {\n                        ...CustomFields\n                    }\n                    Collection {\n                        ...CustomFields\n                    }\n                    Country {\n                        ...CustomFields\n                    }\n                    Customer {\n                        ...CustomFields\n                    }\n                    CustomerGroup {\n                        ...CustomFields\n                    }\n                    Facet {\n                        ...CustomFields\n                    }\n                    FacetValue {\n                        ...CustomFields\n                    }\n                    Fulfillment {\n                        ...CustomFields\n                    }\n                    GlobalSettings {\n                        ...CustomFields\n                    }\n                    Order {\n                        ...CustomFields\n                    }\n                    OrderLine {\n                        ...CustomFields\n                    }\n                    PaymentMethod {\n                        ...CustomFields\n                    }\n                    Product {\n                        ...CustomFields\n                    }\n                    ProductOption {\n                        ...CustomFields\n                    }\n                    ProductOptionGroup {\n                        ...CustomFields\n                    }\n                    ProductVariant {\n                        ...CustomFields\n                    }\n                    Promotion {\n                        ...CustomFields\n                    }\n                    ShippingMethod {\n                        ...CustomFields\n                    }\n                    TaxCategory {\n                        ...CustomFields\n                    }\n                    TaxRate {\n                        ...CustomFields\n                    }\n                    User {\n                        ...CustomFields\n                    }\n                    Zone {\n                        ...CustomFields\n                    }\n                }\n            }\n        }\n    }\n    ", "\n"])), ALL_CUSTOM_FIELDS_FRAGMENT);
+    var JOB_INFO_FRAGMENT = apolloAngular.gql(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n    fragment JobInfo on Job {\n        id\n        createdAt\n        startedAt\n        settledAt\n        queueName\n        state\n        isSettled\n        progress\n        duration\n        data\n        result\n        error\n        retries\n        attempts\n    }\n"], ["\n    fragment JobInfo on Job {\n        id\n        createdAt\n        startedAt\n        settledAt\n        queueName\n        state\n        isSettled\n        progress\n        duration\n        data\n        result\n        error\n        retries\n        attempts\n    }\n"])));
+    var GET_JOB_INFO = apolloAngular.gql(templateObject_58 || (templateObject_58 = __makeTemplateObject(["\n    query GetJobInfo($id: ID!) {\n        job(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    query GetJobInfo($id: ID!) {\n        job(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
+    var GET_JOBS_LIST = apolloAngular.gql(templateObject_59 || (templateObject_59 = __makeTemplateObject(["\n    query GetAllJobs($options: JobListOptions) {\n        jobs(options: $options) {\n            items {\n                ...JobInfo\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetAllJobs($options: JobListOptions) {\n        jobs(options: $options) {\n            items {\n                ...JobInfo\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
+    var GET_JOBS_BY_ID = apolloAngular.gql(templateObject_60 || (templateObject_60 = __makeTemplateObject(["\n    query GetJobsById($ids: [ID!]!) {\n        jobsById(jobIds: $ids) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    query GetJobsById($ids: [ID!]!) {\n        jobsById(jobIds: $ids) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
+    var GET_JOB_QUEUE_LIST = apolloAngular.gql(templateObject_61 || (templateObject_61 = __makeTemplateObject(["\n    query GetJobQueueList {\n        jobQueues {\n            name\n            running\n        }\n    }\n"], ["\n    query GetJobQueueList {\n        jobQueues {\n            name\n            running\n        }\n    }\n"])));
+    var CANCEL_JOB = apolloAngular.gql(templateObject_62 || (templateObject_62 = __makeTemplateObject(["\n    mutation CancelJob($id: ID!) {\n        cancelJob(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    mutation CancelJob($id: ID!) {\n        cancelJob(jobId: $id) {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
+    var REINDEX = apolloAngular.gql(templateObject_63 || (templateObject_63 = __makeTemplateObject(["\n    mutation Reindex {\n        reindex {\n            ...JobInfo\n        }\n    }\n    ", "\n"], ["\n    mutation Reindex {\n        reindex {\n            ...JobInfo\n        }\n    }\n    ", "\n"])), JOB_INFO_FRAGMENT);
+    var GET_PENDING_SEARCH_INDEX_UPDATES = apolloAngular.gql(templateObject_64 || (templateObject_64 = __makeTemplateObject(["\n    query GetPendingSearchIndexUpdates {\n        pendingSearchIndexUpdates\n    }\n"], ["\n    query GetPendingSearchIndexUpdates {\n        pendingSearchIndexUpdates\n    }\n"])));
+    var RUN_PENDING_SEARCH_INDEX_UPDATES = apolloAngular.gql(templateObject_65 || (templateObject_65 = __makeTemplateObject(["\n    mutation RunPendingSearchIndexUpdates {\n        runPendingSearchIndexUpdates {\n            success\n        }\n    }\n"], ["\n    mutation RunPendingSearchIndexUpdates {\n        runPendingSearchIndexUpdates {\n            success\n        }\n    }\n"])));
+    var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$7, templateObject_5$7, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3, templateObject_16$3, templateObject_17$3, templateObject_18$3, templateObject_19$3, templateObject_20$3, templateObject_21$3, templateObject_22$2, templateObject_23$2, templateObject_24$2, templateObject_25$2, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36$1, templateObject_37$1, templateObject_38$1, templateObject_39$1, templateObject_40$1, templateObject_41$1, templateObject_42$1, templateObject_43$1, templateObject_44$1, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60, templateObject_61, templateObject_62, templateObject_63, templateObject_64, templateObject_65;
     function initializeServerConfigService(serverConfigService) {
         return serverConfigService.init();
@@ -1144,9 +1157,15 @@
         ClientDataService.prototype.uiState = function () {
             return this.baseDataService.query(GET_UI_STATE, {}, 'cache-first');
         };
-        ClientDataService.prototype.setUiLanguage = function (languageCode) {
-            return this.baseDataService.mutate(SET_UI_LANGUAGE, {
+        ClientDataService.prototype.setUiLanguage = function (languageCode, locale) {
+            return this.baseDataService.mutate(SET_UI_LANGUAGE_AND_LOCALE, {
                 languageCode: languageCode,
+                locale: locale,
+            });
+        };
+        ClientDataService.prototype.setUiLocale = function (locale) {
+            return this.baseDataService.mutate(SET_UI_LOCALE, {
+                locale: locale,
             });
         };
         ClientDataService.prototype.setContentLanguage = function (languageCode) {
@@ -1159,6 +1178,11 @@
                 theme: theme,
             });
         };
+        ClientDataService.prototype.setDisplayUiExtensionPoints = function (display) {
+            return this.baseDataService.mutate(SET_DISPLAY_UI_EXTENSION_POINTS, {
+                display: display,
+            });
+        };
         ClientDataService.prototype.setActiveChannel = function (channelId) {
             return this.baseDataService.mutate(SET_ACTIVE_CHANNEL, {
                 channelId: channelId,
@@ -1192,7 +1216,7 @@
     var GET_PRODUCT_WITH_VARIANTS = apolloAngular.gql(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["\n    query GetProductWithVariants($id: ID!, $variantListOptions: ProductVariantListOptions) {\n        product(id: $id) {\n            ...ProductDetail\n            variantList(options: $variantListOptions) {\n                items {\n                    ...ProductVariant\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n    ", "\n"], ["\n    query GetProductWithVariants($id: ID!, $variantListOptions: ProductVariantListOptions) {\n        product(id: $id) {\n            ...ProductDetail\n            variantList(options: $variantListOptions) {\n                items {\n                    ...ProductVariant\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n    ", "\n"])), PRODUCT_DETAIL_FRAGMENT, PRODUCT_VARIANT_FRAGMENT);
     var GET_PRODUCT_SIMPLE = apolloAngular.gql(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n    query GetProductSimple($id: ID!) {\n        product(id: $id) {\n            id\n            name\n            featuredAsset {\n                ...Asset\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetProductSimple($id: ID!) {\n        product(id: $id) {\n            id\n            name\n            featuredAsset {\n                ...Asset\n            }\n        }\n    }\n    ", "\n"])), ASSET_FRAGMENT);
     var GET_PRODUCT_LIST = apolloAngular.gql(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n    query GetProductList($options: ProductListOptions) {\n        products(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                enabled\n                languageCode\n                name\n                slug\n                featuredAsset {\n                    id\n                    createdAt\n                    updatedAt\n                    preview\n                }\n            }\n            totalItems\n        }\n    }\n"], ["\n    query GetProductList($options: ProductListOptions) {\n        products(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                enabled\n                languageCode\n                name\n                slug\n                featuredAsset {\n                    id\n                    createdAt\n                    updatedAt\n                    preview\n                }\n            }\n            totalItems\n        }\n    }\n"])));
-    var GET_PRODUCT_OPTION_GROUPS = apolloAngular.gql(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n    query GetProductOptionGroups($filterTerm: String) {\n        productOptionGroups(filterTerm: $filterTerm) {\n            id\n            createdAt\n            updatedAt\n            languageCode\n            code\n            name\n            options {\n                id\n                createdAt\n                updatedAt\n                languageCode\n                code\n                name\n            }\n        }\n    }\n"], ["\n    query GetProductOptionGroups($filterTerm: String) {\n        productOptionGroups(filterTerm: $filterTerm) {\n            id\n            createdAt\n            updatedAt\n            languageCode\n            code\n            name\n            options {\n                id\n                createdAt\n                updatedAt\n                languageCode\n                code\n                name\n            }\n        }\n    }\n"])));
+    var GET_PRODUCT_OPTION_GROUPS = apolloAngular.gql(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n    query GetProductOptionGroups($filterTerm: String) {\n        productOptionGroups(filterTerm: $filterTerm) {\n            id\n            createdAt\n            updatedAt\n            languageCode\n            code\n            name\n            options {\n                id\n                createdAt\n                updatedAt\n                languageCode\n                code\n                name\n            }\n        }\n    }\n"], ["\n    query GetProductOptionGroups($filterTerm: String) {\n        productOptionGroups(filterTerm: $filterTerm) {\n            id\n            createdAt\n            updatedAt\n            languageCode\n            code\n            name\n            options {\n                id\n                createdAt\n                updatedAt\n                languageCode\n                code\n                name\n            }\n        }\n    }\n"])));
     var GET_ASSET_LIST = apolloAngular.gql(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n    query GetAssetList($options: AssetListOptions) {\n        assets(options: $options) {\n            items {\n                ...Asset\n                tags {\n                    ...Tag\n                }\n            }\n            totalItems\n        }\n    }\n    ", "\n    ", "\n"], ["\n    query GetAssetList($options: AssetListOptions) {\n        assets(options: $options) {\n            items {\n                ...Asset\n                tags {\n                    ...Tag\n                }\n            }\n            totalItems\n        }\n    }\n    ", "\n    ", "\n"])), ASSET_FRAGMENT, TAG_FRAGMENT);
     var GET_ASSET = apolloAngular.gql(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n    query GetAsset($id: ID!) {\n        asset(id: $id) {\n            ...Asset\n            tags {\n                ...Tag\n            }\n        }\n    }\n    ", "\n    ", "\n"], ["\n    query GetAsset($id: ID!) {\n        asset(id: $id) {\n            ...Asset\n            tags {\n                ...Tag\n            }\n        }\n    }\n    ", "\n    ", "\n"])), ASSET_FRAGMENT, TAG_FRAGMENT);
     var CREATE_ASSETS = apolloAngular.gql(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n    mutation CreateAssets($input: [CreateAssetInput!]!) {\n        createAssets(input: $input) {\n            ...Asset\n            ... on Asset {\n                tags {\n                    ...Tag\n                }\n            }\n            ... on ErrorResult {\n                message\n            }\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateAssets($input: [CreateAssetInput!]!) {\n        createAssets(input: $input) {\n            ...Asset\n            ... on Asset {\n                tags {\n                    ...Tag\n                }\n            }\n            ... on ErrorResult {\n                message\n            }\n        }\n    }\n    ", "\n    ", "\n"])), ASSET_FRAGMENT, TAG_FRAGMENT);
@@ -1216,7 +1240,7 @@
     var CREATE_TAG = apolloAngular.gql(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n    mutation CreateTag($input: CreateTagInput!) {\n        createTag(input: $input) {\n            ...Tag\n        }\n    }\n    ", "\n"], ["\n    mutation CreateTag($input: CreateTagInput!) {\n        createTag(input: $input) {\n            ...Tag\n        }\n    }\n    ", "\n"])), TAG_FRAGMENT);
     var UPDATE_TAG = apolloAngular.gql(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n    mutation UpdateTag($input: UpdateTagInput!) {\n        updateTag(input: $input) {\n            ...Tag\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateTag($input: UpdateTagInput!) {\n        updateTag(input: $input) {\n            ...Tag\n        }\n    }\n    ", "\n"])), TAG_FRAGMENT);
     var DELETE_TAG = apolloAngular.gql(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n    mutation DeleteTag($id: ID!) {\n        deleteTag(id: $id) {\n            message\n            result\n        }\n    }\n"], ["\n    mutation DeleteTag($id: ID!) {\n        deleteTag(id: $id) {\n            message\n            result\n        }\n    }\n"])));
-    var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$6, templateObject_5$6, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
+    var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$6, templateObject_5$6, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
     var GET_COLLECTION_FILTERS = apolloAngular.gql(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    query GetCollectionFilters {\n        collectionFilters {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"], ["\n    query GetCollectionFilters {\n        collectionFilters {\n            ...ConfigurableOperationDef\n        }\n    }\n    ", "\n"])), CONFIGURABLE_OPERATION_DEF_FRAGMENT);
     var COLLECTION_FRAGMENT = apolloAngular.gql(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    fragment Collection on Collection {\n        id\n        createdAt\n        updatedAt\n        name\n        slug\n        description\n        isPrivate\n        languageCode\n        featuredAsset {\n            ...Asset\n        }\n        assets {\n            ...Asset\n        }\n        filters {\n            ...ConfigurableOperation\n        }\n        translations {\n            id\n            languageCode\n            name\n            slug\n            description\n        }\n        parent {\n            id\n            name\n        }\n        children {\n            id\n            name\n        }\n    }\n    ", "\n    ", "\n"], ["\n    fragment Collection on Collection {\n        id\n        createdAt\n        updatedAt\n        name\n        slug\n        description\n        isPrivate\n        languageCode\n        featuredAsset {\n            ...Asset\n        }\n        assets {\n            ...Asset\n        }\n        filters {\n            ...ConfigurableOperation\n        }\n        translations {\n            id\n            languageCode\n            name\n            slug\n            description\n        }\n        parent {\n            id\n            name\n        }\n        children {\n            id\n            name\n        }\n    }\n    ", "\n    ", "\n"])), ASSET_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT);
@@ -1305,25 +1329,26 @@
     var ADDRESS_FRAGMENT = apolloAngular.gql(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    fragment Address on Address {\n        id\n        createdAt\n        updatedAt\n        fullName\n        company\n        streetLine1\n        streetLine2\n        city\n        province\n        postalCode\n        country {\n            id\n            code\n            name\n        }\n        phoneNumber\n        defaultShippingAddress\n        defaultBillingAddress\n    }\n"], ["\n    fragment Address on Address {\n        id\n        createdAt\n        updatedAt\n        fullName\n        company\n        streetLine1\n        streetLine2\n        city\n        province\n        postalCode\n        country {\n            id\n            code\n            name\n        }\n        phoneNumber\n        defaultShippingAddress\n        defaultBillingAddress\n    }\n"])));
     var CUSTOMER_FRAGMENT = apolloAngular.gql(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    fragment Customer on Customer {\n        id\n        createdAt\n        updatedAt\n        title\n        firstName\n        lastName\n        phoneNumber\n        emailAddress\n        user {\n            id\n            identifier\n            verified\n            lastLogin\n        }\n        addresses {\n            ...Address\n        }\n    }\n    ", "\n"], ["\n    fragment Customer on Customer {\n        id\n        createdAt\n        updatedAt\n        title\n        firstName\n        lastName\n        phoneNumber\n        emailAddress\n        user {\n            id\n            identifier\n            verified\n            lastLogin\n        }\n        addresses {\n            ...Address\n        }\n    }\n    ", "\n"])), ADDRESS_FRAGMENT);
-    var GET_CUSTOMER_LIST = apolloAngular.gql(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    query GetCustomerList($options: CustomerListOptions) {\n        customers(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                title\n                firstName\n                lastName\n                emailAddress\n                user {\n                    id\n                    verified\n                }\n            }\n            totalItems\n        }\n    }\n"], ["\n    query GetCustomerList($options: CustomerListOptions) {\n        customers(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                title\n                firstName\n                lastName\n                emailAddress\n                user {\n                    id\n                    verified\n                }\n            }\n            totalItems\n        }\n    }\n"])));
-    var GET_CUSTOMER = apolloAngular.gql(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    query GetCustomer($id: ID!, $orderListOptions: OrderListOptions) {\n        customer(id: $id) {\n            ...Customer\n            groups {\n                id\n                name\n            }\n            orders(options: $orderListOptions) {\n                items {\n                    id\n                    code\n                    state\n                    totalWithTax\n                    currencyCode\n                    updatedAt\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetCustomer($id: ID!, $orderListOptions: OrderListOptions) {\n        customer(id: $id) {\n            ...Customer\n            groups {\n                id\n                name\n            }\n            orders(options: $orderListOptions) {\n                items {\n                    id\n                    code\n                    state\n                    totalWithTax\n                    currencyCode\n                    updatedAt\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"])), CUSTOMER_FRAGMENT);
-    var CREATE_CUSTOMER = apolloAngular.gql(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    mutation CreateCustomer($input: CreateCustomerInput!, $password: String) {\n        createCustomer(input: $input, password: $password) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateCustomer($input: CreateCustomerInput!, $password: String) {\n        createCustomer(input: $input, password: $password) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CUSTOMER_FRAGMENT, ERROR_RESULT_FRAGMENT);
-    var UPDATE_CUSTOMER = apolloAngular.gql(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    mutation UpdateCustomer($input: UpdateCustomerInput!) {\n        updateCustomer(input: $input) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateCustomer($input: UpdateCustomerInput!) {\n        updateCustomer(input: $input) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CUSTOMER_FRAGMENT, ERROR_RESULT_FRAGMENT);
-    var DELETE_CUSTOMER = apolloAngular.gql(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    mutation DeleteCustomer($id: ID!) {\n        deleteCustomer(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomer($id: ID!) {\n        deleteCustomer(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var CREATE_CUSTOMER_ADDRESS = apolloAngular.gql(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {\n        createCustomerAddress(customerId: $customerId, input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"], ["\n    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {\n        createCustomerAddress(customerId: $customerId, input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"])), ADDRESS_FRAGMENT);
-    var UPDATE_CUSTOMER_ADDRESS = apolloAngular.gql(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {\n        updateCustomerAddress(input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {\n        updateCustomerAddress(input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"])), ADDRESS_FRAGMENT);
-    var CREATE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n    mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {\n        createCustomerGroup(input: $input) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"], ["\n    mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {\n        createCustomerGroup(input: $input) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"])));
-    var UPDATE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n    mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {\n        updateCustomerGroup(input: $input) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"], ["\n    mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {\n        updateCustomerGroup(input: $input) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"])));
-    var DELETE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n    mutation DeleteCustomerGroup($id: ID!) {\n        deleteCustomerGroup(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomerGroup($id: ID!) {\n        deleteCustomerGroup(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var GET_CUSTOMER_GROUPS = apolloAngular.gql(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    query GetCustomerGroups($options: CustomerGroupListOptions) {\n        customerGroups(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                name\n            }\n            totalItems\n        }\n    }\n"], ["\n    query GetCustomerGroups($options: CustomerGroupListOptions) {\n        customerGroups(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                name\n            }\n            totalItems\n        }\n    }\n"])));
-    var GET_CUSTOMER_GROUP_WITH_CUSTOMERS = apolloAngular.gql(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n    query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {\n        customerGroup(id: $id) {\n            id\n            createdAt\n            updatedAt\n            name\n            customers(options: $options) {\n                items {\n                    id\n                    createdAt\n                    updatedAt\n                    emailAddress\n                    firstName\n                    lastName\n                }\n                totalItems\n            }\n        }\n    }\n"], ["\n    query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {\n        customerGroup(id: $id) {\n            id\n            createdAt\n            updatedAt\n            name\n            customers(options: $options) {\n                items {\n                    id\n                    createdAt\n                    updatedAt\n                    emailAddress\n                    firstName\n                    lastName\n                }\n                totalItems\n            }\n        }\n    }\n"])));
-    var ADD_CUSTOMERS_TO_GROUP = apolloAngular.gql(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n    mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {\n        addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"], ["\n    mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {\n        addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"])));
-    var REMOVE_CUSTOMERS_FROM_GROUP = apolloAngular.gql(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n    mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {\n        removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"], ["\n    mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {\n        removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            id\n            createdAt\n            updatedAt\n            name\n        }\n    }\n"])));
-    var GET_CUSTOMER_HISTORY = apolloAngular.gql(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {\n        customer(id: $id) {\n            id\n            history(options: $options) {\n                totalItems\n                items {\n                    id\n                    type\n                    createdAt\n                    isPublic\n                    administrator {\n                        id\n                        firstName\n                        lastName\n                    }\n                    data\n                }\n            }\n        }\n    }\n"], ["\n    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {\n        customer(id: $id) {\n            id\n            history(options: $options) {\n                totalItems\n                items {\n                    id\n                    type\n                    createdAt\n                    isPublic\n                    administrator {\n                        id\n                        firstName\n                        lastName\n                    }\n                    data\n                }\n            }\n        }\n    }\n"])));
-    var ADD_NOTE_TO_CUSTOMER = apolloAngular.gql(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n    mutation AddNoteToCustomer($input: AddNoteToCustomerInput!) {\n        addNoteToCustomer(input: $input) {\n            id\n        }\n    }\n"], ["\n    mutation AddNoteToCustomer($input: AddNoteToCustomerInput!) {\n        addNoteToCustomer(input: $input) {\n            id\n        }\n    }\n"])));
-    var UPDATE_CUSTOMER_NOTE = apolloAngular.gql(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    mutation UpdateCustomerNote($input: UpdateCustomerNoteInput!) {\n        updateCustomerNote(input: $input) {\n            id\n            data\n            isPublic\n        }\n    }\n"], ["\n    mutation UpdateCustomerNote($input: UpdateCustomerNoteInput!) {\n        updateCustomerNote(input: $input) {\n            id\n            data\n            isPublic\n        }\n    }\n"])));
-    var DELETE_CUSTOMER_NOTE = apolloAngular.gql(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    mutation DeleteCustomerNote($id: ID!) {\n        deleteCustomerNote(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomerNote($id: ID!) {\n        deleteCustomerNote(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1;
+    var CUSTOMER_GROUP_FRAGMENT = apolloAngular.gql(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    fragment CustomerGroup on CustomerGroup {\n        id\n        createdAt\n        updatedAt\n        name\n    }\n"], ["\n    fragment CustomerGroup on CustomerGroup {\n        id\n        createdAt\n        updatedAt\n        name\n    }\n"])));
+    var GET_CUSTOMER_LIST = apolloAngular.gql(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    query GetCustomerList($options: CustomerListOptions) {\n        customers(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                title\n                firstName\n                lastName\n                emailAddress\n                user {\n                    id\n                    verified\n                }\n            }\n            totalItems\n        }\n    }\n"], ["\n    query GetCustomerList($options: CustomerListOptions) {\n        customers(options: $options) {\n            items {\n                id\n                createdAt\n                updatedAt\n                title\n                firstName\n                lastName\n                emailAddress\n                user {\n                    id\n                    verified\n                }\n            }\n            totalItems\n        }\n    }\n"])));
+    var GET_CUSTOMER = apolloAngular.gql(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    query GetCustomer($id: ID!, $orderListOptions: OrderListOptions) {\n        customer(id: $id) {\n            ...Customer\n            groups {\n                id\n                name\n            }\n            orders(options: $orderListOptions) {\n                items {\n                    id\n                    code\n                    state\n                    totalWithTax\n                    currencyCode\n                    updatedAt\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetCustomer($id: ID!, $orderListOptions: OrderListOptions) {\n        customer(id: $id) {\n            ...Customer\n            groups {\n                id\n                name\n            }\n            orders(options: $orderListOptions) {\n                items {\n                    id\n                    code\n                    state\n                    totalWithTax\n                    currencyCode\n                    updatedAt\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"])), CUSTOMER_FRAGMENT);
+    var CREATE_CUSTOMER = apolloAngular.gql(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    mutation CreateCustomer($input: CreateCustomerInput!, $password: String) {\n        createCustomer(input: $input, password: $password) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateCustomer($input: CreateCustomerInput!, $password: String) {\n        createCustomer(input: $input, password: $password) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CUSTOMER_FRAGMENT, ERROR_RESULT_FRAGMENT);
+    var UPDATE_CUSTOMER = apolloAngular.gql(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n    mutation UpdateCustomer($input: UpdateCustomerInput!) {\n        updateCustomer(input: $input) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateCustomer($input: UpdateCustomerInput!) {\n        updateCustomer(input: $input) {\n            ...Customer\n            ...ErrorResult\n        }\n    }\n    ", "\n    ", "\n"])), CUSTOMER_FRAGMENT, ERROR_RESULT_FRAGMENT);
+    var DELETE_CUSTOMER = apolloAngular.gql(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n    mutation DeleteCustomer($id: ID!) {\n        deleteCustomer(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomer($id: ID!) {\n        deleteCustomer(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var CREATE_CUSTOMER_ADDRESS = apolloAngular.gql(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {\n        createCustomerAddress(customerId: $customerId, input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"], ["\n    mutation CreateCustomerAddress($customerId: ID!, $input: CreateAddressInput!) {\n        createCustomerAddress(customerId: $customerId, input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"])), ADDRESS_FRAGMENT);
+    var UPDATE_CUSTOMER_ADDRESS = apolloAngular.gql(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {\n        updateCustomerAddress(input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateCustomerAddress($input: UpdateAddressInput!) {\n        updateCustomerAddress(input: $input) {\n            ...Address\n        }\n    }\n    ", "\n"])), ADDRESS_FRAGMENT);
+    var CREATE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n    mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {\n        createCustomerGroup(input: $input) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"], ["\n    mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {\n        createCustomerGroup(input: $input) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var UPDATE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n    mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {\n        updateCustomerGroup(input: $input) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {\n        updateCustomerGroup(input: $input) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var DELETE_CUSTOMER_GROUP = apolloAngular.gql(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n    mutation DeleteCustomerGroup($id: ID!) {\n        deleteCustomerGroup(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomerGroup($id: ID!) {\n        deleteCustomerGroup(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var GET_CUSTOMER_GROUPS = apolloAngular.gql(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n    query GetCustomerGroups($options: CustomerGroupListOptions) {\n        customerGroups(options: $options) {\n            items {\n                ...CustomerGroup\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetCustomerGroups($options: CustomerGroupListOptions) {\n        customerGroups(options: $options) {\n            items {\n                ...CustomerGroup\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var GET_CUSTOMER_GROUP_WITH_CUSTOMERS = apolloAngular.gql(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n    query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {\n        customerGroup(id: $id) {\n            ...CustomerGroup\n            customers(options: $options) {\n                items {\n                    id\n                    createdAt\n                    updatedAt\n                    emailAddress\n                    firstName\n                    lastName\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"], ["\n    query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {\n        customerGroup(id: $id) {\n            ...CustomerGroup\n            customers(options: $options) {\n                items {\n                    id\n                    createdAt\n                    updatedAt\n                    emailAddress\n                    firstName\n                    lastName\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var ADD_CUSTOMERS_TO_GROUP = apolloAngular.gql(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n    mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {\n        addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"], ["\n    mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {\n        addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var REMOVE_CUSTOMERS_FROM_GROUP = apolloAngular.gql(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n    mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {\n        removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"], ["\n    mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {\n        removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {\n            ...CustomerGroup\n        }\n    }\n    ", "\n"])), CUSTOMER_GROUP_FRAGMENT);
+    var GET_CUSTOMER_HISTORY = apolloAngular.gql(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {\n        customer(id: $id) {\n            id\n            history(options: $options) {\n                totalItems\n                items {\n                    id\n                    type\n                    createdAt\n                    isPublic\n                    administrator {\n                        id\n                        firstName\n                        lastName\n                    }\n                    data\n                }\n            }\n        }\n    }\n"], ["\n    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {\n        customer(id: $id) {\n            id\n            history(options: $options) {\n                totalItems\n                items {\n                    id\n                    type\n                    createdAt\n                    isPublic\n                    administrator {\n                        id\n                        firstName\n                        lastName\n                    }\n                    data\n                }\n            }\n        }\n    }\n"])));
+    var ADD_NOTE_TO_CUSTOMER = apolloAngular.gql(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n    mutation AddNoteToCustomer($input: AddNoteToCustomerInput!) {\n        addNoteToCustomer(input: $input) {\n            id\n        }\n    }\n"], ["\n    mutation AddNoteToCustomer($input: AddNoteToCustomerInput!) {\n        addNoteToCustomer(input: $input) {\n            id\n        }\n    }\n"])));
+    var UPDATE_CUSTOMER_NOTE = apolloAngular.gql(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n    mutation UpdateCustomerNote($input: UpdateCustomerNoteInput!) {\n        updateCustomerNote(input: $input) {\n            id\n            data\n            isPublic\n        }\n    }\n"], ["\n    mutation UpdateCustomerNote($input: UpdateCustomerNoteInput!) {\n        updateCustomerNote(input: $input) {\n            id\n            data\n            isPublic\n        }\n    }\n"])));
+    var DELETE_CUSTOMER_NOTE = apolloAngular.gql(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n    mutation DeleteCustomerNote($id: ID!) {\n        deleteCustomerNote(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCustomerNote($id: ID!) {\n        deleteCustomerNote(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1;
     var CustomerDataService = /** @class */ (function () {
         function CustomerDataService(baseDataService) {
@@ -2897,12 +2922,12 @@
         };
         SettingsDataService.prototype.createCountry = function (input) {
             return this.baseDataService.mutate(CREATE_COUNTRY, {
-                input: pick.pick(input, ['code', 'enabled', 'translations']),
+                input: pick.pick(input, ['code', 'enabled', 'translations', 'customFields']),
             });
         };
         SettingsDataService.prototype.updateCountry = function (input) {
             return this.baseDataService.mutate(UPDATE_COUNTRY, {
-                input: pick.pick(input, ['id', 'code', 'enabled', 'translations']),
+                input: pick.pick(input, ['id', 'code', 'enabled', 'translations', 'customFields']),
             });
         };
         SettingsDataService.prototype.deleteCountry = function (id) {
@@ -2976,6 +3001,16 @@
                 },
             }, fetchPolicy);
         };
+        SettingsDataService.prototype.getTaxRatesSimple = function (take, skip, fetchPolicy) {
+            if (take === void 0) { take = 10; }
+            if (skip === void 0) { skip = 0; }
+            return this.baseDataService.query(GET_TAX_RATE_LIST_SIMPLE, {
+                options: {
+                    take: take,
+                    skip: skip,
+                },
+            }, fetchPolicy);
+        };
         SettingsDataService.prototype.getTaxRate = function (id) {
             return this.baseDataService.query(GET_TAX_RATE, {
                 id: id,
@@ -3177,7 +3212,19 @@
         return 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
+     */
     var DataService = /** @class */ (function () {
+        /** @internal */
         function DataService(baseDataService) {
             this.baseDataService = baseDataService;
             this.promotion = new PromotionDataService(baseDataService);
@@ -3193,14 +3240,44 @@
             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);
+         * ```
          */
         DataService.prototype.query = function (query, variables, fetchPolicy) {
             if (fetchPolicy === void 0) { 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 },
+         * );
+         * ```
          */
         DataService.prototype.mutate = function (mutation, variables, update) {
             return this.baseDataService.mutate(mutation, variables, update);
@@ -3259,6 +3336,25 @@
                     }
                 },
             });
+            if (i0.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;");
+            }
+        };
+        AppComponent.prototype.handleGlobalHotkeys = function (event) {
+            var _this = this;
+            if (event.ctrlKey === true && event.key === 'u') {
+                event.preventDefault();
+                if (i0.isDevMode()) {
+                    this.dataService.client
+                        .uiState()
+                        .single$.pipe(operators.switchMap(function (_b) {
+                        var uiState = _b.uiState;
+                        return _this.dataService.client.setDisplayUiExtensionPoints(!uiState.displayUiExtensionPoints);
+                    }))
+                        .subscribe();
+                }
+            }
         };
         return AppComponent;
     }());
@@ -3274,7 +3370,10 @@
         { type: ServerConfigService },
         { type: LocalStorageService },
         { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
-    ]; };
+    ]; };
+    AppComponent.propDecorators = {
+        handleGlobalHotkeys: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+    };
     var vendureUiConfig;
     function loadAppConfig() {
@@ -3293,6 +3392,14 @@
     function getDefaultUiLanguage() {
         return getAppConfig().defaultLanguage;
+    }
+    function getDefaultUiLocale() {
+        var _a;
+        var defaultLocale = getAppConfig().defaultLocale;
+        if (defaultLocale) {
+            return defaultLocale;
+        }
+        return (_a = navigator.language.split('-')[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
     }
     /**
@@ -3448,7 +3555,7 @@
     ]; };
     /**
-     * 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.
      */
     var ModalDialogComponent = /** @class */ (function () {
@@ -3573,8 +3680,13 @@
     ];
     /**
+     * @description
      * This service is responsible for instantiating a ModalDialog component and
      * embedding the specified component within.
+     *
+     * @docsCategory providers
+     * @docsPage ModalService
+     * @docsWeight 0
      */
     var ModalService = /** @class */ (function () {
         function ModalService(componentFactoryResolver, overlayHostService) {
@@ -3582,12 +3694,13 @@
             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;
          *
@@ -3603,20 +3716,21 @@
          * }
          * ```
          *
-         * ```
+         * @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>
          * ```
          */
@@ -3637,6 +3751,7 @@
             }));
         };
         /**
+         * @description
          * Displays a modal dialog with the provided title, body and buttons.
          */
         ModalService.prototype.dialog = function (config) {
@@ -3660,20 +3775,295 @@
     var UiLanguageSwitcherDialogComponent = /** @class */ (function () {
         function UiLanguageSwitcherDialogComponent() {
             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(exports.CurrencyCode);
+            this.selectedCurrencyCode = 'USD';
+            this.now = new Date().toISOString();
+            var browserLanguage = navigator.language.split('-');
+            this.browserDefaultLocale = browserLanguage.length === 1 ? undefined : browserLanguage[1];
         }
-        UiLanguageSwitcherDialogComponent.prototype.setLanguage = function (languageCode) {
-            this.resolveWith(languageCode);
+        UiLanguageSwitcherDialogComponent.prototype.ngOnInit = function () {
+            this.updatePreviewLocale();
+        };
+        UiLanguageSwitcherDialogComponent.prototype.updatePreviewLocale = function () {
+            if (!this.currentLocale || this.currentLocale.length === 0 || this.currentLocale.length === 2) {
+                this.previewLocale = this.createLocaleString(this.currentLanguage, this.currentLocale);
+            }
+        };
+        UiLanguageSwitcherDialogComponent.prototype.setLanguage = function () {
+            var _a;
+            this.resolveWith([this.currentLanguage, (_a = this.currentLocale) === null || _a === void 0 ? void 0 : _a.toUpperCase()]);
+        };
+        UiLanguageSwitcherDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        UiLanguageSwitcherDialogComponent.prototype.createLocaleString = function (languageCode, region) {
+            if (!region) {
+                return languageCode;
+            }
+            return [languageCode, region.toUpperCase()].join('-');
         };
         return UiLanguageSwitcherDialogComponent;
     }());
     UiLanguageSwitcherDialogComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"]
                 },] }
-    ];
+    ];
+    UiLanguageSwitcherDialogComponent.ctorParameters = function () { return []; };
     var AppShellComponent = /** @class */ (function () {
         function AppShellComponent(authService, dataService, router, i18nService, modalService, localStorageService) {
@@ -3689,24 +4079,36 @@
             this.userName$ = this.dataService.client
                 .userStatus()
                 .single$.pipe(operators.map(function (data) { return data.userStatus.username; }));
-            this.uiLanguage$ = this.dataService.client.uiState().stream$.pipe(operators.map(function (data) { return data.uiState.language; }));
+            this.uiLanguageAndLocale$ = this.dataService.client
+                .uiState()
+                .stream$.pipe(operators.map(function (_b) {
+                var uiState = _b.uiState;
+                var _a;
+                return [uiState.language, (_a = uiState.locale) !== null && _a !== void 0 ? _a : undefined];
+            }));
             this.availableLanguages = this.i18nService.availableLanguages;
         };
         AppShellComponent.prototype.selectUiLanguage = function () {
             var _this = this;
-            this.uiLanguage$
-                .pipe(operators.take(1), operators.switchMap(function (currentLanguage) { return _this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
-                closable: true,
-                size: 'md',
-                locals: {
-                    availableLanguages: _this.availableLanguages,
-                    currentLanguage: currentLanguage,
-                },
-            }); }), operators.switchMap(function (value) { return (value ? _this.dataService.client.setUiLanguage(value) : rxjs.EMPTY); }))
+            this.uiLanguageAndLocale$
+                .pipe(operators.take(1), operators.switchMap(function (_b) {
+                var _c = __read(_b, 2), currentLanguage = _c[0], currentLocale = _c[1];
+                return _this.modalService.fromComponent(UiLanguageSwitcherDialogComponent, {
+                    closable: true,
+                    size: 'lg',
+                    locals: {
+                        availableLanguages: _this.availableLanguages,
+                        currentLanguage: currentLanguage,
+                        currentLocale: currentLocale,
+                    },
+                });
+            }), operators.switchMap(function (result) { return result ? _this.dataService.client.setUiLanguage(result[0], result[1]) : rxjs.EMPTY; }))
                 .subscribe(function (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);
                 }
             });
         };
@@ -3727,7 +4129,7 @@
     AppShellComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -4069,16 +4471,18 @@
      *   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 {
@@ -4106,17 +4510,18 @@
      *   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 {
@@ -4151,6 +4556,7 @@
      * })
      * export class MyUiExtensionModule {}
      * ```
+     * @docsCategory action-bar
      */
     function addActionBarItem(config) {
         return {
@@ -4619,7 +5025,7 @@
     MainNavComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -4766,202 +5172,268 @@
     UserMenuComponent.decorators = [
         { type: i0.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: i0.Input }],
         availableLanguages: [{ type: i0.Input }],
-        uiLanguage: [{ type: i0.Input }],
+        uiLanguageAndLocale: [{ type: i0.Input }],
         logOut: [{ type: i0.Output }],
         selectUiLanguage: [{ type: i0.Output }]
     };
     // tslint:disable
     var 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
@@ -5005,6 +5477,7 @@
     function getClientDefaults(localStorageService) {
         var currentLanguage = localStorageService.get('uiLanguageCode') || getDefaultUiLanguage();
+        var currentLocale = localStorageService.get('uiLocale') || getDefaultUiLocale();
         var currentContentLanguage = localStorageService.get('contentLanguageCode') || getDefaultUiLanguage();
         var activeTheme = localStorageService.get('activeTheme') || 'default';
         return {
@@ -5023,22 +5496,24 @@
             },
             uiState: {
                 language: currentLanguage,
+                locale: currentLocale || '',
                 contentLanguage: currentContentLanguage,
                 theme: activeTheme,
+                displayUiExtensionPoints: false,
                 __typename: 'UiState',
             },
         };
     }
-    var ɵ0$2 = function (_, args, _a) {
-        var cache = _a.cache;
+    var ɵ0$2 = function (_, args, _b) {
+        var cache = _b.cache;
         return updateRequestsInFlight(cache, 1);
-    }, ɵ1 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ1 = function (_, args, _b) {
+        var cache = _b.cache;
         return updateRequestsInFlight(cache, -1);
-    }, ɵ2 = function (_, args, _a) {
-        var cache = _a.cache;
-        var _b = args.input, username = _b.username, loginTime = _b.loginTime, channels = _b.channels, activeChannelId = _b.activeChannelId;
+    }, ɵ2 = function (_, args, _b) {
+        var cache = _b.cache;
+        var _c = args.input, username = _c.username, loginTime = _c.loginTime, channels = _c.channels, activeChannelId = _c.activeChannelId;
         // tslint:disable-next-line:no-non-null-assertion
         var permissions = channels.find(function (c) { return c.id === activeChannelId; }).permissions;
         var data = {
@@ -5054,8 +5529,8 @@
         };
         cache.writeQuery({ query: GET_USER_STATUS, data: data });
         return data.userStatus;
-    }, ɵ3 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ3 = function (_, args, _b) {
+        var cache = _b.cache;
         var data = {
             userStatus: {
                 __typename: 'UserStatus',
@@ -5069,50 +5544,44 @@
         };
         cache.writeQuery({ query: GET_USER_STATUS, data: data });
         return data.userStatus;
-    }, ɵ4 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ4 = function (_, args, _b) {
+        var cache = _b.cache;
         // tslint:disable-next-line:no-non-null-assertion
         var previous = cache.readQuery({ query: GET_UI_STATE });
-        var data = {
-            uiState: {
-                __typename: 'UiState',
-                language: args.languageCode,
-                contentLanguage: previous.uiState.contentLanguage,
-                theme: previous.uiState.theme,
-            },
-        };
+        var data = updateUiState(previous, 'language', args.languageCode);
         cache.writeQuery({ query: GET_UI_STATE, data: data });
         return args.languageCode;
-    }, ɵ5 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ5 = function (_, args, _b) {
+        var cache = _b.cache;
+        var _a;
         // tslint:disable-next-line:no-non-null-assertion
         var previous = cache.readQuery({ query: GET_UI_STATE });
-        var data = {
-            uiState: {
-                __typename: 'UiState',
-                language: previous.uiState.language,
-                contentLanguage: args.languageCode,
-                theme: previous.uiState.theme,
-            },
-        };
+        var data = updateUiState(previous, 'locale', args.locale);
+        cache.writeQuery({ query: GET_UI_STATE, data: data });
+        return (_a = args.locale) !== null && _a !== void 0 ? _a : undefined;
+    }, ɵ6 = function (_, args, _b) {
+        var cache = _b.cache;
+        // tslint:disable-next-line:no-non-null-assertion
+        var previous = cache.readQuery({ query: GET_UI_STATE });
+        var data = updateUiState(previous, 'contentLanguage', args.languageCode);
         cache.writeQuery({ query: GET_UI_STATE, data: data });
         return args.languageCode;
-    }, ɵ6 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ7 = function (_, args, _b) {
+        var cache = _b.cache;
         // tslint:disable-next-line:no-non-null-assertion
         var previous = cache.readQuery({ query: GET_UI_STATE });
-        var data = {
-            uiState: {
-                __typename: 'UiState',
-                language: previous.uiState.language,
-                contentLanguage: previous.uiState.contentLanguage,
-                theme: args.theme,
-            },
-        };
+        var data = updateUiState(previous, 'theme', args.theme);
         cache.writeQuery({ query: GET_UI_STATE, data: data });
         return args.theme;
-    }, ɵ7 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ8 = function (_, args, _b) {
+        var cache = _b.cache;
+        // tslint:disable-next-line:no-non-null-assertion
+        var previous = cache.readQuery({ query: GET_UI_STATE });
+        var data = updateUiState(previous, 'displayUiExtensionPoints', args.display);
+        cache.writeQuery({ query: GET_UI_STATE, data: data });
+        return args.display;
+    }, ɵ9 = function (_, args, _b) {
+        var cache = _b.cache;
         // tslint:disable-next-line:no-non-null-assertion
         var previous = cache.readQuery({ query: GET_USER_STATUS });
         var activeChannel = previous.userStatus.channels.find(function (c) { return c.id === args.channelId; });
@@ -5125,8 +5594,8 @@
         };
         cache.writeQuery({ query: GET_USER_STATUS, data: data });
         return data.userStatus;
-    }, ɵ8 = function (_, args, _a) {
-        var cache = _a.cache;
+    }, ɵ10 = function (_, args, _b) {
+        var cache = _b.cache;
         // tslint:disable-next-line:no-non-null-assertion
         var previous = cache.readQuery({ query: GET_USER_STATUS });
         var data = {
@@ -5142,12 +5611,20 @@
             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) {
+        var _b;
+        return {
+            uiState: Object.assign(Object.assign({}, previous.uiState), (_b = {}, _b[key] = value, _b.__typename = 'UiState', _b)),
+        };
+    }
     function updateRequestsInFlight(cache, increment) {
         var previous = cache.readQuery({ query: GET_NEWTORK_STATUS });
         var inFlightRequests = previous ? previous.networkStatus.inFlightRequests + increment : increment;
@@ -5222,7 +5699,25 @@
     // How many ms before the toast is dismissed.
     var 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
      */
     var NotificationService = /** @class */ (function () {
         function NotificationService(i18nService, resolver, overlayHostService) {
@@ -5239,6 +5734,7 @@
             configurable: true
         });
         /**
+         * @description
          * Display a success toast notification
          */
         NotificationService.prototype.success = function (message, translationVars) {
@@ -5249,6 +5745,7 @@
             });
         };
         /**
+         * @description
          * Display an info toast notification
          */
         NotificationService.prototype.info = function (message, translationVars) {
@@ -5259,6 +5756,7 @@
             });
         };
         /**
+         * @description
          * Display a warning toast notification
          */
         NotificationService.prototype.warning = function (message, translationVars) {
@@ -5269,6 +5767,7 @@
             });
         };
         /**
+         * @description
          * Display an error toast notification
          */
         NotificationService.prototype.error = function (message, translationVars) {
@@ -5280,6 +5779,7 @@
             });
         };
         /**
+         * @description
          * Display a toast notification.
          */
         NotificationService.prototype.notify = function (config) {
@@ -5698,10 +6198,11 @@
     /**
      * This service allows the registration of custom controls for customFields.
+     *
+     * @deprecated The ComponentRegistryService now handles custom field components directly.
      */
     var CustomFieldComponentService = /** @class */ (function () {
-        function CustomFieldComponentService(componentFactoryResolver, componentRegistryService) {
-            this.componentFactoryResolver = componentFactoryResolver;
+        function CustomFieldComponentService(componentRegistryService) {
             this.componentRegistryService = componentRegistryService;
         }
         /**
@@ -5729,17 +6230,23 @@
         };
         return CustomFieldComponentService;
     }());
-    CustomFieldComponentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CustomFieldComponentService_Factory() { return new CustomFieldComponentService(i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(ComponentRegistryService)); }, token: CustomFieldComponentService, providedIn: "root" });
+    CustomFieldComponentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CustomFieldComponentService_Factory() { return new CustomFieldComponentService(i0__namespace.ɵɵinject(ComponentRegistryService)); }, token: CustomFieldComponentService, providedIn: "root" });
     CustomFieldComponentService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root',
                 },] }
     ];
     CustomFieldComponentService.ctorParameters = function () { return [
-        { type: i0.ComponentFactoryResolver },
         { type: ComponentRegistryService }
     ]; };
+    /**
+     * @description
+     * A checkbox input. The default input component for `boolean` fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
     var BooleanFormInputComponent = /** @class */ (function () {
         function BooleanFormInputComponent() {
         }
@@ -5755,6 +6262,146 @@
                 },] }
     ];
+    function jsonValidator() {
+        return function (control) {
+            var error = { jsonInvalid: true };
+            try {
+                JSON.parse(control.value);
+            }
+            catch (e) {
+                control.setErrors(error);
+                return error;
+            }
+            control.setErrors(null);
+            return null;
+        };
+    }
+    /**
+     * @description
+     * A JSON editor input with syntax highlighting and error detection. Works well
+     * with `text` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
+    var JsonEditorFormInputComponent = /** @class */ (function () {
+        function JsonEditorFormInputComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            this.isValid = true;
+        }
+        Object.defineProperty(JsonEditorFormInputComponent.prototype, "height", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.height) || this.config.height;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        JsonEditorFormInputComponent.prototype.ngOnInit = function () {
+            this.formControl.addValidators(jsonValidator());
+        };
+        JsonEditorFormInputComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            var lastVal = '';
+            var highlight = function (editor) {
+                var _a;
+                var 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.CodeJar(this.editorElementRef.nativeElement, highlight);
+            this.jar.onUpdate(function (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';
+            }
+        };
+        JsonEditorFormInputComponent.prototype.getJsonError = function (json) {
+            try {
+                JSON.parse(json);
+            }
+            catch (e) {
+                return e.message;
+            }
+            return;
+        };
+        JsonEditorFormInputComponent.prototype.getErrorPos = function (errorMessage) {
+            if (!errorMessage) {
+                return;
+            }
+            var matches = errorMessage.match(/at position (\d+)/);
+            var pos = matches === null || matches === void 0 ? void 0 : matches[1];
+            return pos != null ? +pos : undefined;
+        };
+        JsonEditorFormInputComponent.prototype.syntaxHighlight = function (json, errorPos) {
+            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            var hasMarkedError = false;
+            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+                var args = [];
+                for (var _i = 1; _i < arguments.length; _i++) {
+                    args[_i - 1] = arguments[_i];
+                }
+                var 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';
+                }
+                var errorClass = '';
+                if (errorPos && !hasMarkedError) {
+                    var length = args[0].length;
+                    var offset = args[4];
+                    if (errorPos <= length + offset) {
+                        errorClass = 'je-error';
+                        hasMarkedError = true;
+                    }
+                }
+                return '<span class="je-' + cls + ' ' + errorClass + '">' + match + '</span>';
+            });
+        };
+        return JsonEditorFormInputComponent;
+    }());
+    JsonEditorFormInputComponent.id = 'json-editor-form-input';
+    JsonEditorFormInputComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    JsonEditorFormInputComponent.propDecorators = {
+        editorElementRef: [{ type: i0.ViewChild, args: ['editor',] }]
+    };
+    /**
+     * @description
+     * An input for monetary values. Should be used with `int` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
     var CurrencyFormInputComponent = /** @class */ (function () {
         function CurrencyFormInputComponent(dataService) {
             this.dataService = dataService;
@@ -5780,6 +6427,14 @@
         readonly: [{ type: i0.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
+     */
     var CustomerGroupFormInputComponent = /** @class */ (function () {
         function CustomerGroupFormInputComponent(dataService) {
             this.dataService = dataService;
@@ -5813,16 +6468,47 @@
         readonly: [{ type: i0.Input }]
     };
+    /**
+     * @description
+     * Allows selection of a datetime. Default input for `datetime` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
     var DateFormInputComponent = /** @class */ (function () {
         function DateFormInputComponent() {
         }
+        Object.defineProperty(DateFormInputComponent.prototype, "min", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DateFormInputComponent.prototype, "max", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DateFormInputComponent.prototype, "yearRange", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.yearRange) || this.config.yearRange;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return DateFormInputComponent;
     }());
     DateFormInputComponent.id = 'date-form-input';
     DateFormInputComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -5831,6 +6517,14 @@
         readonly: [{ type: i0.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
+     */
     var FacetValueFormInputComponent = /** @class */ (function () {
         function FacetValueFormInputComponent(dataService) {
             this.dataService = dataService;
@@ -5857,26 +6551,80 @@
         { type: DataService }
     ]; };
+    /**
+     * @description
+     * Displays a number input. Default input for `int` and `float` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
     var NumberFormInputComponent = /** @class */ (function () {
         function NumberFormInputComponent() {
         }
-        return NumberFormInputComponent;
-    }());
-    NumberFormInputComponent.id = 'number-form-input';
-    NumberFormInputComponent.decorators = [
-        { type: i0.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",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    NumberFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
-    };
-    var PasswordFormInputComponent = /** @class */ (function () {
-        function PasswordFormInputComponent() {
+        Object.defineProperty(NumberFormInputComponent.prototype, "prefix", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NumberFormInputComponent.prototype, "suffix", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NumberFormInputComponent.prototype, "min", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NumberFormInputComponent.prototype, "max", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(NumberFormInputComponent.prototype, "step", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.step) || this.config.step;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return NumberFormInputComponent;
+    }());
+    NumberFormInputComponent.id = 'number-form-input';
+    NumberFormInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-number-form-input',
+                    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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    NumberFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
+    };
+    /**
+     * @description
+     * Displays a password text input. Should be used with `string` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
+    var PasswordFormInputComponent = /** @class */ (function () {
+        function PasswordFormInputComponent() {
         }
         return PasswordFormInputComponent;
     }());
@@ -5890,6 +6638,14 @@
                 },] }
     ];
+    /**
+     * @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
+     */
     var ProductSelectorFormInputComponent = /** @class */ (function () {
         function ProductSelectorFormInputComponent(dataService) {
             this.dataService = dataService;
@@ -5939,6 +6695,15 @@
         { 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
+     */
     var RelationFormInputComponent = /** @class */ (function () {
         function RelationFormInputComponent() {
         }
@@ -5957,16 +6722,54 @@
         readonly: [{ type: i0.Input }]
     };
+    /**
+     * @description
+     * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
+     */
+    var RichTextFormInputComponent = /** @class */ (function () {
+        function RichTextFormInputComponent() {
+        }
+        return RichTextFormInputComponent;
+    }());
+    RichTextFormInputComponent.id = 'rich-text-form-input';
+    RichTextFormInputComponent.decorators = [
+        { type: i0.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: i0.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
+     */
     var SelectFormInputComponent = /** @class */ (function () {
         function SelectFormInputComponent() {
         }
+        Object.defineProperty(SelectFormInputComponent.prototype, "options", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return SelectFormInputComponent;
     }());
     SelectFormInputComponent.id = 'select-form-input';
     SelectFormInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-select-form-input',
-                    template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of 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: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["select{width:100%}\n"]
                 },] }
@@ -5975,21 +6778,51 @@
         readonly: [{ type: i0.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
+     */
     var TextFormInputComponent = /** @class */ (function () {
         function TextFormInputComponent() {
         }
+        Object.defineProperty(TextFormInputComponent.prototype, "prefix", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TextFormInputComponent.prototype, "suffix", {
+            get: function () {
+                var _a;
+                return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TextFormInputComponent;
     }());
     TextFormInputComponent.id = 'text-form-input';
     TextFormInputComponent.decorators = [
         { type: i0.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: i0.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
+     */
     var TextareaFormInputComponent = /** @class */ (function () {
         function TextareaFormInputComponent() {
         }
@@ -6025,11 +6858,14 @@
         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
@@ -6042,6 +6878,35 @@
      * })
      * 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 {
@@ -6055,6 +6920,8 @@
     }
     /**
      * @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.
      *
@@ -6069,6 +6936,10 @@
      * })
      * export class MyUiExtensionModule {}
      * ```
+     *
+     * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+     *
+     * @docsCategory custom-input-components
      */
     function registerCustomFieldComponent(entity, fieldName, component) {
         return {
@@ -6146,9 +7017,9 @@
     ActionBarItemsComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    styles: [":host{display:inline-block;min-height:36px}\n"]
                 },] }
     ];
     ActionBarItemsComponent.ctorParameters = function () { return [
@@ -6200,7 +7071,7 @@
         { type: i0.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 = {
@@ -6216,7 +7087,7 @@
     AddressFormComponent.decorators = [
         { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -6542,7 +7413,25 @@
     };
     /**
+     * @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
      */
     var AssetPickerDialogComponent = /** @class */ (function () {
         function AssetPickerDialogComponent(dataService, notificationService) {
@@ -6794,10 +7683,6 @@
                 this.subscription.unsubscribe();
             }
         };
-        AssetPreviewComponent.prototype.customFieldIsSet = function (name) {
-            var _a;
-            return !!((_a = this.customFieldsForm) === null || _a === void 0 ? void 0 : _a.get([name]));
-        };
         AssetPreviewComponent.prototype.getSourceFileName = function () {
             var parts = this.asset.source.split('/');
             return parts[parts.length - 1];
@@ -6897,7 +7782,7 @@
     AssetPreviewComponent.decorators = [
         { type: i0.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: i0.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"]
                 },] }
@@ -7212,12 +8097,23 @@
     };
     /**
+     * @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
      */
     var ChipComponent = /** @class */ (function () {
         function ChipComponent() {
             this.invert = false;
             /**
+             * @description
              * If set, the chip will have an auto-generated background
              * color based on the string value passed in.
              */
@@ -7500,8 +8396,19 @@
     };
     /**
+     * @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
      */
     var CurrencyInputComponent = /** @class */ (function () {
         function CurrencyInputComponent(dataService, changeDetectorRef) {
@@ -7632,6 +8539,114 @@
         valueChange: [{ type: i0.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: i0.APP_INITIALIZER,
+            multi: true,
+            useFactory: function (customDetailComponentService) { return function () {
+                customDetailComponentService.registerCustomDetailComponent(config);
+            }; },
+            deps: [CustomDetailComponentService],
+        };
+    }
+    var CustomDetailComponentService = /** @class */ (function () {
+        function CustomDetailComponentService() {
+            this.customDetailComponents = new Map();
+        }
+        CustomDetailComponentService.prototype.registerCustomDetailComponent = function (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]);
+            }
+        };
+        CustomDetailComponentService.prototype.getCustomDetailComponentsFor = function (locationId) {
+            var _a;
+            return (_a = this.customDetailComponents.get(locationId)) !== null && _a !== void 0 ? _a : [];
+        };
+        return CustomDetailComponentService;
+    }());
+    CustomDetailComponentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CustomDetailComponentService_Factory() { return new CustomDetailComponentService(); }, token: CustomDetailComponentService, providedIn: "root" });
+    CustomDetailComponentService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root',
+                },] }
+    ];
+    var CustomDetailComponentHostComponent = /** @class */ (function () {
+        function CustomDetailComponentHostComponent(viewContainerRef, componentFactoryResolver, customDetailComponentService) {
+            this.viewContainerRef = viewContainerRef;
+            this.componentFactoryResolver = componentFactoryResolver;
+            this.customDetailComponentService = customDetailComponentService;
+            this.componentRefs = [];
+        }
+        CustomDetailComponentHostComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            var customComponents = this.customDetailComponentService.getCustomDetailComponentsFor(this.locationId);
+            try {
+                for (var customComponents_1 = __values(customComponents), customComponents_1_1 = customComponents_1.next(); !customComponents_1_1.done; customComponents_1_1 = customComponents_1.next()) {
+                    var config = customComponents_1_1.value;
+                    var factory = this.componentFactoryResolver.resolveComponentFactory(config.component);
+                    var componentRef = this.viewContainerRef.createComponent(factory);
+                    componentRef.instance.entity$ = this.entity$;
+                    componentRef.instance.detailForm = this.detailForm;
+                    this.componentRefs.push(componentRef);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (customComponents_1_1 && !customComponents_1_1.done && (_a = customComponents_1.return)) _a.call(customComponents_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        CustomDetailComponentHostComponent.prototype.ngOnDestroy = function () {
+            var e_2, _a;
+            try {
+                for (var _b = __values(this.componentRefs), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var ref = _c.value;
+                    ref.destroy();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+        return CustomDetailComponentHostComponent;
+    }());
+    CustomDetailComponentHostComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-custom-detail-component-host',
+                    template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"detailComponent\"></vdr-ui-extension-point>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    CustomDetailComponentHostComponent.ctorParameters = function () { return [
+        { type: i0.ViewContainerRef },
+        { type: i0.ComponentFactoryResolver },
+        { type: CustomDetailComponentService }
+    ]; };
+    CustomDetailComponentHostComponent.propDecorators = {
+        locationId: [{ type: i0.Input }],
+        entity$: [{ type: i0.Input }],
+        detailForm: [{ type: i0.Input }]
+    };
     /**
      * This component renders the appropriate type of form input control based
      * on the "type" property of the provided CustomFieldConfig.
@@ -7722,6 +8737,65 @@
         template: [{ type: i0.ViewChild, args: [i0.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
+     */
     var DataTableComponent = /** @class */ (function () {
         function DataTableComponent() {
             this.allSelectChange = new i0.EventEmitter();
@@ -7998,27 +9072,43 @@
     ];
     DatetimePickerService.ctorParameters = function () { return []; };
+    /**
+     * @description
+     * A form input for selecting datetime values.
+     *
+     * @example
+     * ```HTML
+     * <vdr-datetime-picker [(ngModel)]="startDate"></vdr-datetime-picker>
+     * ```
+     *
+     * @docsCategory components
+     */
     var DatetimePickerComponent = /** @class */ (function () {
         function DatetimePickerComponent(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;
@@ -8185,6 +9275,31 @@
         calendarTable: [{ type: i0.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
+     */
     var DropdownComponent = /** @class */ (function () {
         function DropdownComponent() {
             this.isOpen = false;
@@ -8462,6 +9577,19 @@
                             _this.destroyMessage$.next();
                             break;
                         }
+                        case 'active-route': {
+                            var 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': {
                             var _a = data.data, document = _a.document, variables = _a.variables, fetchPolicy = _a.fetchPolicy;
                             _this.dataService
@@ -8488,8 +9616,9 @@
                 }
             };
         }
-        ExtensionHostService.prototype.init = function (extensionWindow) {
+        ExtensionHostService.prototype.init = function (extensionWindow, routeSnapshot) {
             this.extensionWindow = extensionWindow;
+            this.routeSnapshot = routeSnapshot;
             window.addEventListener('message', this.handleMessage);
         };
         ExtensionHostService.prototype.destroy = function () {
@@ -8548,7 +9677,7 @@
             if (this.openInIframe) {
                 var extensionWindow = this.extensionFrame.nativeElement.contentWindow;
                 if (extensionWindow) {
-                    this.extensionHostService.init(extensionWindow);
+                    this.extensionHostService.init(extensionWindow, this.route.snapshot);
                 }
             }
         };
@@ -8563,7 +9692,7 @@
             if (!extensionWindow) {
                 return;
             }
-            this.extensionHostService.init(extensionWindow);
+            this.extensionHostService.init(extensionWindow, this.route.snapshot);
             this.extensionWindowIsOpen = true;
             this.extensionWindow = extensionWindow;
             var timer;
@@ -8631,6 +9760,28 @@
         return facetsWithValues.reduce(function (flattened, facet) { return 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
+     */
     var FacetValueSelectorComponent = /** @class */ (function () {
         function FacetValueSelectorComponent(dataService) {
             this.dataService = dataService;
@@ -9130,7 +10281,15 @@
     ]; };
     /**
+     * @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
      */
     var ObjectTreeComponent = /** @class */ (function () {
         function ObjectTreeComponent(parent) {
@@ -9177,6 +10336,16 @@
         isArrayItem: [{ type: i0.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
+     */
     var OrderStateLabelComponent = /** @class */ (function () {
         function OrderStateLabelComponent() {
         }
@@ -9238,6 +10407,18 @@
         pageChange: [{ type: i0.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
+     */
     var ProductSelectorComponent = /** @class */ (function () {
         function ProductSelectorComponent(dataService) {
             this.dataService = dataService;
@@ -9971,7 +11152,18 @@
     ]; };
     /**
-     * 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
      */
     var RichTextEditorComponent = /** @class */ (function () {
         function RichTextEditorComponent(changeDetector, prosemirrorService) {
@@ -10034,7 +11226,7 @@
                         },
                         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 = function () { return [
@@ -10094,6 +11286,69 @@
         type: [{ type: i0.Input }]
     };
+    var TabbedCustomFieldsComponent = /** @class */ (function () {
+        function TabbedCustomFieldsComponent() {
+            this.readonly = false;
+            this.compact = false;
+            this.showLabel = true;
+            this.defaultTabName = '__default_tab__';
+        }
+        TabbedCustomFieldsComponent.prototype.ngOnInit = function () {
+            this.tabbedCustomFields = this.groupByTabs(this.customFields);
+        };
+        TabbedCustomFieldsComponent.prototype.customFieldIsSet = function (name) {
+            return !!this.customFieldsFormGroup.get(name);
+        };
+        TabbedCustomFieldsComponent.prototype.groupByTabs = function (customFieldConfigs) {
+            var e_1, _d;
+            var _this = this;
+            var _a, _b, _c;
+            var tabMap = new Map();
+            try {
+                for (var customFieldConfigs_1 = __values(customFieldConfigs), customFieldConfigs_1_1 = customFieldConfigs_1.next(); !customFieldConfigs_1_1.done; customFieldConfigs_1_1 = customFieldConfigs_1.next()) {
+                    var field = customFieldConfigs_1_1.value;
+                    var 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]);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (customFieldConfigs_1_1 && !customFieldConfigs_1_1.done && (_d = customFieldConfigs_1.return)) _d.call(customFieldConfigs_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return Array.from(tabMap.entries())
+                .sort(function (a, b) { return (a[0] === _this.defaultTabName ? -1 : 1); })
+                .map(function (_d) {
+                var _e = __read(_d, 2), tabName = _e[0], customFields = _e[1];
+                return ({ tabName: tabName, customFields: customFields });
+            });
+        };
+        return TabbedCustomFieldsComponent;
+    }());
+    TabbedCustomFieldsComponent.decorators = [
+        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    TabbedCustomFieldsComponent.propDecorators = {
+        entityName: [{ type: i0.Input }],
+        customFields: [{ type: i0.Input }],
+        customFieldsFormGroup: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        compact: [{ type: i0.Input }],
+        showLabel: [{ type: i0.Input }]
+    };
     /**
      * A button link to be used as actions in rows of a table.
      */
@@ -10224,13 +11479,46 @@
                     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: i0.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: i0.HostBinding, args: ['class.readonly',] }, { type: i0.Input }]
     };
+    var UiExtensionPointComponent = /** @class */ (function () {
+        function UiExtensionPointComponent(dataService) {
+            this.dataService = dataService;
+            this.isDevMode = i0.isDevMode();
+        }
+        UiExtensionPointComponent.prototype.ngOnInit = function () {
+            this.display$ = this.dataService.client
+                .uiState()
+                .mapStream(function (_a) {
+                var uiState = _a.uiState;
+                return uiState.displayUiExtensionPoints;
+            });
+        };
+        return UiExtensionPointComponent;
+    }());
+    UiExtensionPointComponent.decorators = [
+        { type: i0.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: i0.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 = function () { return [
+        { type: DataService }
+    ]; };
+    UiExtensionPointComponent.propDecorators = {
+        locationId: [{ type: i0.Input }],
+        topPx: [{ type: i0.Input }],
+        leftPx: [{ type: i0.Input }],
+        api: [{ type: i0.Input }]
+    };
     /**
      * Allows declarative binding to the "disabled" property of a reactive form
      * control.
@@ -10393,6 +11681,20 @@
         vdrIfMultichannelElse: [{ type: i0.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
+     */
     var IfMultichannelDirective = /** @class */ (function (_super) {
         __extends(IfMultichannelDirective, _super);
         function IfMultichannelDirective(_viewContainer, templateRef, dataService) {
@@ -10434,6 +11736,7 @@
     };
     /**
+     * @description
      * Conditionally shows/hides templates based on the current active user having the specified permission.
      * Based on the ngIf source. Also support "else" templates:
      *
@@ -10445,6 +11748,8 @@
      *
      * 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
      */
     var IfPermissionsDirective = /** @class */ (function (_super) {
         __extends(IfPermissionsDirective, _super);
@@ -10598,6 +11903,7 @@
                                 _this.onChange(val);
                                 _this.control.patchValue(val, { emitEvent: false });
                             });
+                            setTimeout(function () { return _this.changeDetectorRef.markForCheck(); });
                         }
                     };
                     // initial render
@@ -11140,6 +12446,20 @@
         detailTemplate: [{ type: i0.ContentChild, args: [RelationCardDetailDirective, { read: i0.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
+     */
     var AssetPreviewPipe = /** @class */ (function () {
         function AssetPreviewPipe() {
         }
@@ -11238,8 +12558,16 @@
     ]; };
     /**
+     * @description
      * Displays a number of milliseconds in a more human-readable format,
      * e.g. "12ms", "33s", "2:03m"
+     *
+     * @example
+     * ```TypeScript
+     * {{ timeInMs | duration }}
+     * ```
+     *
+     * @docsCategory pipes
      */
     var DurationPipe = /** @class */ (function () {
         function DurationPipe(i18nService) {
@@ -11276,7 +12604,15 @@
     ]; };
     /**
+     * @description
      * Formats a number into a human-readable file size string.
+     *
+     * @example
+     * ```TypeScript
+     * {{ fileSizeInBytes | filesize }}
+     * ```
+     *
+     * @docsCategory pipes
      */
     var FileSizePipe = /** @class */ (function () {
         function FileSizePipe() {
@@ -11314,13 +12650,15 @@
     }
     /**
+     * @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
      */
     var HasPermissionPipe = /** @class */ (function () {
         function HasPermissionPipe(dataService, changeDetectorRef) {
@@ -11397,9 +12735,13 @@
             if (dataService && changeDetectorRef) {
                 this.subscription = dataService.client
                     .uiState()
-                    .mapStream(function (data) { return data.uiState.language; })
-                    .subscribe(function (languageCode) {
-                    _this.locale = languageCode.replace(/_/g, '-');
+                    .mapStream(function (data) { return data.uiState; })
+                    .subscribe(function (_a) {
+                    var language = _a.language, locale = _a.locale;
+                    _this.locale = language.replace(/_/g, '-');
+                    if (locale) {
+                        _this.locale += "-" + locale;
+                    }
                     changeDetectorRef.markForCheck();
                 });
             }
@@ -11420,7 +12762,15 @@
     ]; };
     /**
+     * @description
      * Displays a human-readable name for a given ISO 4217 currency code.
+     *
+     * @example
+     * ```HTML
+     * {{ order.currencyCode | localeCurrencyName }}
+     * ```
+     *
+     * @docsCategory pipes
      */
     var LocaleCurrencyNamePipe = /** @class */ (function (_super) {
         __extends(LocaleCurrencyNamePipe, _super);
@@ -11469,6 +12819,18 @@
         { type: i0.ChangeDetectorRef, decorators: [{ type: i0.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
+     */
     var LocaleCurrencyPipe = /** @class */ (function (_super) {
         __extends(LocaleCurrencyPipe, _super);
         function LocaleCurrencyPipe(dataService, changeDetectorRef) {
@@ -11504,6 +12866,13 @@
      * @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
      */
     var LocaleDatePipe = /** @class */ (function (_super) {
         __extends(LocaleDatePipe, _super);
@@ -11577,7 +12946,15 @@
     ]; };
     /**
-     * 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
      */
     var LocaleLanguageNamePipe = /** @class */ (function (_super) {
         __extends(LocaleLanguageNamePipe, _super);
@@ -11615,6 +12992,53 @@
         { type: i0.ChangeDetectorRef, decorators: [{ type: i0.Optional }] }
     ]; };
+    /**
+     * @description
+     * Displays a human-readable name for a given region.
+     *
+     * @example
+     * ```HTML
+     * {{ 'GB' | localeRegionName }}
+     * ```
+     *
+     * @docsCategory pipes
+     */
+    var LocaleRegionNamePipe = /** @class */ (function (_super) {
+        __extends(LocaleRegionNamePipe, _super);
+        function LocaleRegionNamePipe(dataService, changeDetectorRef) {
+            return _super.call(this, dataService, changeDetectorRef) || this;
+        }
+        LocaleRegionNamePipe.prototype.transform = function (value, locale) {
+            var _a;
+            if (value == null || value === '') {
+                return '';
+            }
+            if (typeof value !== 'string') {
+                return "Invalid region code \"" + value + "\"";
+            }
+            var 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
+            var DisplayNames = Intl.DisplayNames;
+            try {
+                return new DisplayNames([activeLocale.replace('_', '-')], { type: 'region' }).of(value.replace('_', '-'));
+            }
+            catch (e) {
+                return value;
+            }
+        };
+        return LocaleRegionNamePipe;
+    }(LocaleBasePipe));
+    LocaleRegionNamePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'localeRegionName',
+                    pure: false,
+                },] }
+    ];
+    LocaleRegionNamePipe.ctorParameters = function () { return [
+        { type: DataService, decorators: [{ type: i0.Optional }] },
+        { type: i0.ChangeDetectorRef, decorators: [{ type: i0.Optional }] }
+    ]; };
     /**
      * Formats a string into sentence case (first letter of first word uppercase).
      */
@@ -11772,7 +13196,15 @@
     ];
     /**
+     * @description
      * Converts a date into the format "3 minutes ago", "5 hours ago" etc.
+     *
+     * @example
+     * ```HTML
+     * {{ order.orderPlacedAt | timeAgo }}
+     * ```
+     *
+     * @docsCategory pipes
      */
     var TimeAgoPipe = /** @class */ (function () {
         function TimeAgoPipe(i18nService) {
@@ -11947,11 +13379,15 @@
         LocaleDatePipe,
         LocaleCurrencyPipe,
         LocaleLanguageNamePipe,
+        LocaleRegionNamePipe,
         TagSelectorComponent,
         ManageTagsDialogComponent,
         RelationSelectorDialogComponent,
         RelationCardComponent,
         StatusBadgeComponent,
+        TabbedCustomFieldsComponent,
+        UiExtensionPointComponent,
+        CustomDetailComponentHostComponent,
     ];
     var DYNAMIC_FORM_INPUTS = [
         TextFormInputComponent,
@@ -11972,6 +13408,8 @@
         RelationCardDetailDirective,
         RelationSelectorDialogComponent,
         TextareaFormInputComponent,
+        RichTextFormInputComponent,
+        JsonEditorFormInputComponent,
     ];
     var SharedModule = /** @class */ (function () {
         function SharedModule() {
@@ -12099,6 +13537,45 @@
                 },] }
     ];
+    /**
+     * @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
+     */
     var BaseDetailComponent = /** @class */ (function () {
         function BaseDetailComponent(route, router, serverConfigService, dataService) {
             this.route = route;
@@ -12122,8 +13599,8 @@
             this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
             rxjs.combineLatest(this.entity$, this.languageCode$)
                 .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function (_a) {
-                var _b = __read(_a, 2), entity = _b[0], languageCode = _b[1];
+                .subscribe(function (_c) {
+                var _d = __read(_c, 2), entity = _d[0], languageCode = _d[1];
                 _this.setFormValues(entity, languageCode);
                 _this.detailForm.markAsPristine();
             });
@@ -12139,14 +13616,38 @@
         BaseDetailComponent.prototype.canDeactivate = function () {
             return this.detailForm && this.detailForm.pristine;
         };
+        BaseDetailComponent.prototype.setCustomFieldFormValues = function (customFields, formGroup, entity, currentTranslation) {
+            var e_1, _c;
+            var _a, _b;
+            try {
+                for (var customFields_1 = __values(customFields), customFields_1_1 = customFields_1.next(); !customFields_1_1.done; customFields_1_1 = customFields_1.next()) {
+                    var fieldDef = customFields_1_1.value;
+                    var key = fieldDef.name;
+                    var 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];
+                    var control = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get(key);
+                    if (control) {
+                        control.patchValue(value);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (customFields_1_1 && !customFields_1_1.done && (_c = customFields_1.return)) _c.call(customFields_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
         BaseDetailComponent.prototype.getCustomFieldConfig = function (key) {
             return this.serverConfigService.getCustomFieldsFor(key);
         };
         BaseDetailComponent.prototype.setQueryParam = function (key, value) {
-            var _a;
+            var _c;
             this.router.navigate([
                 './',
-                Object.assign(Object.assign({}, this.route.snapshot.params), (_a = {}, _a[key] = value, _a)),
+                Object.assign(Object.assign({}, this.route.snapshot.params), (_c = {}, _c[key] = value, _c)),
             ], {
                 relativeTo: this.route,
                 queryParamsHandling: 'merge',
@@ -12161,8 +13662,34 @@
         };
     }
     /**
+     * @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
      */
     var BaseEntityResolver = /** @class */ (function () {
         function BaseEntityResolver(router, emptyEntity, entityStream) {
@@ -12170,6 +13697,7 @@
             this.emptyEntity = emptyEntity;
             this.entityStream = entityStream;
         }
+        /** @internal */
         BaseEntityResolver.prototype.resolve = function (route, state) {
             var id = route.paramMap.get('id');
             // Complete the entity stream upon navigating away
@@ -12186,8 +13714,70 @@
     }());
     /**
+     * @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
     var BaseListComponent = /** @class */ (function () {
@@ -12200,6 +13790,7 @@
             this.defaults = { take: 10, skip: 0 };
         }
         /**
+         * @description
          * Sets the fetch function for the list being implemented.
          */
         BaseListComponent.prototype.setQueryFn = function (listQueryFn, mappingFn, onPageChangeFn, defaults) {
@@ -12212,6 +13803,7 @@
                 this.defaults = defaults;
             }
         };
+        /** @internal */
         BaseListComponent.prototype.ngOnInit = function () {
             var _this = this;
             if (!this.listQueryFn) {
@@ -12233,19 +13825,29 @@
                 .pipe(operators.takeUntil(this.destroy$))
                 .subscribe(fetchPage);
         };
+        /** @internal */
         BaseListComponent.prototype.ngOnDestroy = function () {
             this.destroy$.next();
             this.destroy$.complete();
             this.listQuery.completed$.next();
         };
+        /**
+         * @description
+         * Sets the current page number in the url.
+         */
         BaseListComponent.prototype.setPageNumber = function (page) {
             this.setQueryParam('page', page, { replaceUrl: true });
         };
+        /**
+         * @description
+         * Sets the number of items per page in the url.
+         */
         BaseListComponent.prototype.setItemsPerPage = function (perPage) {
             this.setQueryParam('perPage', perPage, { replaceUrl: true });
         };
         /**
-         * Re-fetch the current page
+         * @description
+         * Re-fetch the current page of results.
          */
         BaseListComponent.prototype.refresh = function () {
             this.refresh$.next(undefined);
@@ -12383,7 +13985,7 @@
     }
     // Auto-generated by the set-version.js script.
-    var ADMIN_UI_VERSION = '1.3.3';
+    var ADMIN_UI_VERSION = '1.4.1';
     /**
      * Responsible for registering dashboard widget components and querying for layouts.
@@ -12697,6 +14299,7 @@
     exports.CREATE_ZONE = CREATE_ZONE;
     exports.CURRENT_USER_FRAGMENT = CURRENT_USER_FRAGMENT;
     exports.CUSTOMER_FRAGMENT = CUSTOMER_FRAGMENT;
+    exports.CUSTOMER_GROUP_FRAGMENT = CUSTOMER_GROUP_FRAGMENT;
     exports.CUSTOM_FIELD_CONFIG_FRAGMENT = CUSTOM_FIELD_CONFIG_FRAGMENT;
     exports.CanDeactivateDetailGuard = CanDeactivateDetailGuard;
     exports.ChannelAssignmentControlComponent = ChannelAssignmentControlComponent;
@@ -12712,6 +14315,8 @@
     exports.CoreModule = CoreModule;
     exports.CurrencyFormInputComponent = CurrencyFormInputComponent;
     exports.CurrencyInputComponent = CurrencyInputComponent;
+    exports.CustomDetailComponentHostComponent = CustomDetailComponentHostComponent;
+    exports.CustomDetailComponentService = CustomDetailComponentService;
     exports.CustomFieldComponentService = CustomFieldComponentService;
     exports.CustomFieldControlComponent = CustomFieldControlComponent;
     exports.CustomFieldLabelPipe = CustomFieldLabelPipe;
@@ -12846,6 +14451,7 @@
     exports.GET_TAX_CATEGORY = GET_TAX_CATEGORY;
     exports.GET_TAX_RATE = GET_TAX_RATE;
     exports.GET_TAX_RATE_LIST = GET_TAX_RATE_LIST;
+    exports.GET_TAX_RATE_LIST_SIMPLE = GET_TAX_RATE_LIST_SIMPLE;
     exports.GET_UI_STATE = GET_UI_STATE;
     exports.GET_USER_STATUS = GET_USER_STATUS;
     exports.GET_ZONE = GET_ZONE;
@@ -12866,6 +14472,7 @@
     exports.ItemsPerPageControlsComponent = ItemsPerPageControlsComponent;
     exports.JOB_INFO_FRAGMENT = JOB_INFO_FRAGMENT;
     exports.JobQueueService = JobQueueService;
+    exports.JsonEditorFormInputComponent = JsonEditorFormInputComponent;
     exports.LOCALE_STRING_CUSTOM_FIELD_FRAGMENT = LOCALE_STRING_CUSTOM_FIELD_FRAGMENT;
     exports.LOG_OUT = LOG_OUT;
     exports.LabeledDataComponent = LabeledDataComponent;
@@ -12877,6 +14484,7 @@
     exports.LocaleCurrencyPipe = LocaleCurrencyPipe;
     exports.LocaleDatePipe = LocaleDatePipe;
     exports.LocaleLanguageNamePipe = LocaleLanguageNamePipe;
+    exports.LocaleRegionNamePipe = LocaleRegionNamePipe;
     exports.MODIFY_ORDER = MODIFY_ORDER;
     exports.MOVE_COLLECTION = MOVE_COLLECTION;
     exports.MainNavComponent = MainNavComponent;
@@ -12937,6 +14545,7 @@
     exports.RelationProductVariantInputComponent = RelationProductVariantInputComponent;
     exports.RelationSelectorDialogComponent = RelationSelectorDialogComponent;
     exports.RichTextEditorComponent = RichTextEditorComponent;
+    exports.RichTextFormInputComponent = RichTextFormInputComponent;
     exports.SEARCH_PRODUCTS = SEARCH_PRODUCTS;
     exports.SETTLE_PAYMENT = SETTLE_PAYMENT;
     exports.SETTLE_REFUND = SETTLE_REFUND;
@@ -12944,7 +14553,9 @@
     exports.SET_AS_LOGGED_IN = SET_AS_LOGGED_IN;
     exports.SET_AS_LOGGED_OUT = SET_AS_LOGGED_OUT;
     exports.SET_CONTENT_LANGUAGE = SET_CONTENT_LANGUAGE;
-    exports.SET_UI_LANGUAGE = SET_UI_LANGUAGE;
+    exports.SET_DISPLAY_UI_EXTENSION_POINTS = SET_DISPLAY_UI_EXTENSION_POINTS;
+    exports.SET_UI_LANGUAGE_AND_LOCALE = SET_UI_LANGUAGE_AND_LOCALE;
+    exports.SET_UI_LOCALE = SET_UI_LOCALE;
     exports.SET_UI_THEME = SET_UI_THEME;
     exports.SHIPPING_METHOD_FRAGMENT = SHIPPING_METHOD_FRAGMENT;
     exports.STRING_CUSTOM_FIELD_FRAGMENT = STRING_CUSTOM_FIELD_FRAGMENT;
@@ -12971,6 +14582,7 @@
     exports.TRANSITION_FULFILLMENT_TO_STATE = TRANSITION_FULFILLMENT_TO_STATE;
     exports.TRANSITION_ORDER_TO_STATE = TRANSITION_ORDER_TO_STATE;
     exports.TRANSITION_PAYMENT_TO_STATE = TRANSITION_PAYMENT_TO_STATE;
+    exports.TabbedCustomFieldsComponent = TabbedCustomFieldsComponent;
     exports.TableRowActionComponent = TableRowActionComponent;
     exports.TagSelectorComponent = TagSelectorComponent;
     exports.TextFormInputComponent = TextFormInputComponent;
@@ -13008,6 +14620,7 @@
     exports.UPDATE_USER_CHANNELS = UPDATE_USER_CHANNELS;
     exports.UPDATE_ZONE = UPDATE_ZONE;
     exports.USER_STATUS_FRAGMENT = USER_STATUS_FRAGMENT;
+    exports.UiExtensionPointComponent = UiExtensionPointComponent;
     exports.UiLanguageSwitcherDialogComponent = UiLanguageSwitcherDialogComponent;
     exports.UserMenuComponent = UserMenuComponent;
     exports.ZONE_FRAGMENT = ZONE_FRAGMENT;
@@ -13039,6 +14652,7 @@
     exports.getConfigArgValue = getConfigArgValue;
     exports.getDefaultConfigArgValue = getDefaultConfigArgValue;
     exports.getDefaultUiLanguage = getDefaultUiLanguage;
+    exports.getDefaultUiLocale = getDefaultUiLocale;
     exports.getLocales = getLocales;
     exports.getMarkRange = getMarkRange;
     exports.getServerLocation = getServerLocation;
@@ -13049,11 +14663,13 @@
     exports.interpolateDescription = interpolateDescription;
     exports.introspectionResult = result;
     exports.isEntityCreateOrUpdateMutation = isEntityCreateOrUpdateMutation;
+    exports.jsonValidator = jsonValidator;
     exports.linkItem = linkItem;
     exports.linkSelectPlugin = linkSelectPlugin;
     exports.loadAppConfig = loadAppConfig;
     exports.markActive = markActive;
     exports.orderedListRule = orderedListRule;
+    exports.registerCustomDetailComponent = registerCustomDetailComponent;
     exports.registerCustomFieldComponent = registerCustomFieldComponent;
     exports.registerDashboardWidget = registerDashboardWidget;
     exports.registerDefaultFormInputs = registerDefaultFormInputs;
@@ -13066,6 +14682,7 @@
     exports.unicodePatternValidator = unicodePatternValidator;
     exports.weekDayNames = weekDayNames;
     exports.ɵ1 = ɵ1;
+    exports.ɵ10 = ɵ10;
     exports.ɵ2 = ɵ2;
     exports.ɵ3 = ɵ3;
     exports.ɵ4 = ɵ4;
@@ -13073,6 +14690,7 @@
     exports.ɵ6 = ɵ6;
     exports.ɵ7 = ɵ7;
     exports.ɵ8 = ɵ8;
+    exports.ɵ9 = ɵ9;
     Object.defineProperty(exports, '__esModule', { value: true });