@vendure/admin-ui 1.5.1 → 1.6.1

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

@@ -361,13 +361,13 @@
     var UPDATE_ADMINISTRATOR = apolloAngular.gql(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {\n        updateAdministrator(input: $input) {\n            ...Administrator\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateAdministrator($input: UpdateAdministratorInput!) {\n        updateAdministrator(input: $input) {\n            ...Administrator\n        }\n    }\n    ", "\n"])), ADMINISTRATOR_FRAGMENT);
     var UPDATE_ACTIVE_ADMINISTRATOR = apolloAngular.gql(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n    mutation UpdateActiveAdministrator($input: UpdateActiveAdministratorInput!) {\n        updateActiveAdministrator(input: $input) {\n            ...Administrator\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateActiveAdministrator($input: UpdateActiveAdministratorInput!) {\n        updateActiveAdministrator(input: $input) {\n            ...Administrator\n        }\n    }\n    ", "\n"])), ADMINISTRATOR_FRAGMENT);
     var DELETE_ADMINISTRATOR = apolloAngular.gql(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n    mutation DeleteAdministrator($id: ID!) {\n        deleteAdministrator(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteAdministrator($id: ID!) {\n        deleteAdministrator(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var GET_ROLES = apolloAngular.gql(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n    query GetRoles($options: RoleListOptions) {\n        roles(options: $options) {\n            items {\n                ...Role\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetRoles($options: RoleListOptions) {\n        roles(options: $options) {\n            items {\n                ...Role\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), ROLE_FRAGMENT);
+    var GET_ROLES = apolloAngular.gql(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n    query GetRoles($options: RoleListOptions) {\n        roles(options: $options) {\n            items {\n                ...Role\n            }\n            totalItems\n        }\n    }\n    ", "\n"], ["\n    query GetRoles($options: RoleListOptions) {\n        roles(options: $options) {\n            items {\n                ...Role\n            }\n            totalItems\n        }\n    }\n    ", "\n"])), ROLE_FRAGMENT);
     var GET_ROLE = apolloAngular.gql(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n    query GetRole($id: ID!) {\n        role(id: $id) {\n            ...Role\n        }\n    }\n    ", "\n"], ["\n    query GetRole($id: ID!) {\n        role(id: $id) {\n            ...Role\n        }\n    }\n    ", "\n"])), ROLE_FRAGMENT);
     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$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 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$7, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$5, templateObject_15$5;
 
     var AdministratorDataService = /** @class */ (function () {
         function AdministratorDataService(baseDataService) {
@@ -429,7 +429,7 @@
     }());
 
     var CONFIGURABLE_OPERATION_FRAGMENT = apolloAngular.gql(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n    fragment ConfigurableOperation on ConfigurableOperation {\n        args {\n            name\n            value\n        }\n        code\n    }\n"], ["\n    fragment ConfigurableOperation on ConfigurableOperation {\n        args {\n            name\n            value\n        }\n        code\n    }\n"])));
-    var CONFIGURABLE_OPERATION_DEF_FRAGMENT = apolloAngular.gql(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {\n        args {\n            name\n            type\n            required\n            defaultValue\n            list\n            ui\n            label\n        }\n        code\n        description\n    }\n"], ["\n    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {\n        args {\n            name\n            type\n            required\n            defaultValue\n            list\n            ui\n            label\n        }\n        code\n        description\n    }\n"])));
+    var CONFIGURABLE_OPERATION_DEF_FRAGMENT = apolloAngular.gql(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {\n        args {\n            name\n            type\n            required\n            defaultValue\n            list\n            ui\n            label\n            description\n        }\n        code\n        description\n    }\n"], ["\n    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {\n        args {\n            name\n            type\n            required\n            defaultValue\n            list\n            ui\n            label\n            description\n        }\n        code\n        description\n    }\n"])));
     var ERROR_RESULT_FRAGMENT = apolloAngular.gql(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n    fragment ErrorResult on ErrorResult {\n        errorCode\n        message\n    }\n"], ["\n    fragment ErrorResult on ErrorResult {\n        errorCode\n        message\n    }\n"])));
     var templateObject_1$a, templateObject_2$a, templateObject_3$a;
 
@@ -544,14 +544,14 @@
     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 SET_UI_THEME = apolloAngular.gql(templateObject_10$6 || (templateObject_10$6 = __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;
+    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$6, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$4, templateObject_16$4;
 
     /**
      * @description
@@ -650,7 +650,7 @@
     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        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 GET_ZONE = apolloAngular.gql(templateObject_10$5 || (templateObject_10$5 = __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);
     var DELETE_ZONE = apolloAngular.gql(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n    mutation DeleteZone($id: ID!) {\n        deleteZone(id: $id) {\n            message\n            result\n        }\n    }\n"], ["\n    mutation DeleteZone($id: ID!) {\n        deleteZone(id: $id) {\n            message\n            result\n        }\n    }\n"])));
@@ -706,7 +706,7 @@
     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$3, 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;
+    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$5, 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$3, 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();
@@ -1238,7 +1238,7 @@
     var PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT = apolloAngular.gql(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n    fragment ProductOptionGroupWithOptions on ProductOptionGroup {\n        id\n        createdAt\n        updatedAt\n        languageCode\n        code\n        name\n        translations {\n            id\n            name\n        }\n        options {\n            id\n            languageCode\n            name\n            code\n            translations {\n                name\n            }\n        }\n    }\n"], ["\n    fragment ProductOptionGroupWithOptions on ProductOptionGroup {\n        id\n        createdAt\n        updatedAt\n        languageCode\n        code\n        name\n        translations {\n            id\n            name\n        }\n        options {\n            id\n            languageCode\n            name\n            code\n            translations {\n                name\n            }\n        }\n    }\n"])));
     var UPDATE_PRODUCT = apolloAngular.gql(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n    mutation UpdateProduct($input: UpdateProductInput!, $variantListOptions: ProductVariantListOptions) {\n        updateProduct(input: $input) {\n            ...ProductDetail\n            variantList(options: $variantListOptions) {\n                items {\n                    ...ProductVariant\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation UpdateProduct($input: UpdateProductInput!, $variantListOptions: ProductVariantListOptions) {\n        updateProduct(input: $input) {\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 CREATE_PRODUCT = apolloAngular.gql(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n    mutation CreateProduct($input: CreateProductInput!, $variantListOptions: ProductVariantListOptions) {\n        createProduct(input: $input) {\n            ...ProductDetail\n            variantList(options: $variantListOptions) {\n                items {\n                    ...ProductVariant\n                }\n                totalItems\n            }\n        }\n    }\n    ", "\n    ", "\n"], ["\n    mutation CreateProduct($input: CreateProductInput!, $variantListOptions: ProductVariantListOptions) {\n        createProduct(input: $input) {\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 DELETE_PRODUCT = apolloAngular.gql(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n    mutation DeleteProduct($id: ID!) {\n        deleteProduct(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteProduct($id: ID!) {\n        deleteProduct(id: $id) {\n            result\n            message\n        }\n    }\n"])));
+    var DELETE_PRODUCT = apolloAngular.gql(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n    mutation DeleteProduct($id: ID!) {\n        deleteProduct(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteProduct($id: ID!) {\n        deleteProduct(id: $id) {\n            result\n            message\n        }\n    }\n"])));
     var CREATE_PRODUCT_VARIANTS = apolloAngular.gql(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n    mutation CreateProductVariants($input: [CreateProductVariantInput!]!) {\n        createProductVariants(input: $input) {\n            ...ProductVariant\n        }\n    }\n    ", "\n"], ["\n    mutation CreateProductVariants($input: [CreateProductVariantInput!]!) {\n        createProductVariants(input: $input) {\n            ...ProductVariant\n        }\n    }\n    ", "\n"])), PRODUCT_VARIANT_FRAGMENT);
     var UPDATE_PRODUCT_VARIANTS = apolloAngular.gql(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n    mutation UpdateProductVariants($input: [UpdateProductVariantInput!]!) {\n        updateProductVariants(input: $input) {\n            ...ProductVariant\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateProductVariants($input: [UpdateProductVariantInput!]!) {\n        updateProductVariants(input: $input) {\n            ...ProductVariant\n        }\n    }\n    ", "\n"])), PRODUCT_VARIANT_FRAGMENT);
     var CREATE_PRODUCT_OPTION_GROUP = apolloAngular.gql(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {\n        createProductOptionGroup(input: $input) {\n            ...ProductOptionGroupWithOptions\n        }\n    }\n    ", "\n"], ["\n    mutation CreateProductOptionGroup($input: CreateProductOptionGroupInput!) {\n        createProductOptionGroup(input: $input) {\n            ...ProductOptionGroupWithOptions\n        }\n    }\n    ", "\n"])), PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT);
@@ -1273,7 +1273,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$2, templateObject_22$2, 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$4, 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$2, 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);
@@ -1283,8 +1283,9 @@
     var UPDATE_COLLECTION = apolloAngular.gql(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n    mutation UpdateCollection($input: UpdateCollectionInput!) {\n        updateCollection(input: $input) {\n            ...Collection\n        }\n    }\n    ", "\n"], ["\n    mutation UpdateCollection($input: UpdateCollectionInput!) {\n        updateCollection(input: $input) {\n            ...Collection\n        }\n    }\n    ", "\n"])), COLLECTION_FRAGMENT);
     var MOVE_COLLECTION = apolloAngular.gql(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n    mutation MoveCollection($input: MoveCollectionInput!) {\n        moveCollection(input: $input) {\n            ...Collection\n        }\n    }\n    ", "\n"], ["\n    mutation MoveCollection($input: MoveCollectionInput!) {\n        moveCollection(input: $input) {\n            ...Collection\n        }\n    }\n    ", "\n"])), COLLECTION_FRAGMENT);
     var DELETE_COLLECTION = apolloAngular.gql(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n    mutation DeleteCollection($id: ID!) {\n        deleteCollection(id: $id) {\n            result\n            message\n        }\n    }\n"], ["\n    mutation DeleteCollection($id: ID!) {\n        deleteCollection(id: $id) {\n            result\n            message\n        }\n    }\n"])));
-    var GET_COLLECTION_CONTENTS = apolloAngular.gql(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n    query GetCollectionContents($id: ID!, $options: ProductVariantListOptions) {\n        collection(id: $id) {\n            id\n            name\n            productVariants(options: $options) {\n                items {\n                    id\n                    productId\n                    name\n                }\n                totalItems\n            }\n        }\n    }\n"], ["\n    query GetCollectionContents($id: ID!, $options: ProductVariantListOptions) {\n        collection(id: $id) {\n            id\n            name\n            productVariants(options: $options) {\n                items {\n                    id\n                    productId\n                    name\n                }\n                totalItems\n            }\n        }\n    }\n"])));
-    var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$5, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$4;
+    var GET_COLLECTION_CONTENTS = apolloAngular.gql(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n    query GetCollectionContents($id: ID!, $options: ProductVariantListOptions) {\n        collection(id: $id) {\n            id\n            name\n            productVariants(options: $options) {\n                items {\n                    id\n                    productId\n                    name\n                    sku\n                }\n                totalItems\n            }\n        }\n    }\n"], ["\n    query GetCollectionContents($id: ID!, $options: ProductVariantListOptions) {\n        collection(id: $id) {\n            id\n            name\n            productVariants(options: $options) {\n                items {\n                    id\n                    productId\n                    name\n                    sku\n                }\n                totalItems\n            }\n        }\n    }\n"])));
+    var PREVIEW_COLLECTION_CONTENTS = apolloAngular.gql(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n    query PreviewCollectionContents(\n        $input: PreviewCollectionVariantsInput!\n        $options: ProductVariantListOptions\n    ) {\n        previewCollectionVariants(input: $input, options: $options) {\n            items {\n                id\n                productId\n                name\n                sku\n            }\n            totalItems\n        }\n    }\n"], ["\n    query PreviewCollectionContents(\n        $input: PreviewCollectionVariantsInput!\n        $options: ProductVariantListOptions\n    ) {\n        previewCollectionVariants(input: $input, options: $options) {\n            items {\n                id\n                productId\n                name\n                sku\n            }\n            totalItems\n        }\n    }\n"])));
+    var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$5, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$4, templateObject_10$3;
 
     var CollectionDataService = /** @class */ (function () {
         function CollectionDataService(baseDataService) {
@@ -1342,6 +1343,9 @@
                 id: id,
             });
         };
+        CollectionDataService.prototype.previewCollectionVariants = function (input, options) {
+            return this.baseDataService.query(PREVIEW_COLLECTION_CONTENTS, { input: input, options: options });
+        };
         CollectionDataService.prototype.getCollectionContents = function (id, take, skip, filterTerm) {
             if (take === void 0) { take = 10; }
             if (skip === void 0) { skip = 0; }
@@ -1578,7 +1582,7 @@
     var DISCOUNT_FRAGMENT = apolloAngular.gql(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    fragment Discount on Discount {\n        adjustmentSource\n        amount\n        amountWithTax\n        description\n        type\n    }\n"], ["\n    fragment Discount on Discount {\n        adjustmentSource\n        amount\n        amountWithTax\n        description\n        type\n    }\n"])));
     var REFUND_FRAGMENT = apolloAngular.gql(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    fragment Refund on Refund {\n        id\n        state\n        items\n        shipping\n        adjustment\n        transactionId\n        paymentId\n    }\n"], ["\n    fragment Refund on Refund {\n        id\n        state\n        items\n        shipping\n        adjustment\n        transactionId\n        paymentId\n    }\n"])));
     var ORDER_ADDRESS_FRAGMENT = apolloAngular.gql(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    fragment OrderAddress on OrderAddress {\n        fullName\n        company\n        streetLine1\n        streetLine2\n        city\n        province\n        postalCode\n        country\n        countryCode\n        phoneNumber\n    }\n"], ["\n    fragment OrderAddress on OrderAddress {\n        fullName\n        company\n        streetLine1\n        streetLine2\n        city\n        province\n        postalCode\n        country\n        countryCode\n        phoneNumber\n    }\n"])));
-    var ORDER_FRAGMENT = apolloAngular.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    fragment Order on Order {\n        id\n        createdAt\n        updatedAt\n        orderPlacedAt\n        code\n        state\n        nextStates\n        total\n        currencyCode\n        customer {\n            id\n            firstName\n            lastName\n        }\n        shippingLines {\n            shippingMethod {\n                name\n            }\n        }\n    }\n"], ["\n    fragment Order on Order {\n        id\n        createdAt\n        updatedAt\n        orderPlacedAt\n        code\n        state\n        nextStates\n        total\n        currencyCode\n        customer {\n            id\n            firstName\n            lastName\n        }\n        shippingLines {\n            shippingMethod {\n                name\n            }\n        }\n    }\n"])));
+    var ORDER_FRAGMENT = apolloAngular.gql(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    fragment Order on Order {\n        id\n        createdAt\n        updatedAt\n        orderPlacedAt\n        code\n        state\n        nextStates\n        total\n        totalWithTax\n        currencyCode\n        customer {\n            id\n            firstName\n            lastName\n        }\n        shippingLines {\n            shippingMethod {\n                name\n            }\n        }\n    }\n"], ["\n    fragment Order on Order {\n        id\n        createdAt\n        updatedAt\n        orderPlacedAt\n        code\n        state\n        nextStates\n        total\n        totalWithTax\n        currencyCode\n        customer {\n            id\n            firstName\n            lastName\n        }\n        shippingLines {\n            shippingMethod {\n                name\n            }\n        }\n    }\n"])));
     var FULFILLMENT_FRAGMENT = apolloAngular.gql(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n    fragment Fulfillment on Fulfillment {\n        id\n        state\n        nextStates\n        createdAt\n        updatedAt\n        method\n        orderItems {\n            id\n        }\n        trackingCode\n    }\n"], ["\n    fragment Fulfillment on Fulfillment {\n        id\n        state\n        nextStates\n        createdAt\n        updatedAt\n        method\n        orderItems {\n            id\n        }\n        trackingCode\n    }\n"])));
     var ORDER_LINE_FRAGMENT = apolloAngular.gql(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    fragment OrderLine on OrderLine {\n        id\n        featuredAsset {\n            preview\n        }\n        productVariant {\n            id\n            name\n            sku\n            trackInventory\n            stockOnHand\n        }\n        discounts {\n            ...Discount\n        }\n        unitPrice\n        unitPriceWithTax\n        proratedUnitPrice\n        proratedUnitPriceWithTax\n        quantity\n        items {\n            id\n            unitPrice\n            unitPriceWithTax\n            taxRate\n            refundId\n            cancelled\n            fulfillment {\n                ...Fulfillment\n            }\n        }\n        linePrice\n        lineTax\n        linePriceWithTax\n        discountedLinePrice\n        discountedLinePriceWithTax\n    }\n"], ["\n    fragment OrderLine on OrderLine {\n        id\n        featuredAsset {\n            preview\n        }\n        productVariant {\n            id\n            name\n            sku\n            trackInventory\n            stockOnHand\n        }\n        discounts {\n            ...Discount\n        }\n        unitPrice\n        unitPriceWithTax\n        proratedUnitPrice\n        proratedUnitPriceWithTax\n        quantity\n        items {\n            id\n            unitPrice\n            unitPriceWithTax\n            taxRate\n            refundId\n            cancelled\n            fulfillment {\n                ...Fulfillment\n            }\n        }\n        linePrice\n        lineTax\n        linePriceWithTax\n        discountedLinePrice\n        discountedLinePriceWithTax\n    }\n"])));
     var ORDER_DETAIL_FRAGMENT = apolloAngular.gql(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    fragment OrderDetail on Order {\n        id\n        createdAt\n        updatedAt\n        code\n        state\n        nextStates\n        active\n        couponCodes\n        customer {\n            id\n            firstName\n            lastName\n        }\n        lines {\n            ...OrderLine\n        }\n        surcharges {\n            id\n            sku\n            description\n            price\n            priceWithTax\n            taxRate\n        }\n        discounts {\n            ...Discount\n        }\n        promotions {\n            id\n            couponCode\n        }\n        subTotal\n        subTotalWithTax\n        total\n        totalWithTax\n        currencyCode\n        shipping\n        shippingWithTax\n        shippingLines {\n            shippingMethod {\n                id\n                code\n                name\n                fulfillmentHandlerCode\n                description\n            }\n        }\n        taxSummary {\n            description\n            taxBase\n            taxRate\n            taxTotal\n        }\n        shippingAddress {\n            ...OrderAddress\n        }\n        billingAddress {\n            ...OrderAddress\n        }\n        payments {\n            id\n            createdAt\n            transactionId\n            amount\n            method\n            state\n            nextStates\n            errorMessage\n            metadata\n            refunds {\n                id\n                createdAt\n                state\n                items\n                adjustment\n                total\n                paymentId\n                reason\n                transactionId\n                method\n                metadata\n                orderItems {\n                    id\n                }\n            }\n        }\n        fulfillments {\n            ...Fulfillment\n        }\n        modifications {\n            id\n            createdAt\n            isSettled\n            priceChange\n            note\n            payment {\n                id\n                amount\n            }\n            orderItems {\n                id\n            }\n            refund {\n                id\n                paymentId\n                total\n            }\n            surcharges {\n                id\n            }\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n"], ["\n    fragment OrderDetail on Order {\n        id\n        createdAt\n        updatedAt\n        code\n        state\n        nextStates\n        active\n        couponCodes\n        customer {\n            id\n            firstName\n            lastName\n        }\n        lines {\n            ...OrderLine\n        }\n        surcharges {\n            id\n            sku\n            description\n            price\n            priceWithTax\n            taxRate\n        }\n        discounts {\n            ...Discount\n        }\n        promotions {\n            id\n            couponCode\n        }\n        subTotal\n        subTotalWithTax\n        total\n        totalWithTax\n        currencyCode\n        shipping\n        shippingWithTax\n        shippingLines {\n            shippingMethod {\n                id\n                code\n                name\n                fulfillmentHandlerCode\n                description\n            }\n        }\n        taxSummary {\n            description\n            taxBase\n            taxRate\n            taxTotal\n        }\n        shippingAddress {\n            ...OrderAddress\n        }\n        billingAddress {\n            ...OrderAddress\n        }\n        payments {\n            id\n            createdAt\n            transactionId\n            amount\n            method\n            state\n            nextStates\n            errorMessage\n            metadata\n            refunds {\n                id\n                createdAt\n                state\n                items\n                adjustment\n                total\n                paymentId\n                reason\n                transactionId\n                method\n                metadata\n                orderItems {\n                    id\n                }\n            }\n        }\n        fulfillments {\n            ...Fulfillment\n        }\n        modifications {\n            id\n            createdAt\n            isSettled\n            priceChange\n            note\n            payment {\n                id\n                amount\n            }\n            orderItems {\n                id\n            }\n            refund {\n                id\n                paymentId\n                total\n            }\n            surcharges {\n                id\n            }\n        }\n    }\n    ", "\n    ", "\n    ", "\n    ", "\n"])), DISCOUNT_FRAGMENT, ORDER_ADDRESS_FRAGMENT, FULFILLMENT_FRAGMENT, ORDER_LINE_FRAGMENT);
@@ -4148,6 +4152,7 @@
             this.modalService = modalService;
             this.localStorageService = localStorageService;
             this.availableLanguages = [];
+            this.hideVendureBranding = getAppConfig().hideVendureBranding;
         }
         AppShellComponent.prototype.ngOnInit = function () {
             this.userName$ = this.dataService.client
@@ -4203,8 +4208,8 @@
     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                           [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"]
+                    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\" /><span class=\"wordmark\" *ngIf=\"!hideVendureBranding\">vendure</span></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:40px}.wordmark{font-weight:bold;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (min-width: 768px){vdr-breadcrumb{margin-left:10.8rem}}.header-actions{align-items:center}.content-area{position:relative}::ng-deep .header{background-image:linear-gradient(to right,var(--color-header-gradient-from),var(--color-header-gradient-to))}\n"]
                 },] }
     ];
     AppShellComponent.ctorParameters = function () { return [
@@ -5260,194 +5265,260 @@
 
     // 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',
-                'CouponCodeExpiredError',
-                'CouponCodeInvalidError',
-                'CouponCodeLimitError',
-                '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',
-                'CouponCodeExpiredError',
-                'CouponCodeInvalidError',
-                'CouponCodeLimitError',
+            "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",
+                "CouponCodeExpiredError",
+                "CouponCodeInvalidError",
+                "CouponCodeLimitError",
+                "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",
+                "CouponCodeExpiredError",
+                "CouponCodeInvalidError",
+                "CouponCodeLimitError"
+            ],
+            "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
@@ -5519,7 +5590,7 @@
         };
     }
 
-    var ɵ0$2 = function (_, args, _b) {
+    var ɵ0$3 = function (_, args, _b) {
         var cache = _b.cache;
         return updateRequestsInFlight(cache, 1);
     }, ɵ1 = function (_, args, _b) {
@@ -5620,7 +5691,7 @@
     };
     var clientResolvers = {
         Mutation: {
-            requestStarted: ɵ0$2,
+            requestStarted: ɵ0$3,
             requestCompleted: ɵ1,
             setAsLoggedIn: ɵ2,
             setAsLoggedOut: ɵ3,
@@ -6080,7 +6151,7 @@
             resolvers: clientResolvers,
         };
     }
-    var ɵ0$1 = initializeServerConfigService;
+    var ɵ0$2 = initializeServerConfigService;
     /**
      * The DataModule is responsible for all API calls *and* serves as the source of truth for global app
      * state via the apollo-link-state package.
@@ -6109,7 +6180,7 @@
                         {
                             provide: i0.APP_INITIALIZER,
                             multi: true,
-                            useFactory: ɵ0$1,
+                            useFactory: ɵ0$2,
                             deps: [ServerConfigService],
                         },
                     ],
@@ -6410,399 +6481,498 @@
     };
 
     /**
-     * @description
-     * An input for monetary values. Should be used with `int` type fields.
-     *
-     * @docsCategory custom-input-components
-     * @docsPage default-inputs
+     * ConfigArg values are always stored as strings. If they are not primitives, then
+     * they are JSON-encoded. This function unwraps them back into their original
+     * data type.
      */
-    var CurrencyFormInputComponent = /** @class */ (function () {
-        function CurrencyFormInputComponent(dataService) {
-            this.dataService = dataService;
-            this.currencyCode$ = this.dataService.settings
-                .getActiveChannel()
-                .mapStream(function (data) { return data.activeChannel.currencyCode; });
+    function getConfigArgValue(value) {
+        try {
+            return value ? JSON.parse(value) : undefined;
         }
-        return CurrencyFormInputComponent;
-    }());
-    CurrencyFormInputComponent.id = 'currency-form-input';
-    CurrencyFormInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-currency-form-input',
-                    template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    CurrencyFormInputComponent.ctorParameters = function () { return [
-        { type: DataService }
-    ]; };
-    CurrencyFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
-    };
-
+        catch (e) {
+            return value;
+        }
+    }
+    function encodeConfigArgValue(value) {
+        return Array.isArray(value) ? JSON.stringify(value) : (value !== null && value !== void 0 ? value : '').toString();
+    }
     /**
-     * @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
+     * Creates an empty ConfigurableOperation object based on the definition.
      */
-    var CustomerGroupFormInputComponent = /** @class */ (function () {
-        function CustomerGroupFormInputComponent(dataService) {
-            this.dataService = dataService;
-        }
-        CustomerGroupFormInputComponent.prototype.ngOnInit = function () {
-            this.customerGroups$ = this.dataService.customer
-                .getCustomerGroupList({
-                take: 1000,
-            })
-                .mapSingle(function (res) { return res.customerGroups.items; })
-                .pipe(operators.startWith([]));
-        };
-        CustomerGroupFormInputComponent.prototype.selectGroup = function (group) {
-            this.formControl.setValue(group.id);
-        };
-        return CustomerGroupFormInputComponent;
-    }());
-    CustomerGroupFormInputComponent.id = 'customer-group-form-input';
-    CustomerGroupFormInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-customer-group-form-input',
-                    template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    CustomerGroupFormInputComponent.ctorParameters = function () { return [
-        { type: DataService }
-    ]; };
-    CustomerGroupFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
-    };
-
+    function configurableDefinitionToInstance(def) {
+        return Object.assign(Object.assign({}, def), { args: def.args.map(function (arg) {
+                return Object.assign(Object.assign({}, arg), { value: getDefaultConfigArgValue(arg) });
+            }) });
+    }
     /**
-     * @description
-     * Allows selection of a datetime. Default input for `datetime` type fields.
-     *
-     * @docsCategory custom-input-components
-     * @docsPage default-inputs
+     * Converts an object of the type:
+     * ```
+     * {
+     *     code: 'my-operation',
+     *     args: {
+     *         someProperty: 'foo'
+     *     }
+     * }
+     * ```
+     * to the format defined by the ConfigurableOperationInput GraphQL input type:
+     * ```
+     * {
+     *     code: 'my-operation',
+     *     args: [
+     *         { name: 'someProperty', value: 'foo' }
+     *     ]
+     * }
+     * ```
      */
-    var DateFormInputComponent = /** @class */ (function () {
-        function DateFormInputComponent() {
+    function toConfigurableOperationInput(operation, formValueOperations) {
+        return {
+            code: operation.code,
+            arguments: Object.values(formValueOperations.args || {}).map(function (value, j) { return ({
+                name: operation.args[j].name,
+                value: (value === null || value === void 0 ? void 0 : value.hasOwnProperty('value'))
+                    ? encodeConfigArgValue(value.value)
+                    : encodeConfigArgValue(value),
+            }); }),
+        };
+    }
+    function configurableOperationValueIsValid(def, value) {
+        var e_1, _a;
+        if (!def || !value) {
+            return false;
         }
-        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]=\"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: [""]
-                },] }
-    ];
-    DateFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
-    };
-
+        if (def.code !== value.code) {
+            return false;
+        }
+        try {
+            for (var _b = __values(def.args), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var argDef = _c.value;
+                var argVal = value.args[argDef.name];
+                if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
+                    return false;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return true;
+    }
     /**
-     * @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
+     * Returns a default value based on the type of the config arg.
      */
-    var FacetValueFormInputComponent = /** @class */ (function () {
-        function FacetValueFormInputComponent(dataService) {
-            this.dataService = dataService;
-            this.isListInput = true;
+    function getDefaultConfigArgValue(arg) {
+        if (arg.list) {
+            return [];
         }
-        FacetValueFormInputComponent.prototype.ngOnInit = function () {
-            this.facets$ = this.dataService.facet
-                .getAllFacets()
-                .mapSingle(function (data) { return data.facets.items; })
-                .pipe(operators.shareReplay(1));
-        };
-        return FacetValueFormInputComponent;
-    }());
-    FacetValueFormInputComponent.id = 'facet-value-form-input';
-    FacetValueFormInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-facet-value-form-input',
-                    template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n></vdr-facet-value-selector>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
-                },] }
-    ];
-    FacetValueFormInputComponent.ctorParameters = function () { return [
-        { type: DataService }
-    ]; };
+        if (arg.defaultValue) {
+            return arg.defaultValue;
+        }
+        var type = arg.type;
+        switch (type) {
+            case 'string':
+            case 'datetime':
+            case 'float':
+            case 'ID':
+            case 'int':
+                return null;
+            case 'boolean':
+                return false;
+            default:
+                sharedUtils.assertNever(type);
+        }
+    }
 
     /**
-     * @description
-     * Displays a number input. Default input for `int` and `float` type fields.
-     *
-     * @docsCategory custom-input-components
-     * @docsPage default-inputs
+     * Interpolates the description of an ConfigurableOperation with the given values.
      */
-    var NumberFormInputComponent = /** @class */ (function () {
-        function NumberFormInputComponent() {
+    function interpolateDescription(operation, values) {
+        if (!operation) {
+            return '';
         }
-        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
+        var templateString = operation.description;
+        var interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, function (substring, argName) {
+            var normalizedArgName = argName.toLowerCase();
+            var value = values[normalizedArgName];
+            if (value == null) {
+                return '_';
+            }
+            var formatted = value;
+            var argDef = operation.args.find(function (arg) { return arg.name === normalizedArgName; });
+            if (argDef && argDef.type === 'int' && argDef.ui && argDef.ui.component === 'currency-form-input') {
+                formatted = value / 100;
+            }
+            if (argDef && argDef.type === 'datetime' && value instanceof Date) {
+                formatted = value.toLocaleDateString();
+            }
+            return formatted;
         });
-        return NumberFormInputComponent;
+        return interpolated;
+    }
+
+    /**
+     * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
+     */
+    var ConfigurableInputComponent = /** @class */ (function () {
+        function ConfigurableInputComponent() {
+            this.readonly = false;
+            this.removable = true;
+            this.position = 0;
+            this.remove = new i0.EventEmitter();
+            this.argValues = {};
+            this.form = new forms.FormGroup({});
+            this.positionChangeSubject = new rxjs.BehaviorSubject(0);
+        }
+        ConfigurableInputComponent.prototype.interpolateDescription = function () {
+            if (this.operationDefinition) {
+                return interpolateDescription(this.operationDefinition, this.form.value);
+            }
+            else {
+                return '';
+            }
+        };
+        ConfigurableInputComponent.prototype.ngOnInit = function () {
+            this.positionChange$ = this.positionChangeSubject.asObservable();
+        };
+        ConfigurableInputComponent.prototype.ngOnChanges = function (changes) {
+            if ('operation' in changes || 'operationDefinition' in changes) {
+                this.createForm();
+            }
+            if ('position' in changes) {
+                this.positionChangeSubject.next(this.position);
+            }
+        };
+        ConfigurableInputComponent.prototype.ngOnDestroy = function () {
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+        };
+        ConfigurableInputComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        ConfigurableInputComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouch = fn;
+        };
+        ConfigurableInputComponent.prototype.setDisabledState = function (isDisabled) {
+            if (isDisabled) {
+                this.form.disable();
+            }
+            else {
+                this.form.enable();
+            }
+        };
+        ConfigurableInputComponent.prototype.writeValue = function (value) {
+            if (value) {
+                this.form.patchValue(value);
+            }
+        };
+        ConfigurableInputComponent.prototype.trackByName = function (index, arg) {
+            return arg.name;
+        };
+        ConfigurableInputComponent.prototype.getArgDef = function (arg) {
+            var _a;
+            return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(function (a) { return a.name === arg.name; });
+        };
+        ConfigurableInputComponent.prototype.createForm = function () {
+            var e_1, _c;
+            var _this = this;
+            var _a, _b;
+            if (!this.operation) {
+                return;
+            }
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+            this.form = new forms.FormGroup({});
+            this.form.__id = Math.random().toString(36).substr(10);
+            if (this.operation.args) {
+                var _loop_1 = function (arg) {
+                    var value = (_b = this_1.operation.args.find(function (a) { return a.name === arg.name; })) === null || _b === void 0 ? void 0 : _b.value;
+                    if (value === undefined) {
+                        value = getDefaultConfigArgValue(arg);
+                    }
+                    var validators = arg.list ? undefined : arg.required ? forms.Validators.required : undefined;
+                    this_1.form.addControl(arg.name, new forms.FormControl(value, validators));
+                };
+                var this_1 = this;
+                try {
+                    for (var _d = __values(((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var arg = _e.value;
+                        _loop_1(arg);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            this.subscription = this.form.valueChanges.subscribe(function (value) {
+                if (_this.onChange) {
+                    _this.onChange({
+                        code: _this.operation && _this.operation.code,
+                        args: value,
+                    });
+                }
+                if (_this.onTouch) {
+                    _this.onTouch();
+                }
+            });
+        };
+        ConfigurableInputComponent.prototype.validate = function (c) {
+            if (this.form.invalid) {
+                return {
+                    required: true,
+                };
+            }
+            return null;
+        };
+        return ConfigurableInputComponent;
     }());
-    NumberFormInputComponent.id = 'number-form-input';
-    NumberFormInputComponent.decorators = [
+    ConfigurableInputComponent.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",
+                    selector: 'vdr-configurable-input',
+                    template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name) && getArgDef(arg) as argDef\">\r\n                    <label class=\"clr-control-label\">{{ argDef.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-help-tooltip\r\n                        class=\"mr3\"\r\n                        *ngIf=\"argDef.description\"\r\n                        [content]=\"argDef.description\"\r\n                    ></vdr-help-tooltip>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: ConfigurableInputComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: forms.NG_VALIDATORS,
+                            useExisting: i0.forwardRef(function () { return ConfigurableInputComponent; }),
+                            multi: true,
+                        },
+                    ],
+                    styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:12px}.operation-inputs .arg-row{display:flex;flex-wrap:wrap;align-items:center}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}.operation-inputs label{min-width:130px;display:inline-block}\n"]
                 },] }
     ];
-    NumberFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
+    ConfigurableInputComponent.propDecorators = {
+        operation: [{ type: i0.Input }],
+        operationDefinition: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        removable: [{ type: i0.Input }],
+        position: [{ type: i0.Input }],
+        remove: [{ type: i0.Output }]
     };
 
     /**
      * @description
-     * Displays a password text input. Should be used with `string` type fields.
+     * A special input used to display the "Combination mode" AND/OR toggle.
      *
      * @docsCategory custom-input-components
      * @docsPage default-inputs
      */
-    var PasswordFormInputComponent = /** @class */ (function () {
-        function PasswordFormInputComponent() {
+    var CombinationModeFormInputComponent = /** @class */ (function () {
+        function CombinationModeFormInputComponent(configurableInputComponent) {
+            this.configurableInputComponent = configurableInputComponent;
         }
-        return PasswordFormInputComponent;
+        CombinationModeFormInputComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var selectable$ = this.configurableInputComponent
+                ? this.configurableInputComponent.positionChange$.pipe(operators.map(function (position) { return 0 < position; }))
+                : rxjs.of(true);
+            this.selectable$ = selectable$.pipe(operators.tap(function (selectable) {
+                if (!selectable) {
+                    _this.formControl.setValue(true, { emitEvent: false });
+                }
+            }));
+        };
+        CombinationModeFormInputComponent.prototype.setCombinationModeAnd = function () {
+            this.formControl.setValue(true);
+        };
+        CombinationModeFormInputComponent.prototype.setCombinationModeOr = function () {
+            this.formControl.setValue(false);
+        };
+        return CombinationModeFormInputComponent;
     }());
-    PasswordFormInputComponent.id = 'password-form-input';
-    PasswordFormInputComponent.decorators = [
+    CombinationModeFormInputComponent.id = 'combination-mode-form-input';
+    CombinationModeFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-password-form-input',
-                    template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n",
+                    selector: 'vdr-combination-mode-form-input',
+                    template: "<ng-container *ngIf=\"selectable$ | async; else default\">\r\n    <div class=\"btn-group btn-outline-primary btn-sm mode-select\">\r\n        <button\r\n            class=\"btn\"\r\n            (click)=\"setCombinationModeAnd()\"\r\n            [class.btn-primary]=\"formControl.value === true\"\r\n        >\r\n            {{ 'common.boolean-and' | translate }}\r\n        </button>\r\n        <button\r\n            class=\"btn\"\r\n            (click)=\"setCombinationModeOr()\"\r\n            [class.btn-primary]=\"formControl.value === false\"\r\n        >\r\n            {{ 'common.boolean-or' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-container>\r\n<ng-template #default>\r\n    <small>{{ 'common.not-applicable' | translate }}</small>\r\n</ng-template>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    styles: [".mode-select{text-transform:uppercase}\n"]
                 },] }
-    ];
+    ];
+    CombinationModeFormInputComponent.ctorParameters = function () { return [
+        { type: ConfigurableInputComponent, decorators: [{ type: i0.Optional }] }
+    ]; };
 
     /**
      * @description
-     * Allows the selection of multiple ProductVariants via an autocomplete select input.
-     * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+     * An input for monetary values. Should be used with `int` type fields.
      *
      * @docsCategory custom-input-components
      * @docsPage default-inputs
      */
-    var ProductSelectorFormInputComponent = /** @class */ (function () {
-        function ProductSelectorFormInputComponent(dataService) {
+    var CurrencyFormInputComponent = /** @class */ (function () {
+        function CurrencyFormInputComponent(dataService) {
             this.dataService = dataService;
-            this.isListInput = true;
+            this.currencyCode$ = this.dataService.settings
+                .getActiveChannel()
+                .mapStream(function (data) { return data.activeChannel.currencyCode; });
         }
-        ProductSelectorFormInputComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.formControl.setValidators([
-                function (control) {
-                    if (!control.value || !control.value.length) {
-                        return {
-                            atLeastOne: { length: control.value.length },
-                        };
-                    }
-                    return null;
-                },
-            ]);
-            this.selection$ = this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value), operators.switchMap(function (value) {
-                if (Array.isArray(value) && 0 < value.length) {
-                    return rxjs.forkJoin(value.map(function (id) { return _this.dataService.product
-                        .getProductVariant(id)
-                        .mapSingle(function (data) { return data.productVariant; }); }));
-                }
-                return rxjs.of([]);
-            }), operators.map(function (variants) { return variants.filter(sharedUtils.notNullOrUndefined); }));
-        };
-        ProductSelectorFormInputComponent.prototype.addProductVariant = function (product) {
-            var value = this.formControl.value;
-            this.formControl.setValue(__spreadArray([], __read(new Set(__spreadArray(__spreadArray([], __read(value)), [product.productVariantId])))));
-        };
-        ProductSelectorFormInputComponent.prototype.removeProductVariant = function (id) {
-            var value = this.formControl.value;
-            this.formControl.setValue(value.filter(function (_id) { return _id !== id; }));
-        };
-        return ProductSelectorFormInputComponent;
+        return CurrencyFormInputComponent;
     }());
-    ProductSelectorFormInputComponent.id = 'product-selector-form-input';
-    ProductSelectorFormInputComponent.decorators = [
+    CurrencyFormInputComponent.id = 'currency-form-input';
+    CurrencyFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-product-selector-form-input',
-                    template: "<ul class=\"list-unstyled\">\r\n    <li *ngFor=\"let variant of selection$ | async\" class=\"variant\">\r\n        <div class=\"thumb\">\r\n            <img [src]=\"variant.product.featuredAsset | assetPreview: 32\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div>{{ variant.name }}</div>\r\n            <div class=\"sku\">{{ variant.sku }}</div>\r\n        </div>\r\n        <div class=\"flex-spacer\"></div>\r\n        <button\r\n            class=\"btn btn-link btn-sm btn-warning\"\r\n            (click)=\"removeProductVariant(variant.id)\"\r\n            [title]=\"'common.remove-item-from-list' | translate\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<vdr-product-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-selector>\r\n",
+                    selector: 'vdr-currency-form-input',
+                    template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".variant{margin-bottom:6px;display:flex;align-items:center;transition:background-color .2s}.variant:hover{background-color:var(--color-component-bg-200)}.thumb{margin-right:6px}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"]
+                    styles: [""]
                 },] }
     ];
-    ProductSelectorFormInputComponent.ctorParameters = function () { return [
+    CurrencyFormInputComponent.ctorParameters = function () { return [
         { type: DataService }
-    ]; };
+    ]; };
+    CurrencyFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
+    };
 
     /**
      * @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}.
+     * 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 RelationFormInputComponent = /** @class */ (function () {
-        function RelationFormInputComponent() {
+    var CustomerGroupFormInputComponent = /** @class */ (function () {
+        function CustomerGroupFormInputComponent(dataService) {
+            this.dataService = dataService;
         }
-        return RelationFormInputComponent;
+        CustomerGroupFormInputComponent.prototype.ngOnInit = function () {
+            this.customerGroups$ = this.dataService.customer
+                .getCustomerGroupList({
+                take: 1000,
+            })
+                .mapSingle(function (res) { return res.customerGroups.items; })
+                .pipe(operators.startWith([]));
+        };
+        CustomerGroupFormInputComponent.prototype.selectGroup = function (group) {
+            this.formControl.setValue(group.id);
+        };
+        return CustomerGroupFormInputComponent;
     }());
-    RelationFormInputComponent.id = 'relation-form-input';
-    RelationFormInputComponent.decorators = [
+    CustomerGroupFormInputComponent.id = 'customer-group-form-input';
+    CustomerGroupFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-relation-form-input',
-                    template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        <vdr-relation-generic-input\r\n            [parentFormControl]=\"formControl\"\r\n               [config]=\"config\"\r\n               [readonly]=\"readonly\"\r\n        ></vdr-relation-generic-input>\r\n    </ng-template>\r\n</div>\r\n",
+                    selector: 'vdr-customer-group-form-input',
+                    template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
+                    styles: [""]
                 },] }
     ];
-    RelationFormInputComponent.propDecorators = {
+    CustomerGroupFormInputComponent.ctorParameters = function () { return [
+        { type: DataService }
+    ]; };
+    CustomerGroupFormInputComponent.propDecorators = {
         readonly: [{ type: i0.Input }]
     };
 
     /**
      * @description
-     * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+     * Allows selection of a datetime. Default input for `datetime` type fields.
      *
      * @docsCategory custom-input-components
      * @docsPage default-inputs
      */
-    var RichTextFormInputComponent = /** @class */ (function () {
-        function RichTextFormInputComponent() {
+    var DateFormInputComponent = /** @class */ (function () {
+        function DateFormInputComponent() {
         }
-        return RichTextFormInputComponent;
+        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;
     }());
-    RichTextFormInputComponent.id = 'rich-text-form-input';
-    RichTextFormInputComponent.decorators = [
+    DateFormInputComponent.id = 'date-form-input';
+    DateFormInputComponent.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",
+                    selector: 'vdr-date-form-input',
+                    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: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+                    styles: [""]
                 },] }
-    ];
+    ];
+    DateFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
+    };
 
     /**
      * @description
-     * Uses a select input to allow the selection of a string value. Should be used with
-     * `string` type fields with options.
+     * 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 SelectFormInputComponent = /** @class */ (function () {
-        function SelectFormInputComponent() {
+    var FacetValueFormInputComponent = /** @class */ (function () {
+        function FacetValueFormInputComponent(dataService) {
+            this.dataService = dataService;
+            this.isListInput = true;
         }
-        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;
+        FacetValueFormInputComponent.prototype.ngOnInit = function () {
+            this.facets$ = this.dataService.facet
+                .getAllFacets()
+                .mapSingle(function (data) { return data.facets.items; })
+                .pipe(operators.shareReplay(1));
+        };
+        return FacetValueFormInputComponent;
     }());
-    SelectFormInputComponent.id = 'select-form-input';
-    SelectFormInputComponent.decorators = [
+    FacetValueFormInputComponent.id = 'facet-value-form-input';
+    FacetValueFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-select-form-input',
-                    template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
+                    selector: 'vdr-facet-value-form-input',
+                    template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n></vdr-facet-value-selector>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: ["select{width:100%}\n"]
+                    styles: [""]
                 },] }
     ];
-    SelectFormInputComponent.propDecorators = {
-        readonly: [{ type: i0.Input }]
-    };
+    FacetValueFormInputComponent.ctorParameters = function () { return [
+        { type: DataService }
+    ]; };
 
     /**
      * @description
-     * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+     * Displays a number input. Default input for `int` and `float` type fields.
      *
      * @docsCategory custom-input-components
      * @docsPage default-inputs
      */
-    var TextFormInputComponent = /** @class */ (function () {
-        function TextFormInputComponent() {
+    var NumberFormInputComponent = /** @class */ (function () {
+        function NumberFormInputComponent() {
         }
-        Object.defineProperty(TextFormInputComponent.prototype, "prefix", {
+        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;
@@ -6810,7 +6980,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TextFormInputComponent.prototype, "suffix", {
+        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;
@@ -6818,488 +6988,969 @@
             enumerable: false,
             configurable: true
         });
-        return TextFormInputComponent;
+        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;
     }());
-    TextFormInputComponent.id = 'text-form-input';
-    TextFormInputComponent.decorators = [
+    NumberFormInputComponent.id = 'number-form-input';
+    NumberFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-text-form-input',
-                    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",
+                    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: ["input{width:100%}\n"]
+                    styles: [""]
                 },] }
-    ];
+    ];
+    NumberFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
+    };
 
     /**
      * @description
-     * Uses textarea form input. This is the default input for `text` type fields.
+     * Displays a password text input. Should be used with `string` type fields.
      *
      * @docsCategory custom-input-components
      * @docsPage default-inputs
      */
-    var TextareaFormInputComponent = /** @class */ (function () {
-        function TextareaFormInputComponent() {
+    var PasswordFormInputComponent = /** @class */ (function () {
+        function PasswordFormInputComponent() {
         }
-        Object.defineProperty(TextareaFormInputComponent.prototype, "spellcheck", {
-            get: function () {
-                return this.config.spellcheck === true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TextareaFormInputComponent;
+        return PasswordFormInputComponent;
     }());
-    TextareaFormInputComponent.id = 'textarea-form-input';
-    TextareaFormInputComponent.decorators = [
+    PasswordFormInputComponent.id = 'password-form-input';
+    PasswordFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-textarea-form-input',
-                    template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n",
+                    selector: 'vdr-password-form-input',
+                    template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+                    styles: [""]
                 },] }
     ];
 
-    var defaultFormInputs = [
-        BooleanFormInputComponent,
-        CurrencyFormInputComponent,
-        DateFormInputComponent,
-        FacetValueFormInputComponent,
-        NumberFormInputComponent,
-        SelectFormInputComponent,
-        TextFormInputComponent,
-        ProductSelectorFormInputComponent,
-        CustomerGroupFormInputComponent,
-        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) or for
-     * a custom field.
-     *
-     * @example
-     * ```TypeScript
-     * \@NgModule({
-     *   imports: [SharedModule],
-     *   declarations: [MyCustomFieldControl],
-     *   providers: [
-     *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
-     *   ],
-     * })
-     * 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
+     * A helper class used to manage selection of list items. Supports multiple selection via
+     * cmd/ctrl/shift key.
      */
-    function registerFormInputComponent(id, component) {
-        return {
-            provide: i0.APP_INITIALIZER,
-            multi: true,
-            useFactory: function (registry) { return function () {
-                registry.registerInputComponent(id, component);
-            }; },
-            deps: [ComponentRegistryService],
+    var SelectionManager = /** @class */ (function () {
+        function SelectionManager(options) {
+            this.options = options;
+            this._selection = [];
+            this.items = [];
+        }
+        Object.defineProperty(SelectionManager.prototype, "selection", {
+            get: function () {
+                return this._selection;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SelectionManager.prototype.setMultiSelect = function (isMultiSelect) {
+            this.options.multiSelect = isMultiSelect;
         };
-    }
-    /**
-     * @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.
-     *
-     * @example
-     * ```TypeScript
-     * \@NgModule({
-     *   imports: [SharedModule],
-     *   declarations: [MyCustomFieldControl],
-     *   providers: [
-     *       registerCustomFieldComponent('Product', 'someCustomField', MyCustomFieldControl),
-     *   ],
-     * })
-     * export class MyUiExtensionModule {}
-     * ```
-     *
-     * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
-     *
-     * @docsCategory custom-input-components
-     */
-    function registerCustomFieldComponent(entity, fieldName, component) {
-        return {
-            provide: i0.APP_INITIALIZER,
-            multi: true,
-            useFactory: function (customFieldComponentService) { return function () {
-                customFieldComponentService.registerCustomFieldComponent(entity, fieldName, component);
-            }; },
-            deps: [CustomFieldComponentService],
+        SelectionManager.prototype.setCurrentItems = function (items) {
+            this.items = items;
         };
-    }
-    /**
-     * Registers the default form input components.
-     */
-    function registerDefaultFormInputs() {
-        return defaultFormInputs.map(function (cmp) { return registerFormInputComponent(cmp.id, cmp); });
-    }
+        SelectionManager.prototype.toggleSelection = function (item, event) {
+            var _a;
+            var _this = this;
+            var _b = this.options, multiSelect = _b.multiSelect, itemsAreEqual = _b.itemsAreEqual, additiveMode = _b.additiveMode;
+            var index = this._selection.findIndex(function (a) { return itemsAreEqual(a, item); });
+            if (multiSelect && (event === null || event === void 0 ? void 0 : event.shiftKey) && 1 <= this._selection.length) {
+                var lastSelection_1 = this._selection[this._selection.length - 1];
+                var lastSelectionIndex = this.items.findIndex(function (a) { return itemsAreEqual(a, lastSelection_1); });
+                var currentIndex = this.items.findIndex(function (a) { return itemsAreEqual(a, item); });
+                var start = currentIndex < lastSelectionIndex ? currentIndex : lastSelectionIndex;
+                var end = currentIndex > lastSelectionIndex ? currentIndex + 1 : lastSelectionIndex;
+                (_a = this._selection).push.apply(_a, __spreadArray([], __read(this.items.slice(start, end).filter(function (a) { return !_this._selection.find(function (s) { return itemsAreEqual(a, s); }); }))));
+            }
+            else if (index === -1) {
+                if (multiSelect && ((event === null || event === void 0 ? void 0 : event.ctrlKey) || (event === null || event === void 0 ? void 0 : event.shiftKey) || additiveMode)) {
+                    this._selection.push(item);
+                }
+                else {
+                    this._selection = [item];
+                }
+            }
+            else {
+                if (multiSelect && (event === null || event === void 0 ? void 0 : event.ctrlKey)) {
+                    this._selection.splice(index, 1);
+                }
+                else if (1 < this._selection.length && !additiveMode) {
+                    this._selection = [item];
+                }
+                else {
+                    this._selection.splice(index, 1);
+                }
+            }
+            // Make the selection mutable
+            this._selection = this._selection.map(function (x) { return (Object.assign({}, x)); });
+        };
+        SelectionManager.prototype.selectMultiple = function (items) {
+            this._selection = items;
+        };
+        SelectionManager.prototype.isSelected = function (item) {
+            var _this = this;
+            return !!this._selection.find(function (a) { return _this.options.itemsAreEqual(a, item); });
+        };
+        SelectionManager.prototype.lastSelected = function () {
+            return this._selection[this._selection.length - 1];
+        };
+        return SelectionManager;
+    }());
 
-    var ActionBarItemsComponent = /** @class */ (function () {
-        function ActionBarItemsComponent(navBuilderService, route, dataService, notificationService) {
-            this.navBuilderService = navBuilderService;
-            this.route = route;
+    var ProductMultiSelectorDialogComponent = /** @class */ (function () {
+        function ProductMultiSelectorDialogComponent(dataService, changeDetector) {
             this.dataService = dataService;
-            this.notificationService = notificationService;
-            this.locationId$ = new rxjs.BehaviorSubject('');
+            this.changeDetector = changeDetector;
+            this.mode = 'product';
+            this.initialSelectionIds = [];
+            this.searchTerm$ = new rxjs.BehaviorSubject('');
+            this.searchFacetValueIds$ = new rxjs.BehaviorSubject([]);
+            this.paginationConfig = {
+                currentPage: 1,
+                itemsPerPage: 25,
+                totalItems: 1,
+            };
+            this.paginationConfig$ = new rxjs.BehaviorSubject(this.paginationConfig);
         }
-        ActionBarItemsComponent.prototype.ngOnInit = function () {
-            this.items$ = rxjs.combineLatest(this.navBuilderService.actionBarConfig$, this.locationId$).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), items = _b[0], locationId = _b[1];
-                return items.filter(function (config) { return config.locationId === locationId; });
-            }));
-        };
-        ActionBarItemsComponent.prototype.ngOnChanges = function (changes) {
-            if ('locationId' in changes) {
-                this.locationId$.next(changes['locationId'].currentValue);
-            }
-        };
-        ActionBarItemsComponent.prototype.handleClick = function (event, item) {
-            if (typeof item.onClick === 'function') {
-                item.onClick(event, {
-                    route: this.route,
-                    dataService: this.dataService,
-                    notificationService: this.notificationService,
+        ProductMultiSelectorDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var idFn = this.mode === 'product'
+                ? function (a, b) { return a.productId === b.productId; }
+                : function (a, b) { return a.productVariantId === b.productVariantId; };
+            this.selectionManager = new SelectionManager({
+                multiSelect: true,
+                itemsAreEqual: idFn,
+                additiveMode: true,
+            });
+            var searchQueryResult = this.dataService.product.searchProducts('', this.paginationConfig.itemsPerPage, 0);
+            var result$ = rxjs.combineLatest(this.searchTerm$, this.searchFacetValueIds$, this.paginationConfig$).subscribe(function (_a) {
+                var _b = __read(_a, 3), term = _b[0], facetValueIds = _b[1], pagination = _b[2];
+                var take = +pagination.itemsPerPage;
+                var skip = (pagination.currentPage - 1) * take;
+                return searchQueryResult.ref.refetch({
+                    input: { skip: skip, take: take, term: term, facetValueIds: facetValueIds, groupByProduct: _this.mode === 'product' },
                 });
+            });
+            this.items$ = searchQueryResult.stream$.pipe(operators.tap(function (data) {
+                _this.paginationConfig.totalItems = data.search.totalItems;
+                _this.selectionManager.setCurrentItems(data.search.items);
+            }), operators.map(function (data) { return data.search.items; }));
+            this.facetValues$ = searchQueryResult.stream$.pipe(operators.map(function (data) { return data.search.facetValues; }));
+            if (this.initialSelectionIds.length) {
+                if (this.mode === 'product') {
+                    this.dataService.product
+                        .getProducts({
+                        filter: {
+                            id: {
+                                in: this.initialSelectionIds,
+                            },
+                        },
+                    })
+                        .single$.subscribe(function (_a) {
+                        var products = _a.products;
+                        _this.selectionManager.selectMultiple(products.items.map(function (product) { return ({
+                            productId: product.id,
+                            productName: product.name,
+                        }); }));
+                        _this.changeDetector.markForCheck();
+                    });
+                }
+                else {
+                    this.dataService.product
+                        .getProductVariants({
+                        filter: {
+                            id: {
+                                in: this.initialSelectionIds,
+                            },
+                        },
+                    })
+                        .single$.subscribe(function (_a) {
+                        var productVariants = _a.productVariants;
+                        _this.selectionManager.selectMultiple(productVariants.items.map(function (variant) { return ({
+                            productVariantId: variant.id,
+                            productVariantName: variant.name,
+                        }); }));
+                        _this.changeDetector.markForCheck();
+                    });
+                }
             }
         };
-        ActionBarItemsComponent.prototype.getRouterLink = function (item) {
-            return this.navBuilderService.getRouterLink(item, this.route);
+        ProductMultiSelectorDialogComponent.prototype.trackByFn = function (index, item) {
+            return item.productId;
         };
-        ActionBarItemsComponent.prototype.getButtonStyles = function (item) {
-            var styles = ['btn'];
-            if (item.buttonStyle && item.buttonStyle === 'link') {
-                styles.push('btn-link');
-                return styles;
-            }
-            styles.push(this.getButtonColorClass(item));
-            return styles;
+        ProductMultiSelectorDialogComponent.prototype.setSearchTerm = function (term) {
+            this.searchTerm$.next(term);
         };
-        ActionBarItemsComponent.prototype.getButtonColorClass = function (item) {
-            switch (item.buttonColor) {
-                case undefined:
-                case 'primary':
-                    return item.buttonStyle === 'outline' ? 'btn-outline' : 'btn-primary';
-                case 'success':
-                    return item.buttonStyle === 'outline' ? 'btn-success-outline' : 'btn-success';
-                case 'warning':
-                    return item.buttonStyle === 'outline' ? 'btn-warning-outline' : 'btn-warning';
-                default:
-                    sharedUtils.assertNever(item.buttonColor);
-                    return '';
-            }
+        ProductMultiSelectorDialogComponent.prototype.setFacetValueIds = function (ids) {
+            this.searchFacetValueIds$.next(ids);
         };
-        return ActionBarItemsComponent;
+        ProductMultiSelectorDialogComponent.prototype.toggleSelection = function (item, event) {
+            this.selectionManager.toggleSelection(item, event);
+        };
+        ProductMultiSelectorDialogComponent.prototype.clearSelection = function () {
+            this.selectionManager.selectMultiple([]);
+        };
+        ProductMultiSelectorDialogComponent.prototype.isSelected = function (item) {
+            return this.selectionManager.isSelected(item);
+        };
+        ProductMultiSelectorDialogComponent.prototype.entityInfoClick = function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        ProductMultiSelectorDialogComponent.prototype.pageChange = function (page) {
+            this.paginationConfig.currentPage = page;
+            this.paginationConfig$.next(this.paginationConfig);
+        };
+        ProductMultiSelectorDialogComponent.prototype.itemsPerPageChange = function (itemsPerPage) {
+            this.paginationConfig.itemsPerPage = itemsPerPage;
+            this.paginationConfig$.next(this.paginationConfig);
+        };
+        ProductMultiSelectorDialogComponent.prototype.select = function () {
+            this.resolveWith(this.selectionManager.selection);
+        };
+        ProductMultiSelectorDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return ProductMultiSelectorDialogComponent;
     }());
-    ActionBarItemsComponent.decorators = [
+    ProductMultiSelectorDialogComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-action-bar-items',
-                    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",
+                    selector: 'vdr-product-multi-selector-dialog',
+                    template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block;min-height:36px}\n"]
+                    styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"]
                 },] }
     ];
-    ActionBarItemsComponent.ctorParameters = function () { return [
-        { type: NavBuilderService },
-        { type: i1$3.ActivatedRoute },
+    ProductMultiSelectorDialogComponent.ctorParameters = function () { return [
         { type: DataService },
-        { type: NotificationService }
-    ]; };
-    ActionBarItemsComponent.propDecorators = {
-        locationId: [{ type: i0.HostBinding, args: ['attr.data-location-id',] }, { type: i0.Input }]
-    };
+        { type: i0.ChangeDetectorRef }
+    ]; };
 
-    var ActionBarLeftComponent = /** @class */ (function () {
-        function ActionBarLeftComponent() {
-            this.grow = false;
+    var ProductMultiSelectorFormInputComponent = /** @class */ (function () {
+        function ProductMultiSelectorFormInputComponent(modalService, dataService, changeDetector) {
+            this.modalService = modalService;
+            this.dataService = dataService;
+            this.changeDetector = changeDetector;
+            this.mode = 'product';
+            this.isListInput = true;
         }
-        return ActionBarLeftComponent;
+        ProductMultiSelectorFormInputComponent.prototype.ngOnInit = function () {
+            var _a, _b;
+            this.mode = (_b = (_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.selectionMode) !== null && _b !== void 0 ? _b : 'product';
+        };
+        ProductMultiSelectorFormInputComponent.prototype.select = function () {
+            var _this = this;
+            this.modalService
+                .fromComponent(ProductMultiSelectorDialogComponent, {
+                size: 'xl',
+                locals: {
+                    mode: this.mode,
+                    initialSelectionIds: this.formControl.value,
+                },
+            })
+                .subscribe(function (selection) {
+                if (selection) {
+                    _this.formControl.setValue(selection.map(function (item) { return _this.mode === 'product' ? item.productId : item.productVariantId; }));
+                    _this.changeDetector.markForCheck();
+                }
+            });
+        };
+        return ProductMultiSelectorFormInputComponent;
     }());
-    ActionBarLeftComponent.decorators = [
+    ProductMultiSelectorFormInputComponent.id = 'product-multi-form-input';
+    ProductMultiSelectorFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-ab-left',
-                    template: "\n        <ng-content></ng-content>\n    "
+                    selector: 'vdr-product-multi-selector-form-input',
+                    template: "<div class=\"flex\">\r\n    <button (click)=\"select()\" class=\"btn btn-sm btn-secondary\">\r\n        {{ 'common.items-selected-count' | translate: { count: formControl.value?.length ?? 0 } }}...\r\n    </button>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
                 },] }
     ];
-    ActionBarLeftComponent.propDecorators = {
-        grow: [{ type: i0.Input }]
-    };
-    var ActionBarRightComponent = /** @class */ (function () {
-        function ActionBarRightComponent() {
-            this.grow = false;
+    ProductMultiSelectorFormInputComponent.ctorParameters = function () { return [
+        { type: ModalService },
+        { type: DataService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    ProductMultiSelectorFormInputComponent.propDecorators = {
+        config: [{ type: i0.Input }],
+        formControl: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }]
+    };
+
+    /**
+     * @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;
+            this.isListInput = true;
         }
-        return ActionBarRightComponent;
-    }());
-    ActionBarRightComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-ab-right',
-                    template: "\n        <ng-content></ng-content>\n    "
+        ProductSelectorFormInputComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.formControl.setValidators([
+                function (control) {
+                    if (!control.value || !control.value.length) {
+                        return {
+                            atLeastOne: { length: control.value.length },
+                        };
+                    }
+                    return null;
+                },
+            ]);
+            this.selection$ = this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value), operators.switchMap(function (value) {
+                if (Array.isArray(value) && 0 < value.length) {
+                    return rxjs.forkJoin(value.map(function (id) { return _this.dataService.product
+                        .getProductVariant(id)
+                        .mapSingle(function (data) { return data.productVariant; }); }));
+                }
+                return rxjs.of([]);
+            }), operators.map(function (variants) { return variants.filter(sharedUtils.notNullOrUndefined); }));
+        };
+        ProductSelectorFormInputComponent.prototype.addProductVariant = function (product) {
+            var value = this.formControl.value;
+            this.formControl.setValue(__spreadArray([], __read(new Set(__spreadArray(__spreadArray([], __read(value)), [product.productVariantId])))));
+        };
+        ProductSelectorFormInputComponent.prototype.removeProductVariant = function (id) {
+            var value = this.formControl.value;
+            this.formControl.setValue(value.filter(function (_id) { return _id !== id; }));
+        };
+        return ProductSelectorFormInputComponent;
+    }());
+    ProductSelectorFormInputComponent.id = 'product-selector-form-input';
+    ProductSelectorFormInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-product-selector-form-input',
+                    template: "<ul class=\"list-unstyled\">\r\n    <li *ngFor=\"let variant of selection$ | async\" class=\"variant\">\r\n        <div class=\"thumb\">\r\n            <img [src]=\"variant.product.featuredAsset | assetPreview: 32\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div>{{ variant.name }}</div>\r\n            <div class=\"sku\">{{ variant.sku }}</div>\r\n        </div>\r\n        <div class=\"flex-spacer\"></div>\r\n        <button\r\n            class=\"btn btn-link btn-sm btn-warning\"\r\n            (click)=\"removeProductVariant(variant.id)\"\r\n            [title]=\"'common.remove-item-from-list' | translate\"\r\n        >\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<vdr-product-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-selector>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".variant{margin-bottom:6px;display:flex;align-items:center;transition:background-color .2s}.variant:hover{background-color:var(--color-component-bg-200)}.thumb{margin-right:6px}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"]
                 },] }
     ];
-    ActionBarRightComponent.propDecorators = {
-        grow: [{ type: i0.Input }]
-    };
-    var ActionBarComponent = /** @class */ (function () {
-        function ActionBarComponent() {
+    ProductSelectorFormInputComponent.ctorParameters = function () { return [
+        { 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() {
         }
-        return ActionBarComponent;
+        return RelationFormInputComponent;
     }());
-    ActionBarComponent.decorators = [
+    RelationFormInputComponent.id = 'relation-form-input';
+    RelationFormInputComponent.decorators = [
         { 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: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"]
+                    selector: 'vdr-relation-form-input',
+                    template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        <vdr-relation-generic-input\r\n            [parentFormControl]=\"formControl\"\r\n               [config]=\"config\"\r\n               [readonly]=\"readonly\"\r\n        ></vdr-relation-generic-input>\r\n    </ng-template>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
                 },] }
     ];
-    ActionBarComponent.propDecorators = {
-        left: [{ type: i0.ContentChild, args: [ActionBarLeftComponent,] }],
-        right: [{ type: i0.ContentChild, args: [ActionBarRightComponent,] }]
+    RelationFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
     };
 
-    var AddressFormComponent = /** @class */ (function () {
-        function AddressFormComponent() {
+    /**
+     * @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 AddressFormComponent;
+        return RichTextFormInputComponent;
     }());
-    AddressFormComponent.decorators = [
+    RichTextFormInputComponent.id = 'rich-text-form-input';
+    RichTextFormInputComponent.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        <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",
+                    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: [""]
+                    styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
                 },] }
-    ];
-    AddressFormComponent.propDecorators = {
-        customFields: [{ type: i0.Input }],
-        formGroup: [{ type: i0.Input }],
-        availableCountries: [{ type: i0.Input }]
-    };
+    ];
 
     /**
-     * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+     * @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 AffixedInputComponent = /** @class */ (function () {
-        function AffixedInputComponent() {
+    var SelectFormInputComponent = /** @class */ (function () {
+        function SelectFormInputComponent() {
         }
-        return AffixedInputComponent;
+        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;
     }());
-    AffixedInputComponent.decorators = [
+    SelectFormInputComponent.id = 'select-form-input';
+    SelectFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-affixed-input',
-                    template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n",
+                    selector: 'vdr-select-form-input',
+                    template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-flex}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-grey-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix input{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"]
+                    styles: ["select{width:100%}\n"]
                 },] }
     ];
-    AffixedInputComponent.propDecorators = {
-        prefix: [{ type: i0.Input }],
-        suffix: [{ type: i0.Input }]
+    SelectFormInputComponent.propDecorators = {
+        readonly: [{ type: i0.Input }]
     };
 
     /**
-     * A form input control which displays a number input with a percentage sign suffix.
+     * @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 PercentageSuffixInputComponent = /** @class */ (function () {
-        function PercentageSuffixInputComponent() {
-            this.disabled = false;
-            this.readonly = false;
+    var TextFormInputComponent = /** @class */ (function () {
+        function TextFormInputComponent() {
         }
-        PercentageSuffixInputComponent.prototype.ngOnChanges = function (changes) {
-            if ('value' in changes) {
-                this.writeValue(changes['value'].currentValue);
-            }
-        };
-        PercentageSuffixInputComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        PercentageSuffixInputComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouch = fn;
-        };
-        PercentageSuffixInputComponent.prototype.setDisabledState = function (isDisabled) {
-            this.disabled = isDisabled;
-        };
-        PercentageSuffixInputComponent.prototype.onInput = function (value) {
-            this.onChange(value);
-        };
-        PercentageSuffixInputComponent.prototype.writeValue = function (value) {
-            var numericValue = +value;
-            if (!Number.isNaN(numericValue)) {
-                this._value = numericValue;
-            }
-        };
-        return PercentageSuffixInputComponent;
+        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;
     }());
-    PercentageSuffixInputComponent.decorators = [
+    TextFormInputComponent.id = 'text-form-input';
+    TextFormInputComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-percentage-suffix-input',
-                    template: "\n        <vdr-affixed-input suffix=\"%\">\n            <input\n                type=\"number\"\n                step=\"1\"\n                [value]=\"_value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                (input)=\"onInput($event.target.value)\"\n                (focus)=\"onTouch()\"\n            />\n        </vdr-affixed-input>\n    ",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: PercentageSuffixInputComponent,
-                            multi: true,
-                        },
-                    ],
-                    styles: ["\n            :host {\n                padding: 0;\n            }\n        "]
+                    selector: 'vdr-text-form-input',
+                    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"]
                 },] }
-    ];
-    PercentageSuffixInputComponent.propDecorators = {
-        disabled: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        value: [{ type: i0.Input }]
-    };
+    ];
 
     /**
-     * A component for selecting files to upload as new Assets.
+     * @description
+     * Uses textarea form input. This is the default input for `text` type fields.
+     *
+     * @docsCategory custom-input-components
+     * @docsPage default-inputs
      */
-    var AssetFileInputComponent = /** @class */ (function () {
-        function AssetFileInputComponent(serverConfig) {
-            this.serverConfig = serverConfig;
-            /**
-             * CSS selector of the DOM element which will be masked by the file
-             * drop zone. Defaults to `body`.
-             */
-            this.dropZoneTarget = 'body';
-            this.uploading = false;
-            this.selectFiles = new i0.EventEmitter();
-            this.dragging = false;
-            this.overDropZone = false;
-            this.dropZoneStyle = {
-                'width.px': 0,
-                'height.px': 0,
-                'top.px': 0,
-                'left.px': 0,
-            };
+    var TextareaFormInputComponent = /** @class */ (function () {
+        function TextareaFormInputComponent() {
         }
-        AssetFileInputComponent.prototype.ngOnInit = function () {
-            this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
-            this.fitDropZoneToTarget();
-        };
-        AssetFileInputComponent.prototype.onDragEnter = function () {
-            this.dragging = true;
-            this.fitDropZoneToTarget();
-        };
-        // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
-        AssetFileInputComponent.prototype.onDragLeave = function (event) {
-            if (!event.clientX && !event.clientY) {
-                this.dragging = false;
+        Object.defineProperty(TextareaFormInputComponent.prototype, "spellcheck", {
+            get: function () {
+                return this.config.spellcheck === true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TextareaFormInputComponent;
+    }());
+    TextareaFormInputComponent.id = 'textarea-form-input';
+    TextareaFormInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-textarea-form-input',
+                    template: "<textarea [spellcheck]=\"spellcheck\" autocomplete=\"off\" autocorrect=\"off\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></textarea>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+                },] }
+    ];
+
+    var defaultFormInputs = [
+        BooleanFormInputComponent,
+        CurrencyFormInputComponent,
+        DateFormInputComponent,
+        FacetValueFormInputComponent,
+        NumberFormInputComponent,
+        SelectFormInputComponent,
+        TextFormInputComponent,
+        ProductSelectorFormInputComponent,
+        CustomerGroupFormInputComponent,
+        PasswordFormInputComponent,
+        RelationFormInputComponent,
+        TextareaFormInputComponent,
+        RichTextFormInputComponent,
+        JsonEditorFormInputComponent,
+        ProductMultiSelectorFormInputComponent,
+        CombinationModeFormInputComponent,
+    ];
+    /**
+     * @description
+     * Registers a custom FormInputComponent which can be used to control the argument inputs
+     * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+     * a custom field.
+     *
+     * @example
+     * ```TypeScript
+     * \@NgModule({
+     *   imports: [SharedModule],
+     *   declarations: [MyCustomFieldControl],
+     *   providers: [
+     *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+     *   ],
+     * })
+     * 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 {
+            provide: i0.APP_INITIALIZER,
+            multi: true,
+            useFactory: function (registry) { return function () {
+                registry.registerInputComponent(id, component);
+            }; },
+            deps: [ComponentRegistryService],
+        };
+    }
+    /**
+     * @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.
+     *
+     * @example
+     * ```TypeScript
+     * \@NgModule({
+     *   imports: [SharedModule],
+     *   declarations: [MyCustomFieldControl],
+     *   providers: [
+     *       registerCustomFieldComponent('Product', 'someCustomField', MyCustomFieldControl),
+     *   ],
+     * })
+     * export class MyUiExtensionModule {}
+     * ```
+     *
+     * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+     *
+     * @docsCategory custom-input-components
+     */
+    function registerCustomFieldComponent(entity, fieldName, component) {
+        return {
+            provide: i0.APP_INITIALIZER,
+            multi: true,
+            useFactory: function (customFieldComponentService) { return function () {
+                customFieldComponentService.registerCustomFieldComponent(entity, fieldName, component);
+            }; },
+            deps: [CustomFieldComponentService],
+        };
+    }
+    /**
+     * Registers the default form input components.
+     */
+    function registerDefaultFormInputs() {
+        return defaultFormInputs.map(function (cmp) { return registerFormInputComponent(cmp.id, cmp); });
+    }
+
+    var ActionBarItemsComponent = /** @class */ (function () {
+        function ActionBarItemsComponent(navBuilderService, route, dataService, notificationService) {
+            this.navBuilderService = navBuilderService;
+            this.route = route;
+            this.dataService = dataService;
+            this.notificationService = notificationService;
+            this.locationId$ = new rxjs.BehaviorSubject('');
+        }
+        ActionBarItemsComponent.prototype.ngOnInit = function () {
+            this.items$ = rxjs.combineLatest(this.navBuilderService.actionBarConfig$, this.locationId$).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), items = _b[0], locationId = _b[1];
+                return items.filter(function (config) { return config.locationId === locationId; });
+            }));
+        };
+        ActionBarItemsComponent.prototype.ngOnChanges = function (changes) {
+            if ('locationId' in changes) {
+                this.locationId$.next(changes['locationId'].currentValue);
             }
         };
-        /**
-         * Preventing this event is required to make dropping work.
-         * See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_a_drop_zone
-         */
-        AssetFileInputComponent.prototype.onDragOver = function (event) {
-            event.preventDefault();
+        ActionBarItemsComponent.prototype.handleClick = function (event, item) {
+            if (typeof item.onClick === 'function') {
+                item.onClick(event, {
+                    route: this.route,
+                    dataService: this.dataService,
+                    notificationService: this.notificationService,
+                });
+            }
         };
-        // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
-        AssetFileInputComponent.prototype.onDrop = function (event) {
-            event.preventDefault();
-            this.dragging = false;
-            this.overDropZone = false;
-            var files = Array.from(event.dataTransfer ? event.dataTransfer.items : [])
-                .map(function (i) { return i.getAsFile(); })
-                .filter(sharedUtils.notNullOrUndefined);
-            this.selectFiles.emit(files);
+        ActionBarItemsComponent.prototype.getRouterLink = function (item) {
+            return this.navBuilderService.getRouterLink(item, this.route);
         };
-        AssetFileInputComponent.prototype.select = function (event) {
-            var files = event.target.files;
-            if (files) {
-                this.selectFiles.emit(Array.from(files));
+        ActionBarItemsComponent.prototype.getButtonStyles = function (item) {
+            var styles = ['btn'];
+            if (item.buttonStyle && item.buttonStyle === 'link') {
+                styles.push('btn-link');
+                return styles;
             }
+            styles.push(this.getButtonColorClass(item));
+            return styles;
         };
-        AssetFileInputComponent.prototype.fitDropZoneToTarget = function () {
-            var target = document.querySelector(this.dropZoneTarget);
-            if (target) {
-                var rect = target.getBoundingClientRect();
-                this.dropZoneStyle['width.px'] = rect.width;
-                this.dropZoneStyle['height.px'] = rect.height;
-                this.dropZoneStyle['top.px'] = rect.top;
-                this.dropZoneStyle['left.px'] = rect.left;
+        ActionBarItemsComponent.prototype.getButtonColorClass = function (item) {
+            switch (item.buttonColor) {
+                case undefined:
+                case 'primary':
+                    return item.buttonStyle === 'outline' ? 'btn-outline' : 'btn-primary';
+                case 'success':
+                    return item.buttonStyle === 'outline' ? 'btn-success-outline' : 'btn-success';
+                case 'warning':
+                    return item.buttonStyle === 'outline' ? 'btn-warning-outline' : 'btn-warning';
+                default:
+                    sharedUtils.assertNever(item.buttonColor);
+                    return '';
             }
         };
-        return AssetFileInputComponent;
+        return ActionBarItemsComponent;
     }());
-    AssetFileInputComponent.decorators = [
+    ActionBarItemsComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-asset-file-input',
-                    template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n",
+                    selector: 'vdr-action-bar-items',
+                    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: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"]
+                    styles: [":host{display:inline-block;min-height:36px}\n"]
                 },] }
     ];
-    AssetFileInputComponent.ctorParameters = function () { return [
-        { type: ServerConfigService }
+    ActionBarItemsComponent.ctorParameters = function () { return [
+        { type: NavBuilderService },
+        { type: i1$3.ActivatedRoute },
+        { type: DataService },
+        { type: NotificationService }
     ]; };
-    AssetFileInputComponent.propDecorators = {
-        dropZoneTarget: [{ type: i0.Input }],
-        uploading: [{ type: i0.Input }],
-        selectFiles: [{ type: i0.Output }],
-        onDragEnter: [{ type: i0.HostListener, args: ['document:dragenter',] }],
-        onDragLeave: [{ type: i0.HostListener, args: ['document:dragleave', ['$event'],] }]
+    ActionBarItemsComponent.propDecorators = {
+        locationId: [{ type: i0.HostBinding, args: ['attr.data-location-id',] }, { type: i0.Input }]
     };
 
-    var AssetPreviewDialogComponent = /** @class */ (function () {
-        function AssetPreviewDialogComponent(dataService) {
-            this.dataService = dataService;
+    var ActionBarLeftComponent = /** @class */ (function () {
+        function ActionBarLeftComponent() {
+            this.grow = false;
         }
-        AssetPreviewDialogComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.assetWithTags$ = rxjs.of(this.asset).pipe(operators.mergeMap(function (asset) {
-                if (_this.hasTags(asset)) {
-                    return rxjs.of(asset);
-                }
-                else {
-                    // tslint:disable-next-line:no-non-null-assertion
-                    return _this.dataService.product.getAsset(asset.id).mapSingle(function (data) { return data.asset; });
-                }
-            }));
-        };
-        AssetPreviewDialogComponent.prototype.hasTags = function (asset) {
-            return asset.hasOwnProperty('tags');
-        };
-        return AssetPreviewDialogComponent;
+        return ActionBarLeftComponent;
     }());
-    AssetPreviewDialogComponent.decorators = [
+    ActionBarLeftComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-asset-preview-dialog',
+                    selector: 'vdr-ab-left',
+                    template: "\n        <ng-content></ng-content>\n    "
+                },] }
+    ];
+    ActionBarLeftComponent.propDecorators = {
+        grow: [{ type: i0.Input }]
+    };
+    var ActionBarRightComponent = /** @class */ (function () {
+        function ActionBarRightComponent() {
+            this.grow = false;
+        }
+        return ActionBarRightComponent;
+    }());
+    ActionBarRightComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-ab-right',
+                    template: "\n        <ng-content></ng-content>\n    "
+                },] }
+    ];
+    ActionBarRightComponent.propDecorators = {
+        grow: [{ type: i0.Input }]
+    };
+    var ActionBarComponent = /** @class */ (function () {
+        function ActionBarComponent() {
+        }
+        return ActionBarComponent;
+    }());
+    ActionBarComponent.decorators = [
+        { 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: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 = {
+        left: [{ type: i0.ContentChild, args: [ActionBarLeftComponent,] }],
+        right: [{ type: i0.ContentChild, args: [ActionBarRightComponent,] }]
+    };
+
+    var AddressFormComponent = /** @class */ (function () {
+        function AddressFormComponent() {
+        }
+        return AddressFormComponent;
+    }());
+    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        <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: [""]
+                },] }
+    ];
+    AddressFormComponent.propDecorators = {
+        customFields: [{ type: i0.Input }],
+        formGroup: [{ type: i0.Input }],
+        availableCountries: [{ type: i0.Input }]
+    };
+
+    /**
+     * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+     */
+    var AffixedInputComponent = /** @class */ (function () {
+        function AffixedInputComponent() {
+        }
+        return AffixedInputComponent;
+    }());
+    AffixedInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-affixed-input',
+                    template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:inline-flex}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-grey-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix input{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"]
+                },] }
+    ];
+    AffixedInputComponent.propDecorators = {
+        prefix: [{ type: i0.Input }],
+        suffix: [{ type: i0.Input }]
+    };
+
+    /**
+     * A form input control which displays a number input with a percentage sign suffix.
+     */
+    var PercentageSuffixInputComponent = /** @class */ (function () {
+        function PercentageSuffixInputComponent() {
+            this.disabled = false;
+            this.readonly = false;
+        }
+        PercentageSuffixInputComponent.prototype.ngOnChanges = function (changes) {
+            if ('value' in changes) {
+                this.writeValue(changes['value'].currentValue);
+            }
+        };
+        PercentageSuffixInputComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        PercentageSuffixInputComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouch = fn;
+        };
+        PercentageSuffixInputComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        PercentageSuffixInputComponent.prototype.onInput = function (value) {
+            this.onChange(value);
+        };
+        PercentageSuffixInputComponent.prototype.writeValue = function (value) {
+            var numericValue = +value;
+            if (!Number.isNaN(numericValue)) {
+                this._value = numericValue;
+            }
+        };
+        return PercentageSuffixInputComponent;
+    }());
+    PercentageSuffixInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-percentage-suffix-input',
+                    template: "\n        <vdr-affixed-input suffix=\"%\">\n            <input\n                type=\"number\"\n                step=\"1\"\n                [value]=\"_value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                (input)=\"onInput($event.target.value)\"\n                (focus)=\"onTouch()\"\n            />\n        </vdr-affixed-input>\n    ",
+                    providers: [
+                        {
+                            provide: forms.NG_VALUE_ACCESSOR,
+                            useExisting: PercentageSuffixInputComponent,
+                            multi: true,
+                        },
+                    ],
+                    styles: ["\n            :host {\n                padding: 0;\n            }\n        "]
+                },] }
+    ];
+    PercentageSuffixInputComponent.propDecorators = {
+        disabled: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        value: [{ type: i0.Input }]
+    };
+
+    /**
+     * A component for selecting files to upload as new Assets.
+     */
+    var AssetFileInputComponent = /** @class */ (function () {
+        function AssetFileInputComponent(serverConfig) {
+            this.serverConfig = serverConfig;
+            /**
+             * CSS selector of the DOM element which will be masked by the file
+             * drop zone. Defaults to `body`.
+             */
+            this.dropZoneTarget = 'body';
+            this.uploading = false;
+            this.selectFiles = new i0.EventEmitter();
+            this.dragging = false;
+            this.overDropZone = false;
+            this.dropZoneStyle = {
+                'width.px': 0,
+                'height.px': 0,
+                'top.px': 0,
+                'left.px': 0,
+            };
+        }
+        AssetFileInputComponent.prototype.ngOnInit = function () {
+            this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
+            this.fitDropZoneToTarget();
+        };
+        AssetFileInputComponent.prototype.onDragEnter = function () {
+            this.dragging = true;
+            this.fitDropZoneToTarget();
+        };
+        // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
+        AssetFileInputComponent.prototype.onDragLeave = function (event) {
+            if (!event.clientX && !event.clientY) {
+                this.dragging = false;
+            }
+        };
+        /**
+         * Preventing this event is required to make dropping work.
+         * See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_a_drop_zone
+         */
+        AssetFileInputComponent.prototype.onDragOver = function (event) {
+            event.preventDefault();
+        };
+        // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
+        AssetFileInputComponent.prototype.onDrop = function (event) {
+            event.preventDefault();
+            this.dragging = false;
+            this.overDropZone = false;
+            var files = Array.from(event.dataTransfer ? event.dataTransfer.items : [])
+                .map(function (i) { return i.getAsFile(); })
+                .filter(sharedUtils.notNullOrUndefined);
+            this.selectFiles.emit(files);
+        };
+        AssetFileInputComponent.prototype.select = function (event) {
+            var files = event.target.files;
+            if (files) {
+                this.selectFiles.emit(Array.from(files));
+            }
+        };
+        AssetFileInputComponent.prototype.fitDropZoneToTarget = function () {
+            var target = document.querySelector(this.dropZoneTarget);
+            if (target) {
+                var rect = target.getBoundingClientRect();
+                this.dropZoneStyle['width.px'] = rect.width;
+                this.dropZoneStyle['height.px'] = rect.height;
+                this.dropZoneStyle['top.px'] = rect.top;
+                this.dropZoneStyle['left.px'] = rect.left;
+            }
+        };
+        return AssetFileInputComponent;
+    }());
+    AssetFileInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-asset-file-input',
+                    template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"]
+                },] }
+    ];
+    AssetFileInputComponent.ctorParameters = function () { return [
+        { type: ServerConfigService }
+    ]; };
+    AssetFileInputComponent.propDecorators = {
+        dropZoneTarget: [{ type: i0.Input }],
+        uploading: [{ type: i0.Input }],
+        selectFiles: [{ type: i0.Output }],
+        onDragEnter: [{ type: i0.HostListener, args: ['document:dragenter',] }],
+        onDragLeave: [{ type: i0.HostListener, args: ['document:dragleave', ['$event'],] }]
+    };
+
+    var AssetPreviewDialogComponent = /** @class */ (function () {
+        function AssetPreviewDialogComponent(dataService) {
+            this.dataService = dataService;
+        }
+        AssetPreviewDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.assetWithTags$ = rxjs.of(this.asset).pipe(operators.mergeMap(function (asset) {
+                if (_this.hasTags(asset)) {
+                    return rxjs.of(asset);
+                }
+                else {
+                    // tslint:disable-next-line:no-non-null-assertion
+                    return _this.dataService.product.getAsset(asset.id).mapSingle(function (data) { return data.asset; });
+                }
+            }));
+        };
+        AssetPreviewDialogComponent.prototype.hasTags = function (asset) {
+            return asset.hasOwnProperty('tags');
+        };
+        return AssetPreviewDialogComponent;
+    }());
+    AssetPreviewDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-asset-preview-dialog',
                     template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:70vh}.update-button.hidden{visibility:hidden}\n"]
@@ -7319,9 +7970,13 @@
             this.canDelete = false;
             this.selectionChange = new i0.EventEmitter();
             this.deleteAssets = new i0.EventEmitter();
-            this.selection = [];
+            this.selectionManager = new SelectionManager({
+                multiSelect: this.multiSelect,
+                itemsAreEqual: function (a, b) { return a.id === b.id; },
+                additiveMode: false,
+            });
         }
-        AssetGalleryComponent.prototype.ngOnChanges = function () {
+        AssetGalleryComponent.prototype.ngOnChanges = function (changes) {
             var e_1, _a;
             if (this.assets) {
                 var _loop_1 = function (asset) {
@@ -7333,7 +7988,7 @@
                 };
                 var this_1 = this;
                 try {
-                    for (var _b = __values(this.selection), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = __values(this.selectionManager.selection), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var asset = _c.value;
                         _loop_1(asset);
                     }
@@ -7346,51 +8001,26 @@
                     finally { if (e_1) throw e_1.error; }
                 }
             }
+            if (changes['assets']) {
+                this.selectionManager.setCurrentItems(this.assets);
+            }
+            if (changes['multiSelect']) {
+                this.selectionManager.setMultiSelect(this.multiSelect);
+            }
         };
         AssetGalleryComponent.prototype.toggleSelection = function (asset, event) {
-            var _a;
-            var _this = this;
-            var index = this.selection.findIndex(function (a) { return a.id === asset.id; });
-            if (this.multiSelect && (event === null || event === void 0 ? void 0 : event.shiftKey) && 1 <= this.selection.length) {
-                var lastSelection_1 = this.selection[this.selection.length - 1];
-                var lastSelectionIndex = this.assets.findIndex(function (a) { return a.id === lastSelection_1.id; });
-                var currentIndex = this.assets.findIndex(function (a) { return a.id === asset.id; });
-                var start = currentIndex < lastSelectionIndex ? currentIndex : lastSelectionIndex;
-                var end = currentIndex > lastSelectionIndex ? currentIndex + 1 : lastSelectionIndex;
-                (_a = this.selection).push.apply(_a, __spreadArray([], __read(this.assets.slice(start, end).filter(function (a) { return !_this.selection.find(function (s) { return s.id === a.id; }); }))));
-            }
-            else if (index === -1) {
-                if (this.multiSelect && ((event === null || event === void 0 ? void 0 : event.ctrlKey) || (event === null || event === void 0 ? void 0 : event.shiftKey))) {
-                    this.selection.push(asset);
-                }
-                else {
-                    this.selection = [asset];
-                }
-            }
-            else {
-                if (this.multiSelect && (event === null || event === void 0 ? void 0 : event.ctrlKey)) {
-                    this.selection.splice(index, 1);
-                }
-                else if (1 < this.selection.length) {
-                    this.selection = [asset];
-                }
-                else {
-                    this.selection.splice(index, 1);
-                }
-            }
-            // Make the selection mutable
-            this.selection = this.selection.map(function (x) { return (Object.assign({}, x)); });
-            this.selectionChange.emit(this.selection);
+            this.selectionManager.toggleSelection(asset, event);
+            this.selectionChange.emit(this.selectionManager.selection);
         };
         AssetGalleryComponent.prototype.selectMultiple = function (assets) {
-            this.selection = assets;
-            this.selectionChange.emit(this.selection);
+            this.selectionManager.selectMultiple(assets);
+            this.selectionChange.emit(this.selectionManager.selection);
         };
         AssetGalleryComponent.prototype.isSelected = function (asset) {
-            return !!this.selection.find(function (a) { return a.id === asset.id; });
+            return this.selectionManager.isSelected(asset);
         };
         AssetGalleryComponent.prototype.lastSelected = function () {
-            return this.selection[this.selection.length - 1];
+            return this.selectionManager.lastSelected();
         };
         AssetGalleryComponent.prototype.previewAsset = function (asset) {
             this.modalService
@@ -7410,9 +8040,9 @@
     AssetGalleryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-asset-gallery',
-                    template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <div class=\"selected-checkbox\"><clr-icon shape=\"check-circle\" size=\"32\"></clr-icon></div>\r\n            <img [src]=\"asset | assetPreview: 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"btn btn-link\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"btn btn-link\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                    </a>\r\n                </div>\r\n            </ng-container>\r\n            <div *ngIf=\"canDelete\">\r\n                <button (click)=\"deleteAssets.emit(selection)\" class=\"btn btn-link\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon> {{ 'common.delete' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate: { count: selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview: 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"btn btn-link\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"btn btn-link\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                    </a>\r\n                </div>\r\n            </ng-container>\r\n            <div *ngIf=\"canDelete\">\r\n                <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"btn btn-link\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon> {{ 'common.delete' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;overflow:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px;overflow-y:auto;padding-left:12px;padding-top:12px;padding-bottom:12px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}.selected-checkbox{opacity:0;position:absolute;color:var(--color-success-500);background-color:#fff;border-radius:50%;top:-12px;left:-12px;box-shadow:0 5px 5px -4px #000000bf;transition:opacity .1s}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{width:25%;padding:0 6px;overflow-y:auto}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:bold}\n"]
+                    styles: [":host{display:flex;overflow:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px;overflow-y:auto;padding-left:12px;padding-top:12px;padding-bottom:12px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{width:25%;padding:0 6px;overflow-y:auto}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:bold}\n"]
                 },] }
     ];
     AssetGalleryComponent.ctorParameters = function () { return [
@@ -7716,7 +8346,7 @@
             }
         };
         AssetPreviewComponent.prototype.getSourceFileName = function () {
-            var parts = this.asset.source.split('/');
+            var parts = this.asset.source.split(/[\\\/]/g);
             return parts[parts.length - 1];
         };
         AssetPreviewComponent.prototype.onImageLoad = function () {
@@ -7814,9 +8444,9 @@
     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        <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    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\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</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                [ngClass]=\"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    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\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</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}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"]
+                    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 .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.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}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"]
                 },] }
     ];
     AssetPreviewComponent.ctorParameters = function () { return [
@@ -7893,7 +8523,7 @@
         return new SingleSearchSelectionModel();
     }
 
-    var ɵ0 = SingleSearchSelectionModelFactory;
+    var ɵ0$1 = SingleSearchSelectionModelFactory;
     var AssetSearchInputComponent = /** @class */ (function () {
         function AssetSearchInputComponent() {
             var _this = this;
@@ -7984,7 +8614,7 @@
                     selector: 'vdr-asset-search-input',
                     template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-asset-name-or-tag' | translate\"\r\n    [items]=\"tags\"\r\n    [searchFn]=\"filterTagResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\" icon=\"close\" (iconClick)=\"clear(item)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.value\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label || item }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.value\">\r\n            <vdr-chip [colorFrom]=\"item.value\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: ngSelect.SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
+                    providers: [{ provide: ngSelect.SELECTION_MODEL_FACTORY, useValue: ɵ0$1 }],
                     styles: [":host{display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"]
                 },] }
     ];
@@ -8037,394 +8667,137 @@
                 this.onTouched();
             }
         };
-        ChannelAssignmentControlComponent.prototype.channelIsDisabled = function (id) {
-            return this.disableChannelIds.includes(id);
-        };
-        ChannelAssignmentControlComponent.prototype.valueChanged = function (value) {
-            if (Array.isArray(value)) {
-                this.onChange(value.map(function (c) { return c.id; }));
-            }
-            else {
-                this.onChange([value ? value.id : undefined]);
-            }
-        };
-        ChannelAssignmentControlComponent.prototype.compareFn = function (c1, c2) {
-            var c1id = typeof c1 === 'string' ? c1 : c1.id;
-            var c2id = typeof c2 === 'string' ? c2 : c2.id;
-            return c1id === c2id;
-        };
-        ChannelAssignmentControlComponent.prototype.mapIncomingValueToChannels = function (value) {
-            var _this = this;
-            var _a;
-            if (Array.isArray(value)) {
-                if (typeof value[0] === 'string') {
-                    this.value = value
-                        .map(function (id) { var _a; return (_a = _this.channels) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.id === id; }); })
-                        .filter(sharedUtils.notNullOrUndefined);
-                }
-                else {
-                    this.value = value;
-                }
-            }
-            else {
-                if (typeof value === 'string') {
-                    var channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.id === value; });
-                    if (channel) {
-                        this.value = [channel];
-                    }
-                }
-                else if (value && value.id) {
-                    this.value = [value];
-                }
-            }
-        };
-        return ChannelAssignmentControlComponent;
-    }());
-    ChannelAssignmentControlComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-channel-assignment-control',
-                    template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.Default,
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: ChannelAssignmentControlComponent,
-                            multi: true,
-                        },
-                    ],
-                    styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"]
-                },] }
-    ];
-    ChannelAssignmentControlComponent.ctorParameters = function () { return [
-        { type: DataService }
-    ]; };
-    ChannelAssignmentControlComponent.propDecorators = {
-        multiple: [{ type: i0.Input }],
-        includeDefaultChannel: [{ type: i0.Input }],
-        disableChannelIds: [{ type: i0.Input }]
-    };
-
-    var ChannelBadgeComponent = /** @class */ (function () {
-        function ChannelBadgeComponent() {
-        }
-        Object.defineProperty(ChannelBadgeComponent.prototype, "isDefaultChannel", {
-            get: function () {
-                return this.channelCode === sharedConstants.DEFAULT_CHANNEL_CODE;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return ChannelBadgeComponent;
-    }());
-    ChannelBadgeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-channel-badge',
-                    template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block}button :host{margin-bottom:-1px}clr-icon{margin-right:6px}\n"]
-                },] }
-    ];
-    ChannelBadgeComponent.propDecorators = {
-        channelCode: [{ type: i0.Input }]
-    };
-
-    /**
-     * @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.
-             */
-            this.colorFrom = '';
-            this.iconClick = new i0.EventEmitter();
-        }
-        return ChipComponent;
-    }());
-    ChipComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-chip',
-                    template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block}.wrapper{display:flex;border:1px solid var(--color-component-border-300);border-radius:3px;margin:6px}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border)}.wrapper.warning .chip-label{color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border)}.wrapper.success .chip-label{color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border)}.wrapper.error .chip-label{color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:3px 6px;line-height:1em;border-radius:3px;white-space:nowrap;display:flex;align-items:center}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"]
-                },] }
-    ];
-    ChipComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        invert: [{ type: i0.Input }],
-        colorFrom: [{ type: i0.Input }],
-        colorType: [{ type: i0.Input }],
-        iconClick: [{ type: i0.Output }]
-    };
-
-    /**
-     * ConfigArg values are always stored as strings. If they are not primitives, then
-     * they are JSON-encoded. This function unwraps them back into their original
-     * data type.
-     */
-    function getConfigArgValue(value) {
-        try {
-            return value ? JSON.parse(value) : undefined;
-        }
-        catch (e) {
-            return value;
-        }
-    }
-    function encodeConfigArgValue(value) {
-        return Array.isArray(value) ? JSON.stringify(value) : (value !== null && value !== void 0 ? value : '').toString();
-    }
-    /**
-     * Creates an empty ConfigurableOperation object based on the definition.
-     */
-    function configurableDefinitionToInstance(def) {
-        return Object.assign(Object.assign({}, def), { args: def.args.map(function (arg) {
-                return Object.assign(Object.assign({}, arg), { value: getDefaultConfigArgValue(arg) });
-            }) });
-    }
-    /**
-     * Converts an object of the type:
-     * ```
-     * {
-     *     code: 'my-operation',
-     *     args: {
-     *         someProperty: 'foo'
-     *     }
-     * }
-     * ```
-     * to the format defined by the ConfigurableOperationInput GraphQL input type:
-     * ```
-     * {
-     *     code: 'my-operation',
-     *     args: [
-     *         { name: 'someProperty', value: 'foo' }
-     *     ]
-     * }
-     * ```
-     */
-    function toConfigurableOperationInput(operation, formValueOperations) {
-        return {
-            code: operation.code,
-            arguments: Object.values(formValueOperations.args || {}).map(function (value, j) { return ({
-                name: operation.args[j].name,
-                value: value.hasOwnProperty('value')
-                    ? encodeConfigArgValue(value.value)
-                    : encodeConfigArgValue(value),
-            }); }),
-        };
-    }
-    function configurableOperationValueIsValid(def, value) {
-        var e_1, _b;
-        if (!def || !value) {
-            return false;
-        }
-        if (def.code !== value.code) {
-            return false;
-        }
-        try {
-            for (var _c = __values(def.args), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var argDef = _d.value;
-                var argVal = value.args[argDef.name];
-                if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
-                    return false;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return true;
-    }
-    /**
-     * Returns a default value based on the type of the config arg.
-     */
-    function getDefaultConfigArgValue(arg) {
-        var _a;
-        return arg.list ? [] : (_a = arg.defaultValue) !== null && _a !== void 0 ? _a : null;
-    }
-
-    /**
-     * Interpolates the description of an ConfigurableOperation with the given values.
-     */
-    function interpolateDescription(operation, values) {
-        if (!operation) {
-            return '';
-        }
-        var templateString = operation.description;
-        var interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, function (substring, argName) {
-            var normalizedArgName = argName.toLowerCase();
-            var value = values[normalizedArgName];
-            if (value == null) {
-                return '_';
-            }
-            var formatted = value;
-            var argDef = operation.args.find(function (arg) { return arg.name === normalizedArgName; });
-            if (argDef && argDef.type === 'int' && argDef.ui && argDef.ui.component === 'currency-form-input') {
-                formatted = value / 100;
-            }
-            if (argDef && argDef.type === 'datetime' && value instanceof Date) {
-                formatted = value.toLocaleDateString();
-            }
-            return formatted;
-        });
-        return interpolated;
-    }
-
-    /**
-     * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
-     */
-    var ConfigurableInputComponent = /** @class */ (function () {
-        function ConfigurableInputComponent() {
-            this.readonly = false;
-            this.removable = true;
-            this.remove = new i0.EventEmitter();
-            this.argValues = {};
-            this.form = new forms.FormGroup({});
-        }
-        ConfigurableInputComponent.prototype.interpolateDescription = function () {
-            if (this.operationDefinition) {
-                return interpolateDescription(this.operationDefinition, this.form.value);
-            }
-            else {
-                return '';
-            }
-        };
-        ConfigurableInputComponent.prototype.ngOnChanges = function (changes) {
-            if ('operation' in changes || 'operationDefinition' in changes) {
-                this.createForm();
-            }
-        };
-        ConfigurableInputComponent.prototype.ngOnDestroy = function () {
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-        };
-        ConfigurableInputComponent.prototype.registerOnChange = function (fn) {
-            this.onChange = fn;
-        };
-        ConfigurableInputComponent.prototype.registerOnTouched = function (fn) {
-            this.onTouch = fn;
-        };
-        ConfigurableInputComponent.prototype.setDisabledState = function (isDisabled) {
-            if (isDisabled) {
-                this.form.disable();
+        ChannelAssignmentControlComponent.prototype.channelIsDisabled = function (id) {
+            return this.disableChannelIds.includes(id);
+        };
+        ChannelAssignmentControlComponent.prototype.valueChanged = function (value) {
+            if (Array.isArray(value)) {
+                this.onChange(value.map(function (c) { return c.id; }));
             }
             else {
-                this.form.enable();
-            }
-        };
-        ConfigurableInputComponent.prototype.writeValue = function (value) {
-            if (value) {
-                this.form.patchValue(value);
+                this.onChange([value ? value.id : undefined]);
             }
         };
-        ConfigurableInputComponent.prototype.trackByName = function (index, arg) {
-            return arg.name;
-        };
-        ConfigurableInputComponent.prototype.getArgDef = function (arg) {
-            var _a;
-            return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(function (a) { return a.name === arg.name; });
+        ChannelAssignmentControlComponent.prototype.compareFn = function (c1, c2) {
+            var c1id = typeof c1 === 'string' ? c1 : c1.id;
+            var c2id = typeof c2 === 'string' ? c2 : c2.id;
+            return c1id === c2id;
         };
-        ConfigurableInputComponent.prototype.createForm = function () {
-            var e_1, _c;
+        ChannelAssignmentControlComponent.prototype.mapIncomingValueToChannels = function (value) {
             var _this = this;
-            var _a, _b;
-            if (!this.operation) {
-                return;
-            }
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-            this.form = new forms.FormGroup({});
-            this.form.__id = Math.random().toString(36).substr(10);
-            if (this.operation.args) {
-                var _loop_1 = function (arg) {
-                    var value = (_b = this_1.operation.args.find(function (a) { return a.name === arg.name; })) === null || _b === void 0 ? void 0 : _b.value;
-                    if (value === undefined) {
-                        value = getDefaultConfigArgValue(arg);
-                    }
-                    var validators = arg.list ? undefined : arg.required ? forms.Validators.required : undefined;
-                    this_1.form.addControl(arg.name, new forms.FormControl(value, validators));
-                };
-                var this_1 = this;
-                try {
-                    for (var _d = __values(((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []), _e = _d.next(); !_e.done; _e = _d.next()) {
-                        var arg = _e.value;
-                        _loop_1(arg);
-                    }
+            var _a;
+            if (Array.isArray(value)) {
+                if (typeof value[0] === 'string') {
+                    this.value = value
+                        .map(function (id) { var _a; return (_a = _this.channels) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.id === id; }); })
+                        .filter(sharedUtils.notNullOrUndefined);
                 }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                finally {
-                    try {
-                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-                    }
-                    finally { if (e_1) throw e_1.error; }
+                else {
+                    this.value = value;
                 }
             }
-            this.subscription = this.form.valueChanges.subscribe(function (value) {
-                if (_this.onChange) {
-                    _this.onChange({
-                        code: _this.operation && _this.operation.code,
-                        args: value,
-                    });
+            else {
+                if (typeof value === 'string') {
+                    var channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.id === value; });
+                    if (channel) {
+                        this.value = [channel];
+                    }
                 }
-                if (_this.onTouch) {
-                    _this.onTouch();
+                else if (value && value.id) {
+                    this.value = [value];
                 }
-            });
-        };
-        ConfigurableInputComponent.prototype.validate = function (c) {
-            if (this.form.invalid) {
-                return {
-                    required: true,
-                };
             }
-            return null;
         };
-        return ConfigurableInputComponent;
+        return ChannelAssignmentControlComponent;
     }());
-    ConfigurableInputComponent.decorators = [
+    ChannelAssignmentControlComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'vdr-configurable-input',
-                    template: "<div class=\"card\" *ngIf=\"operation\">\r\n    <div class=\"card-block\">{{ interpolateDescription() }}</div>\r\n    <div class=\"card-block\" *ngIf=\"operation.args?.length\">\r\n        <form [formGroup]=\"form\" *ngIf=\"operation\" class=\"operation-inputs\">\r\n            <div *ngFor=\"let arg of operation.args; trackBy: trackByName\" class=\"arg-row\">\r\n                <ng-container *ngIf=\"form.get(arg.name)\">\r\n                    <label>{{ getArgDef(arg)?.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    selector: 'vdr-channel-assignment-control',
+                    template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.Default,
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: ConfigurableInputComponent,
-                            multi: true,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            useExisting: i0.forwardRef(function () { return ConfigurableInputComponent; }),
+                            useExisting: ChannelAssignmentControlComponent,
                             multi: true,
                         },
                     ],
-                    styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:24px}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}\n"]
+                    styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"]
                 },] }
     ];
-    ConfigurableInputComponent.propDecorators = {
-        operation: [{ type: i0.Input }],
-        operationDefinition: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
-        removable: [{ type: i0.Input }],
-        remove: [{ type: i0.Output }]
+    ChannelAssignmentControlComponent.ctorParameters = function () { return [
+        { type: DataService }
+    ]; };
+    ChannelAssignmentControlComponent.propDecorators = {
+        multiple: [{ type: i0.Input }],
+        includeDefaultChannel: [{ type: i0.Input }],
+        disableChannelIds: [{ type: i0.Input }]
+    };
+
+    var ChannelBadgeComponent = /** @class */ (function () {
+        function ChannelBadgeComponent() {
+        }
+        Object.defineProperty(ChannelBadgeComponent.prototype, "isDefaultChannel", {
+            get: function () {
+                return this.channelCode === sharedConstants.DEFAULT_CHANNEL_CODE;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ChannelBadgeComponent;
+    }());
+    ChannelBadgeComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-channel-badge',
+                    template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:inline-block}button :host{margin-bottom:-1px}clr-icon{margin-right:6px}\n"]
+                },] }
+    ];
+    ChannelBadgeComponent.propDecorators = {
+        channelCode: [{ type: i0.Input }]
+    };
+
+    /**
+     * @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.
+             */
+            this.colorFrom = '';
+            this.iconClick = new i0.EventEmitter();
+        }
+        return ChipComponent;
+    }());
+    ChipComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-chip',
+                    template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{display:inline-block}.wrapper{display:flex;border:1px solid var(--color-component-border-300);border-radius:3px;margin:6px}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border)}.wrapper.warning .chip-label{color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border)}.wrapper.success .chip-label{color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border)}.wrapper.error .chip-label{color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:3px 6px;line-height:1em;border-radius:3px;white-space:nowrap;display:flex;align-items:center}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"]
+                },] }
+    ];
+    ChipComponent.propDecorators = {
+        icon: [{ type: i0.Input }],
+        invert: [{ type: i0.Input }],
+        colorFrom: [{ type: i0.Input }],
+        colorType: [{ type: i0.Input }],
+        iconClick: [{ type: i0.Output }]
     };
 
     /**
@@ -10152,7 +10525,7 @@
                     selector: 'vdr-help-tooltip',
                     template: "<clr-tooltip>\r\n    <clr-icon clrTooltipTrigger shape=\"help\" size=\"14\"></clr-icon>\r\n    <clr-tooltip-content [clrPosition]=\"position\" clrSize=\"md\" *clrIfOpen>\r\n        <span>{{ content }}</span>\r\n    </clr-tooltip-content>\r\n</clr-tooltip>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [""]
+                    styles: ["clr-tooltip{display:inline-flex}\n"]
                 },] }
     ];
     HelpTooltipComponent.propDecorators = {
@@ -10439,6 +10812,110 @@
         pageChange: [{ type: i0.Output }]
     };
 
+    var ɵ0 = SingleSearchSelectionModelFactory;
+    var ProductSearchInputComponent = /** @class */ (function () {
+        function ProductSearchInputComponent() {
+            var _this = this;
+            this.searchTermChange = new i0.EventEmitter();
+            this.facetValueChange = new i0.EventEmitter();
+            this.lastTerm = '';
+            this.lastFacetValueIds = [];
+            this.filterFacetResults = function (term, item) {
+                if (!_this.isFacetValueItem(item)) {
+                    return false;
+                }
+                var cix = term.indexOf(':');
+                var facetName = cix > -1 ? term.toLowerCase().slice(0, cix) : null;
+                var facetVal = cix > -1 ? term.toLowerCase().slice(cix + 1) : term.toLowerCase();
+                if (facetName) {
+                    return (item.facetValue.facet.name.toLowerCase().includes(facetName) &&
+                        item.facetValue.name.toLocaleLowerCase().includes(facetVal));
+                }
+                return (item.facetValue.name.toLowerCase().includes(term.toLowerCase()) ||
+                    item.facetValue.facet.name.toLowerCase().includes(term.toLowerCase()));
+            };
+            this.isFacetValueItem = function (input) {
+                return typeof input === 'object' && !!input && input.hasOwnProperty('facetValue');
+            };
+        }
+        ProductSearchInputComponent.prototype.setSearchTerm = function (term) {
+            var _this = this;
+            if (term) {
+                this.selectComponent.select({ label: term, value: { label: term } });
+            }
+            else {
+                var currentTerm = this.selectComponent.selectedItems.find(function (i) { return !_this.isFacetValueItem(i.value); });
+                if (currentTerm) {
+                    this.selectComponent.unselect(currentTerm);
+                }
+            }
+        };
+        ProductSearchInputComponent.prototype.setFacetValues = function (ids) {
+            var _this = this;
+            var items = this.selectComponent.items;
+            this.selectComponent.selectedItems.forEach(function (item) {
+                if (_this.isFacetValueItem(item.value) && !ids.includes(item.value.facetValue.id)) {
+                    _this.selectComponent.unselect(item);
+                }
+            });
+            ids.map(function (id) {
+                return items === null || items === void 0 ? void 0 : items.find(function (item) { return _this.isFacetValueItem(item) && item.facetValue.id === id; });
+            })
+                .filter(sharedUtils.notNullOrUndefined)
+                .forEach(function (item) {
+                var isSelected = _this.selectComponent.selectedItems.find(function (i) {
+                    var val = i.value;
+                    if (_this.isFacetValueItem(val)) {
+                        return val.facetValue.id === item.facetValue.id;
+                    }
+                    return false;
+                });
+                if (!isSelected) {
+                    _this.selectComponent.select({ label: '', value: item });
+                }
+            });
+        };
+        ProductSearchInputComponent.prototype.onSelectChange = function (selectedItems) {
+            var _this = this;
+            if (!Array.isArray(selectedItems)) {
+                selectedItems = [selectedItems];
+            }
+            var searchTermItem = selectedItems.find(function (item) { return !_this.isFacetValueItem(item); });
+            var searchTerm = searchTermItem ? searchTermItem.label : '';
+            var facetValueIds = selectedItems.filter(this.isFacetValueItem).map(function (i) { return i.facetValue.id; });
+            if (searchTerm !== this.lastTerm) {
+                this.searchTermChange.emit(searchTerm);
+                this.lastTerm = searchTerm;
+            }
+            if (this.lastFacetValueIds.join(',') !== facetValueIds.join(',')) {
+                this.facetValueChange.emit(facetValueIds);
+                this.lastFacetValueIds = facetValueIds;
+            }
+        };
+        ProductSearchInputComponent.prototype.addTagFn = function (item) {
+            return { label: item };
+        };
+        ProductSearchInputComponent.prototype.isSearchHeaderSelected = function () {
+            return this.selectComponent.itemsList.markedIndex === -1;
+        };
+        return ProductSearchInputComponent;
+    }());
+    ProductSearchInputComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-product-search-input',
+                    template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: ngSelect.SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
+                    styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"]
+                },] }
+    ];
+    ProductSearchInputComponent.propDecorators = {
+        facetValueResults: [{ type: i0.Input }],
+        searchTermChange: [{ type: i0.Output }],
+        facetValueChange: [{ type: i0.Output }],
+        selectComponent: [{ type: i0.ViewChild, args: ['selectComponent', { static: true },] }]
+    };
+
     /**
      * @description
      * A component for selecting product variants via an autocomplete-style select input.
@@ -11258,7 +11735,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)!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"]
+                    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);border-radius:var(--border-radius-input) var(--border-radius-input) 0 0;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 var(--border-radius-input) var(--border-radius-input);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 [
@@ -11279,6 +11756,7 @@
         function SelectToggleComponent() {
             this.size = 'large';
             this.selected = false;
+            this.hiddenWhenOff = false;
             this.disabled = false;
             this.selectedChange = new i0.EventEmitter();
         }
@@ -11287,14 +11765,15 @@
     SelectToggleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-select-toggle',
-                    template: "<div\r\n    class=\"toggle\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon shape=\"check\" [attr.size]=\"size === 'small' ? 16 : 32\"></clr-icon>\r\n</div>\r\n<div class=\"toggle-label\" [class.disabled]=\"disabled\" *ngIf=\"label\" (click)=\"selectedChange.emit(!selected)\">\r\n    {{ label }}\r\n</div>\r\n",
+                    template: "<div\r\n    class=\"toggle\"\r\n    [class.hide-when-off]=\"hiddenWhenOff\"\r\n    [class.disabled]=\"disabled\"\r\n    [class.small]=\"size === 'small'\"\r\n    [attr.tabindex]=\"disabled ? null : 0\"\r\n    [class.selected]=\"selected\"\r\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\r\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\r\n    (click)=\"selectedChange.emit(!selected)\"\r\n>\r\n    <clr-icon shape=\"check-circle\" [attr.size]=\"size === 'small' ? 24 : 32\"></clr-icon>\r\n</div>\r\n<div class=\"toggle-label\" [class.disabled]=\"disabled\" *ngIf=\"label\" (click)=\"selectedChange.emit(!selected)\">\r\n    {{ label }}\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:var(--color-component-bg-100);border:2px solid var(--color-component-border-300);padding:0 6px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--color-grey-300);transition:background-color .2s,border .2s}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{border-color:var(--color-success-500);background-color:var(--color-success-400);opacity:.9}.toggle.selected{background-color:var(--color-success-500);border-color:var(--color-success-600);color:#fff}.toggle.selected:not(.disabled):hover{background-color:var(--color-success-500);border-color:var(--color-success-400);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-500)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}\n"]
+                    styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .2s,color .2s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-500)}.toggle.selected:not(.disabled):hover{color:var(--color-success-400);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-500)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-left:6px;text-align:left;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}\n"]
                 },] }
     ];
     SelectToggleComponent.propDecorators = {
         size: [{ type: i0.Input }],
         selected: [{ type: i0.Input }],
+        hiddenWhenOff: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         label: [{ type: i0.Input }],
         selectedChange: [{ type: i0.Output }]
@@ -12142,7 +12621,7 @@
         }
         RelationAssetInputComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.asset$ = this.parentFormControl.valueChanges.pipe(operators.startWith(this.parentFormControl.value), operators.map(function (asset) { return asset === null || asset === void 0 ? void 0 : asset.id; }), operators.distinctUntilChanged(), operators.switchMap(function (id) {
+            this.asset$ = this.formControl.valueChanges.pipe(operators.startWith(this.formControl.value), operators.map(function (asset) { return asset === null || asset === void 0 ? void 0 : asset.id; }), operators.distinctUntilChanged(), operators.switchMap(function (id) {
                 if (id) {
                     return _this.dataService.product.getAsset(id).mapStream(function (data) { return data.asset || undefined; });
                 }
@@ -12162,14 +12641,14 @@
             })
                 .subscribe(function (result) {
                 if (result && result.length) {
-                    _this.parentFormControl.setValue(result[0]);
-                    _this.parentFormControl.markAsDirty();
+                    _this.formControl.setValue(result[0]);
+                    _this.formControl.markAsDirty();
                 }
             });
         };
         RelationAssetInputComponent.prototype.remove = function () {
-            this.parentFormControl.setValue(null);
-            this.parentFormControl.markAsDirty();
+            this.formControl.setValue(null);
+            this.formControl.markAsDirty();
         };
         RelationAssetInputComponent.prototype.previewAsset = function (asset) {
             this.modalService
@@ -12182,6 +12661,7 @@
         };
         return RelationAssetInputComponent;
     }());
+    RelationAssetInputComponent.id = 'asset-form-input';
     RelationAssetInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-relation-asset-input',
@@ -12196,7 +12676,7 @@
     ]; };
     RelationAssetInputComponent.propDecorators = {
         readonly: [{ type: i0.Input }],
-        parentFormControl: [{ type: i0.Input }],
+        formControl: [{ type: i0.Input, args: ['parentFormControl',] }],
         config: [{ type: i0.Input }]
     };
 
@@ -13488,6 +13968,8 @@
         UiExtensionPointComponent,
         CustomDetailComponentHostComponent,
         AssetPreviewLinksComponent,
+        ProductMultiSelectorDialogComponent,
+        ProductSearchInputComponent,
     ];
     var DYNAMIC_FORM_INPUTS = [
         TextFormInputComponent,
@@ -13511,6 +13993,8 @@
         TextareaFormInputComponent,
         RichTextFormInputComponent,
         JsonEditorFormInputComponent,
+        ProductMultiSelectorFormInputComponent,
+        CombinationModeFormInputComponent,
     ];
     var SharedModule = /** @class */ (function () {
         function SharedModule() {
@@ -14086,7 +14570,7 @@
     }
 
     // Auto-generated by the set-version.js script.
-    var ADMIN_UI_VERSION = '1.5.1';
+    var ADMIN_UI_VERSION = '1.6.1';
 
     /**
      * Responsible for registering dashboard widget components and querying for layouts.
@@ -14412,6 +14896,7 @@
     exports.ChipComponent = ChipComponent;
     exports.ClientDataService = ClientDataService;
     exports.CollectionDataService = CollectionDataService;
+    exports.CombinationModeFormInputComponent = CombinationModeFormInputComponent;
     exports.ComponentRegistryService = ComponentRegistryService;
     exports.ConfigurableInputComponent = ConfigurableInputComponent;
     exports.CoreModule = CoreModule;
@@ -14609,6 +15094,7 @@
     exports.OverlayHostComponent = OverlayHostComponent;
     exports.OverlayHostService = OverlayHostService;
     exports.PAYMENT_METHOD_FRAGMENT = PAYMENT_METHOD_FRAGMENT;
+    exports.PREVIEW_COLLECTION_CONTENTS = PREVIEW_COLLECTION_CONTENTS;
     exports.PRODUCT_DETAIL_FRAGMENT = PRODUCT_DETAIL_FRAGMENT;
     exports.PRODUCT_OPTION_FRAGMENT = PRODUCT_OPTION_FRAGMENT;
     exports.PRODUCT_OPTION_GROUP_FRAGMENT = PRODUCT_OPTION_GROUP_FRAGMENT;
@@ -14620,6 +15106,9 @@
     exports.PasswordFormInputComponent = PasswordFormInputComponent;
     exports.PercentageSuffixInputComponent = PercentageSuffixInputComponent;
     exports.ProductDataService = ProductDataService;
+    exports.ProductMultiSelectorDialogComponent = ProductMultiSelectorDialogComponent;
+    exports.ProductMultiSelectorFormInputComponent = ProductMultiSelectorFormInputComponent;
+    exports.ProductSearchInputComponent = ProductSearchInputComponent;
     exports.ProductSelectorComponent = ProductSelectorComponent;
     exports.ProductSelectorFormInputComponent = ProductSelectorFormInputComponent;
     exports.PromotionDataService = PromotionDataService;
@@ -14665,6 +15154,7 @@
     exports.STRING_CUSTOM_FIELD_FRAGMENT = STRING_CUSTOM_FIELD_FRAGMENT;
     exports.SelectFormInputComponent = SelectFormInputComponent;
     exports.SelectToggleComponent = SelectToggleComponent;
+    exports.SelectionManager = SelectionManager;
     exports.SentenceCasePipe = SentenceCasePipe;
     exports.ServerConfigService = ServerConfigService;
     exports.SettingsDataService = SettingsDataService;