@vendure/admin-ui 1.5.2 → 1.6.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Injector, isDevMode, Component, Inject, HostListener, ChangeDetectionStrategy, ComponentFactoryResolver, APP_INITIALIZER, ViewChild, ViewContainerRef, EventEmitter, Input, Output, NgModule, ChangeDetectorRef, HostBinding, ContentChild, forwardRef, TemplateRef, ContentChildren, Directive, ElementRef, Optional, SkipSelf, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Injector, isDevMode, Component, Inject, HostListener, ChangeDetectionStrategy, ComponentFactoryResolver, APP_INITIALIZER, ViewChild, ViewContainerRef, EventEmitter, Input, Output, NgModule, ChangeDetectorRef, forwardRef, Optional, HostBinding, ContentChild, TemplateRef, ContentChildren, Directive, ElementRef, SkipSelf, ViewChildren, Pipe, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { Location, DOCUMENT, CommonModule, PlatformLocation } from '@angular/common';
 import { map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, concatMap, bufferCount, switchMap, mergeMap, mapTo, catchError, startWith, throttleTime, shareReplay, scan, debounceTime, delay } from 'rxjs/operators';
@@ -22,7 +22,7 @@ import * as i1$4 from '@angular/router';
 import { Router, NavigationEnd, PRIMARY_OUTLET, ActivatedRoute, RouterModule, ActivationStart } from '@angular/router';
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { flatten } from 'lodash';
-import { FormControl, NG_VALUE_ACCESSOR, FormBuilder, FormGroup, Validators, NG_VALIDATORS, NgControl, FormControlName, FormControlDirective, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, NgControl, FormControlName, FormControlDirective, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { setContext } from '@apollo/client/link/context';
 import { ApolloLink as ApolloLink$1 } from '@apollo/client/link/core';
@@ -252,35 +252,36 @@ class AdministratorDataService {
     }
 }
 
-const CONFIGURABLE_OPERATION_FRAGMENT = gql `
-    fragment ConfigurableOperation on ConfigurableOperation {
-        args {
-            name
-            value
-        }
-        code
-    }
+const CONFIGURABLE_OPERATION_FRAGMENT = gql `
+    fragment ConfigurableOperation on ConfigurableOperation {
+        args {
+            name
+            value
+        }
+        code
+    }
 `;
-const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql `
-    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
-        args {
-            name
-            type
-            required
-            defaultValue
-            list
-            ui
-            label
-        }
-        code
-        description
-    }
+const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql `
+    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
+        args {
+            name
+            type
+            required
+            defaultValue
+            list
+            ui
+            label
+            description
+        }
+        code
+        description
+    }
 `;
-const ERROR_RESULT_FRAGMENT = gql `
-    fragment ErrorResult on ErrorResult {
-        errorCode
-        message
-    }
+const ERROR_RESULT_FRAGMENT = gql `
+    fragment ErrorResult on ErrorResult {
+        errorCode
+        message
+    }
 `;
 
 const CURRENT_USER_FRAGMENT = gql `
@@ -2650,11 +2651,28 @@ const GET_COLLECTION_CONTENTS = gql `
                     id
                     productId
                     name
+                    sku
                 }
                 totalItems
             }
         }
     }
+`;
+const PREVIEW_COLLECTION_CONTENTS = gql `
+    query PreviewCollectionContents(
+        $input: PreviewCollectionVariantsInput!
+        $options: ProductVariantListOptions
+    ) {
+        previewCollectionVariants(input: $input, options: $options) {
+            items {
+                id
+                productId
+                name
+                sku
+            }
+            totalItems
+        }
+    }
 `;
 
 class CollectionDataService {
@@ -2710,6 +2728,9 @@ class CollectionDataService {
             id,
         });
     }
+    previewCollectionVariants(input, options) {
+        return this.baseDataService.query(PREVIEW_COLLECTION_CONTENTS, { input, options });
+    }
     getCollectionContents(id, take = 10, skip = 0, filterTerm) {
         const filter = filterTerm
             ? { name: { contains: filterTerm } }
@@ -3271,469 +3292,470 @@ class FacetDataService {
     }
 }
 
-const DISCOUNT_FRAGMENT = gql `
-    fragment Discount on Discount {
-        adjustmentSource
-        amount
-        amountWithTax
-        description
-        type
-    }
+const DISCOUNT_FRAGMENT = gql `
+    fragment Discount on Discount {
+        adjustmentSource
+        amount
+        amountWithTax
+        description
+        type
+    }
 `;
-const REFUND_FRAGMENT = gql `
-    fragment Refund on Refund {
-        id
-        state
-        items
-        shipping
-        adjustment
-        transactionId
-        paymentId
-    }
+const REFUND_FRAGMENT = gql `
+    fragment Refund on Refund {
+        id
+        state
+        items
+        shipping
+        adjustment
+        transactionId
+        paymentId
+    }
 `;
-const ORDER_ADDRESS_FRAGMENT = gql `
-    fragment OrderAddress on OrderAddress {
-        fullName
-        company
-        streetLine1
-        streetLine2
-        city
-        province
-        postalCode
-        country
-        countryCode
-        phoneNumber
-    }
+const ORDER_ADDRESS_FRAGMENT = gql `
+    fragment OrderAddress on OrderAddress {
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country
+        countryCode
+        phoneNumber
+    }
 `;
-const ORDER_FRAGMENT = gql `
-    fragment Order on Order {
-        id
-        createdAt
-        updatedAt
-        orderPlacedAt
-        code
-        state
-        nextStates
-        total
-        currencyCode
-        customer {
-            id
-            firstName
-            lastName
-        }
-        shippingLines {
-            shippingMethod {
-                name
-            }
-        }
-    }
+const ORDER_FRAGMENT = gql `
+    fragment Order on Order {
+        id
+        createdAt
+        updatedAt
+        orderPlacedAt
+        code
+        state
+        nextStates
+        total
+        totalWithTax
+        currencyCode
+        customer {
+            id
+            firstName
+            lastName
+        }
+        shippingLines {
+            shippingMethod {
+                name
+            }
+        }
+    }
 `;
-const FULFILLMENT_FRAGMENT = gql `
-    fragment Fulfillment on Fulfillment {
-        id
-        state
-        nextStates
-        createdAt
-        updatedAt
-        method
-        orderItems {
-            id
-        }
-        trackingCode
-    }
+const FULFILLMENT_FRAGMENT = gql `
+    fragment Fulfillment on Fulfillment {
+        id
+        state
+        nextStates
+        createdAt
+        updatedAt
+        method
+        orderItems {
+            id
+        }
+        trackingCode
+    }
 `;
-const ORDER_LINE_FRAGMENT = gql `
-    fragment OrderLine on OrderLine {
-        id
-        featuredAsset {
-            preview
-        }
-        productVariant {
-            id
-            name
-            sku
-            trackInventory
-            stockOnHand
-        }
-        discounts {
-            ...Discount
-        }
-        unitPrice
-        unitPriceWithTax
-        proratedUnitPrice
-        proratedUnitPriceWithTax
-        quantity
-        items {
-            id
-            unitPrice
-            unitPriceWithTax
-            taxRate
-            refundId
-            cancelled
-            fulfillment {
-                ...Fulfillment
-            }
-        }
-        linePrice
-        lineTax
-        linePriceWithTax
-        discountedLinePrice
-        discountedLinePriceWithTax
-    }
+const ORDER_LINE_FRAGMENT = gql `
+    fragment OrderLine on OrderLine {
+        id
+        featuredAsset {
+            preview
+        }
+        productVariant {
+            id
+            name
+            sku
+            trackInventory
+            stockOnHand
+        }
+        discounts {
+            ...Discount
+        }
+        unitPrice
+        unitPriceWithTax
+        proratedUnitPrice
+        proratedUnitPriceWithTax
+        quantity
+        items {
+            id
+            unitPrice
+            unitPriceWithTax
+            taxRate
+            refundId
+            cancelled
+            fulfillment {
+                ...Fulfillment
+            }
+        }
+        linePrice
+        lineTax
+        linePriceWithTax
+        discountedLinePrice
+        discountedLinePriceWithTax
+    }
 `;
-const ORDER_DETAIL_FRAGMENT = gql `
-    fragment OrderDetail on Order {
-        id
-        createdAt
-        updatedAt
-        code
-        state
-        nextStates
-        active
-        couponCodes
-        customer {
-            id
-            firstName
-            lastName
-        }
-        lines {
-            ...OrderLine
-        }
-        surcharges {
-            id
-            sku
-            description
-            price
-            priceWithTax
-            taxRate
-        }
-        discounts {
-            ...Discount
-        }
-        promotions {
-            id
-            couponCode
-        }
-        subTotal
-        subTotalWithTax
-        total
-        totalWithTax
-        currencyCode
-        shipping
-        shippingWithTax
-        shippingLines {
-            shippingMethod {
-                id
-                code
-                name
-                fulfillmentHandlerCode
-                description
-            }
-        }
-        taxSummary {
-            description
-            taxBase
-            taxRate
-            taxTotal
-        }
-        shippingAddress {
-            ...OrderAddress
-        }
-        billingAddress {
-            ...OrderAddress
-        }
-        payments {
-            id
-            createdAt
-            transactionId
-            amount
-            method
-            state
-            nextStates
-            errorMessage
-            metadata
-            refunds {
-                id
-                createdAt
-                state
-                items
-                adjustment
-                total
-                paymentId
-                reason
-                transactionId
-                method
-                metadata
-                orderItems {
-                    id
-                }
-            }
-        }
-        fulfillments {
-            ...Fulfillment
-        }
-        modifications {
-            id
-            createdAt
-            isSettled
-            priceChange
-            note
-            payment {
-                id
-                amount
-            }
-            orderItems {
-                id
-            }
-            refund {
-                id
-                paymentId
-                total
-            }
-            surcharges {
-                id
-            }
-        }
-    }
-    ${DISCOUNT_FRAGMENT}
-    ${ORDER_ADDRESS_FRAGMENT}
-    ${FULFILLMENT_FRAGMENT}
-    ${ORDER_LINE_FRAGMENT}
+const ORDER_DETAIL_FRAGMENT = gql `
+    fragment OrderDetail on Order {
+        id
+        createdAt
+        updatedAt
+        code
+        state
+        nextStates
+        active
+        couponCodes
+        customer {
+            id
+            firstName
+            lastName
+        }
+        lines {
+            ...OrderLine
+        }
+        surcharges {
+            id
+            sku
+            description
+            price
+            priceWithTax
+            taxRate
+        }
+        discounts {
+            ...Discount
+        }
+        promotions {
+            id
+            couponCode
+        }
+        subTotal
+        subTotalWithTax
+        total
+        totalWithTax
+        currencyCode
+        shipping
+        shippingWithTax
+        shippingLines {
+            shippingMethod {
+                id
+                code
+                name
+                fulfillmentHandlerCode
+                description
+            }
+        }
+        taxSummary {
+            description
+            taxBase
+            taxRate
+            taxTotal
+        }
+        shippingAddress {
+            ...OrderAddress
+        }
+        billingAddress {
+            ...OrderAddress
+        }
+        payments {
+            id
+            createdAt
+            transactionId
+            amount
+            method
+            state
+            nextStates
+            errorMessage
+            metadata
+            refunds {
+                id
+                createdAt
+                state
+                items
+                adjustment
+                total
+                paymentId
+                reason
+                transactionId
+                method
+                metadata
+                orderItems {
+                    id
+                }
+            }
+        }
+        fulfillments {
+            ...Fulfillment
+        }
+        modifications {
+            id
+            createdAt
+            isSettled
+            priceChange
+            note
+            payment {
+                id
+                amount
+            }
+            orderItems {
+                id
+            }
+            refund {
+                id
+                paymentId
+                total
+            }
+            surcharges {
+                id
+            }
+        }
+    }
+    ${DISCOUNT_FRAGMENT}
+    ${ORDER_ADDRESS_FRAGMENT}
+    ${FULFILLMENT_FRAGMENT}
+    ${ORDER_LINE_FRAGMENT}
+`;
+const GET_ORDERS_LIST = gql `
+    query GetOrderList($options: OrderListOptions) {
+        orders(options: $options) {
+            items {
+                ...Order
+            }
+            totalItems
+        }
+    }
+    ${ORDER_FRAGMENT}
 `;
-const GET_ORDERS_LIST = gql `
-    query GetOrderList($options: OrderListOptions) {
-        orders(options: $options) {
-            items {
-                ...Order
-            }
-            totalItems
-        }
-    }
-    ${ORDER_FRAGMENT}
+const GET_ORDER = gql `
+    query GetOrder($id: ID!) {
+        order(id: $id) {
+            ...OrderDetail
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+`;
+const SETTLE_PAYMENT = gql `
+    mutation SettlePayment($id: ID!) {
+        settlePayment(id: $id) {
+            ... on Payment {
+                id
+                transactionId
+                amount
+                method
+                state
+                metadata
+            }
+            ...ErrorResult
+            ... on SettlePaymentError {
+                paymentErrorMessage
+            }
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+            ... on OrderStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const TRANSITION_PAYMENT_TO_STATE = gql `
+    mutation TransitionPaymentToState($id: ID!, $state: String!) {
+        transitionPaymentToState(id: $id, state: $state) {
+            ... on Payment {
+                id
+                transactionId
+                amount
+                method
+                state
+                metadata
+            }
+            ...ErrorResult
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const CREATE_FULFILLMENT = gql `
+    mutation CreateFulfillment($input: FulfillOrderInput!) {
+        addFulfillmentToOrder(input: $input) {
+            ...Fulfillment
+            ... on CreateFulfillmentError {
+                errorCode
+                message
+                fulfillmentHandlerError
+            }
+            ... on FulfillmentStateTransitionError {
+                errorCode
+                message
+                transitionError
+            }
+            ...ErrorResult
+        }
+    }
+    ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const CANCEL_ORDER = gql `
+    mutation CancelOrder($input: CancelOrderInput!) {
+        cancelOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const REFUND_ORDER = gql `
+    mutation RefundOrder($input: RefundOrderInput!) {
+        refundOrder(input: $input) {
+            ...Refund
+            ...ErrorResult
+        }
+    }
+    ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const SETTLE_REFUND = gql `
+    mutation SettleRefund($input: SettleRefundInput!) {
+        settleRefund(input: $input) {
+            ...Refund
+            ...ErrorResult
+        }
+    }
+    ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const GET_ORDER_HISTORY = gql `
+    query GetOrderHistory($id: ID!, $options: HistoryEntryListOptions) {
+        order(id: $id) {
+            id
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
 `;
-const GET_ORDER = gql `
-    query GetOrder($id: ID!) {
-        order(id: $id) {
-            ...OrderDetail
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
+const ADD_NOTE_TO_ORDER = gql `
+    mutation AddNoteToOrder($input: AddNoteToOrderInput!) {
+        addNoteToOrder(input: $input) {
+            id
+        }
+    }
 `;
-const SETTLE_PAYMENT = gql `
-    mutation SettlePayment($id: ID!) {
-        settlePayment(id: $id) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
-            ...ErrorResult
-            ... on SettlePaymentError {
-                paymentErrorMessage
-            }
-            ... on PaymentStateTransitionError {
-                transitionError
-            }
-            ... on OrderStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ERROR_RESULT_FRAGMENT}
+const UPDATE_ORDER_NOTE = gql `
+    mutation UpdateOrderNote($input: UpdateOrderNoteInput!) {
+        updateOrderNote(input: $input) {
+            id
+            data
+            isPublic
+        }
+    }
 `;
-const TRANSITION_PAYMENT_TO_STATE = gql `
-    mutation TransitionPaymentToState($id: ID!, $state: String!) {
-        transitionPaymentToState(id: $id, state: $state) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
-            ...ErrorResult
-            ... on PaymentStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ERROR_RESULT_FRAGMENT}
+const DELETE_ORDER_NOTE = gql `
+    mutation DeleteOrderNote($id: ID!) {
+        deleteOrderNote(id: $id) {
+            result
+            message
+        }
+    }
 `;
-const CREATE_FULFILLMENT = gql `
-    mutation CreateFulfillment($input: FulfillOrderInput!) {
-        addFulfillmentToOrder(input: $input) {
-            ...Fulfillment
-            ... on CreateFulfillmentError {
-                errorCode
-                message
-                fulfillmentHandlerError
-            }
-            ... on FulfillmentStateTransitionError {
-                errorCode
-                message
-                transitionError
-            }
-            ...ErrorResult
-        }
-    }
-    ${FULFILLMENT_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const TRANSITION_ORDER_TO_STATE = gql `
+    mutation TransitionOrderToState($id: ID!, $state: String!) {
+        transitionOrderToState(id: $id, state: $state) {
+            ...Order
+            ...ErrorResult
+            ... on OrderStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ORDER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const CANCEL_ORDER = gql `
-    mutation CancelOrder($input: CancelOrderInput!) {
-        cancelOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const UPDATE_ORDER_CUSTOM_FIELDS = gql `
+    mutation UpdateOrderCustomFields($input: UpdateOrderInput!) {
+        setOrderCustomFields(input: $input) {
+            ...Order
+        }
+    }
+    ${ORDER_FRAGMENT}
+`;
+const TRANSITION_FULFILLMENT_TO_STATE = gql `
+    mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
+        transitionFulfillmentToState(id: $id, state: $state) {
+            ...Fulfillment
+            ...ErrorResult
+            ... on FulfillmentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const GET_ORDER_SUMMARY = gql `
+    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
+        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
+            totalItems
+            items {
+                id
+                total
+                currencyCode
+            }
+        }
+    }
 `;
-const REFUND_ORDER = gql `
-    mutation RefundOrder($input: RefundOrderInput!) {
-        refundOrder(input: $input) {
-            ...Refund
-            ...ErrorResult
-        }
+const MODIFY_ORDER = gql `
+    mutation ModifyOrder($input: ModifyOrderInput!) {
+        modifyOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+const ADD_MANUAL_PAYMENT_TO_ORDER = gql `
+    mutation AddManualPayment($input: ManualPaymentInput!) {
+        addManualPaymentToOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
+`;
+
+class OrderDataService {
+    constructor(baseDataService) {
+        this.baseDataService = baseDataService;
     }
-    ${REFUND_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-const SETTLE_REFUND = gql `
-    mutation SettleRefund($input: SettleRefundInput!) {
-        settleRefund(input: $input) {
-            ...Refund
-            ...ErrorResult
-        }
-    }
-    ${REFUND_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-const GET_ORDER_HISTORY = gql `
-    query GetOrderHistory($id: ID!, $options: HistoryEntryListOptions) {
-        order(id: $id) {
-            id
-            history(options: $options) {
-                totalItems
-                items {
-                    id
-                    type
-                    createdAt
-                    isPublic
-                    administrator {
-                        id
-                        firstName
-                        lastName
-                    }
-                    data
-                }
-            }
-        }
-    }
-`;
-const ADD_NOTE_TO_ORDER = gql `
-    mutation AddNoteToOrder($input: AddNoteToOrderInput!) {
-        addNoteToOrder(input: $input) {
-            id
-        }
-    }
-`;
-const UPDATE_ORDER_NOTE = gql `
-    mutation UpdateOrderNote($input: UpdateOrderNoteInput!) {
-        updateOrderNote(input: $input) {
-            id
-            data
-            isPublic
-        }
-    }
-`;
-const DELETE_ORDER_NOTE = gql `
-    mutation DeleteOrderNote($id: ID!) {
-        deleteOrderNote(id: $id) {
-            result
-            message
-        }
-    }
-`;
-const TRANSITION_ORDER_TO_STATE = gql `
-    mutation TransitionOrderToState($id: ID!, $state: String!) {
-        transitionOrderToState(id: $id, state: $state) {
-            ...Order
-            ...ErrorResult
-            ... on OrderStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ORDER_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-const UPDATE_ORDER_CUSTOM_FIELDS = gql `
-    mutation UpdateOrderCustomFields($input: UpdateOrderInput!) {
-        setOrderCustomFields(input: $input) {
-            ...Order
-        }
-    }
-    ${ORDER_FRAGMENT}
-`;
-const TRANSITION_FULFILLMENT_TO_STATE = gql `
-    mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
-        transitionFulfillmentToState(id: $id, state: $state) {
-            ...Fulfillment
-            ...ErrorResult
-            ... on FulfillmentStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${FULFILLMENT_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-const GET_ORDER_SUMMARY = gql `
-    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
-        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
-            totalItems
-            items {
-                id
-                total
-                currencyCode
-            }
-        }
-    }
-`;
-const MODIFY_ORDER = gql `
-    mutation ModifyOrder($input: ModifyOrderInput!) {
-        modifyOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-const ADD_MANUAL_PAYMENT_TO_ORDER = gql `
-    mutation AddManualPayment($input: ManualPaymentInput!) {
-        addManualPaymentToOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
-`;
-
-class OrderDataService {
-    constructor(baseDataService) {
-        this.baseDataService = baseDataService;
-    }
-    getOrders(options = { take: 10 }) {
-        return this.baseDataService.query(GET_ORDERS_LIST, {
-            options,
-        });
+    getOrders(options = { take: 10 }) {
+        return this.baseDataService.query(GET_ORDERS_LIST, {
+            options,
+        });
     }
     getOrder(id) {
         return this.baseDataService.query(GET_ORDER, { id });
@@ -6384,6 +6406,7 @@ class AppShellComponent {
         this.modalService = modalService;
         this.localStorageService = localStorageService;
         this.availableLanguages = [];
+        this.hideVendureBranding = getAppConfig().hideVendureBranding;
     }
     ngOnInit() {
         this.userName$ = this.dataService.client
@@ -6429,8 +6452,8 @@ class AppShellComponent {
 AppShellComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-app-shell',
-                template: "<clr-main-container>\r\n    <clr-header>\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\"><img src=\"assets/logo-75px.png\" class=\"logo\" /></a>\r\n        </div>\r\n        <div class=\"header-nav\"></div>\r\n        <div class=\"header-actions\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n            <vdr-user-menu [userName]=\"userName$ | async\"\r\n                           [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 = () => [
@@ -7248,7 +7271,7 @@ class MainNavComponent {
 MainNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-main-nav',
-                template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n",
+                template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                    (click)=\"item.onClick && item.onClick($event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n",
                 styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"]
             },] }
 ];
@@ -7404,194 +7427,260 @@ UserMenuComponent.propDecorators = {
 
 // tslint:disable
 const result = {
-    possibleTypes: {
-        AddFulfillmentToOrderResult: [
-            'Fulfillment',
-            'EmptyOrderLineSelectionError',
-            'ItemsAlreadyFulfilledError',
-            'InsufficientStockOnHandError',
-            'InvalidFulfillmentHandlerError',
-            'FulfillmentStateTransitionError',
-            'CreateFulfillmentError',
+    "possibleTypes": {
+        "AddFulfillmentToOrderResult": [
+            "Fulfillment",
+            "EmptyOrderLineSelectionError",
+            "ItemsAlreadyFulfilledError",
+            "InsufficientStockOnHandError",
+            "InvalidFulfillmentHandlerError",
+            "FulfillmentStateTransitionError",
+            "CreateFulfillmentError"
         ],
-        AddManualPaymentToOrderResult: ['Order', 'ManualPaymentStateError'],
-        AuthenticationResult: ['CurrentUser', 'InvalidCredentialsError'],
-        CancelOrderResult: [
-            'Order',
-            'EmptyOrderLineSelectionError',
-            'QuantityTooGreatError',
-            'MultipleOrderError',
-            'CancelActiveOrderError',
-            'OrderStateTransitionError',
+        "AddManualPaymentToOrderResult": [
+            "Order",
+            "ManualPaymentStateError"
         ],
-        CreateAssetResult: ['Asset', 'MimeTypeError'],
-        CreateChannelResult: ['Channel', 'LanguageNotAvailableError'],
-        CreateCustomerResult: ['Customer', 'EmailAddressConflictError'],
-        CreatePromotionResult: ['Promotion', 'MissingConditionsError'],
-        CustomField: [
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'StringCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "AuthenticationResult": [
+            "CurrentUser",
+            "InvalidCredentialsError"
         ],
-        CustomFieldConfig: [
-            'StringCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "CancelOrderResult": [
+            "Order",
+            "EmptyOrderLineSelectionError",
+            "QuantityTooGreatError",
+            "MultipleOrderError",
+            "CancelActiveOrderError",
+            "OrderStateTransitionError"
         ],
-        ErrorResult: [
-            'AlreadyRefundedError',
-            'CancelActiveOrderError',
-            'ChannelDefaultLanguageError',
-            '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
@@ -7656,7 +7745,7 @@ function getClientDefaults(localStorageService) {
     };
 }
 
-const ɵ0$2 = (_, args, { cache }) => {
+const ɵ0$3 = (_, args, { cache }) => {
     return updateRequestsInFlight(cache, 1);
 }, ɵ1 = (_, args, { cache }) => {
     return updateRequestsInFlight(cache, -1);
@@ -7746,7 +7835,7 @@ const ɵ0$2 = (_, args, { cache }) => {
 };
 const clientResolvers = {
     Mutation: {
-        requestStarted: ɵ0$2,
+        requestStarted: ɵ0$3,
         requestCompleted: ɵ1,
         setAsLoggedIn: ɵ2,
         setAsLoggedOut: ɵ3,
@@ -8170,7 +8259,7 @@ function createApollo(localStorageService, fetchAdapter, injector) {
         resolvers: clientResolvers,
     };
 }
-const ɵ0$1 = initializeServerConfigService;
+const ɵ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.
@@ -8196,7 +8285,7 @@ DataModule.decorators = [
                     {
                         provide: APP_INITIALIZER,
                         multi: true,
-                        useFactory: ɵ0$1,
+                        useFactory: ɵ0$2,
                         deps: [ServerConfigService],
                     },
                 ],
@@ -8474,414 +8563,949 @@ JsonEditorFormInputComponent.propDecorators = {
 };
 
 /**
- * @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.
  */
-class CurrencyFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.currencyCode$ = this.dataService.settings
-            .getActiveChannel()
-            .mapStream(data => data.activeChannel.currencyCode);
+function getConfigArgValue(value) {
+    try {
+        return value ? JSON.parse(value) : undefined;
+    }
+    catch (e) {
+        return value;
     }
 }
-CurrencyFormInputComponent.id = 'currency-form-input';
-CurrencyFormInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-currency-form-input',
-                template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-CurrencyFormInputComponent.ctorParameters = () => [
-    { type: DataService }
-];
-CurrencyFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
-
+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.
  */
-class CustomerGroupFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
+function configurableDefinitionToInstance(def) {
+    return Object.assign(Object.assign({}, def), { args: def.args.map(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((value, j) => ({
+            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) {
+    if (!def || !value) {
+        return false;
     }
-    ngOnInit() {
-        this.customerGroups$ = this.dataService.customer
-            .getCustomerGroupList({
-            take: 1000,
-        })
-            .mapSingle(res => res.customerGroups.items)
-            .pipe(startWith([]));
+    if (def.code !== value.code) {
+        return false;
     }
-    selectGroup(group) {
-        this.formControl.setValue(group.id);
+    for (const argDef of def.args) {
+        const argVal = value.args[argDef.name];
+        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
+            return false;
+        }
     }
+    return true;
 }
-CustomerGroupFormInputComponent.id = 'customer-group-form-input';
-CustomerGroupFormInputComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-CustomerGroupFormInputComponent.ctorParameters = () => [
-    { type: DataService }
-];
-CustomerGroupFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
-
 /**
- * @description
- * Allows selection of a datetime. Default input for `datetime` type fields.
- *
- * @docsCategory custom-input-components
- * @docsPage default-inputs
+ * Returns a default value based on the type of the config arg.
  */
-class DateFormInputComponent {
-    get min() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+function getDefaultConfigArgValue(arg) {
+    if (arg.list) {
+        return [];
     }
-    get max() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    if (arg.defaultValue) {
+        return arg.defaultValue;
     }
-    get yearRange() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.yearRange) || this.config.yearRange;
+    const type = arg.type;
+    switch (type) {
+        case 'string':
+        case 'datetime':
+        case 'float':
+        case 'ID':
+        case 'int':
+            return null;
+        case 'boolean':
+            return false;
+        default:
+            assertNever(type);
     }
-}
-DateFormInputComponent.id = 'date-form-input';
-DateFormInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-date-form-input',
-                template: "<vdr-datetime-picker\r\n    [formControl]=\"formControl\"\r\n    [min]=\"min\"\r\n    [max]=\"max\"\r\n    [yearRange]=\"yearRange\"\r\n    [readonly]=\"readonly\"\r\n>\r\n</vdr-datetime-picker>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-DateFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
+}
 
 /**
- * @description
- * Allows the selection of multiple FacetValues via an autocomplete select input.
- * Should be used with `ID` type **list** fields which represent FacetValue IDs.
- *
- * @docsCategory custom-input-components
- * @docsPage default-inputs
+ * Interpolates the description of an ConfigurableOperation with the given values.
  */
-class FacetValueFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.isListInput = true;
+function interpolateDescription(operation, values) {
+    if (!operation) {
+        return '';
+    }
+    const templateString = operation.description;
+    const interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, (substring, argName) => {
+        const normalizedArgName = argName.toLowerCase();
+        const value = values[normalizedArgName];
+        if (value == null) {
+            return '_';
+        }
+        let formatted = value;
+        const argDef = operation.args.find(arg => 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.
+ */
+class ConfigurableInputComponent {
+    constructor() {
+        this.readonly = false;
+        this.removable = true;
+        this.position = 0;
+        this.remove = new EventEmitter();
+        this.argValues = {};
+        this.form = new FormGroup({});
+        this.positionChangeSubject = new BehaviorSubject(0);
+    }
+    interpolateDescription() {
+        if (this.operationDefinition) {
+            return interpolateDescription(this.operationDefinition, this.form.value);
+        }
+        else {
+            return '';
+        }
     }
     ngOnInit() {
-        this.facets$ = this.dataService.facet
-            .getAllFacets()
-            .mapSingle(data => data.facets.items)
-            .pipe(shareReplay(1));
+        this.positionChange$ = this.positionChangeSubject.asObservable();
+    }
+    ngOnChanges(changes) {
+        if ('operation' in changes || 'operationDefinition' in changes) {
+            this.createForm();
+        }
+        if ('position' in changes) {
+            this.positionChangeSubject.next(this.position);
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    writeValue(value) {
+        if (value) {
+            this.form.patchValue(value);
+        }
+    }
+    trackByName(index, arg) {
+        return arg.name;
+    }
+    getArgDef(arg) {
+        var _a;
+        return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(a => a.name === arg.name);
+    }
+    createForm() {
+        var _a, _b;
+        if (!this.operation) {
+            return;
+        }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.form = new FormGroup({});
+        this.form.__id = Math.random().toString(36).substr(10);
+        if (this.operation.args) {
+            for (const arg of ((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []) {
+                let value = (_b = this.operation.args.find(a => a.name === arg.name)) === null || _b === void 0 ? void 0 : _b.value;
+                if (value === undefined) {
+                    value = getDefaultConfigArgValue(arg);
+                }
+                const validators = arg.list ? undefined : arg.required ? Validators.required : undefined;
+                this.form.addControl(arg.name, new FormControl(value, validators));
+            }
+        }
+        this.subscription = this.form.valueChanges.subscribe(value => {
+            if (this.onChange) {
+                this.onChange({
+                    code: this.operation && this.operation.code,
+                    args: value,
+                });
+            }
+            if (this.onTouch) {
+                this.onTouch();
+            }
+        });
+    }
+    validate(c) {
+        if (this.form.invalid) {
+            return {
+                required: true,
+            };
+        }
+        return null;
     }
 }
-FacetValueFormInputComponent.id = 'facet-value-form-input';
-FacetValueFormInputComponent.decorators = [
+ConfigurableInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-facet-value-form-input',
-                template: "<vdr-facet-value-selector\r\n    *ngIf=\"facets$ | async as facets\"\r\n    [readonly]=\"readonly\"\r\n    [facets]=\"facets\"\r\n    [formControl]=\"formControl\"\r\n></vdr-facet-value-selector>\r\n",
+                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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: ConfigurableInputComponent,
+                        multi: true,
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => 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"]
             },] }
 ];
-FacetValueFormInputComponent.ctorParameters = () => [
-    { type: DataService }
-];
+ConfigurableInputComponent.propDecorators = {
+    operation: [{ type: Input }],
+    operationDefinition: [{ type: Input }],
+    readonly: [{ type: Input }],
+    removable: [{ type: Input }],
+    position: [{ type: Input }],
+    remove: [{ type: Output }]
+};
 
 /**
  * @description
- * Displays a number input. Default input for `int` and `float` type fields.
+ * A special input used to display the "Combination mode" AND/OR toggle.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class NumberFormInputComponent {
-    get prefix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
-    }
-    get suffix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+class CombinationModeFormInputComponent {
+    constructor(configurableInputComponent) {
+        this.configurableInputComponent = configurableInputComponent;
     }
-    get min() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    ngOnInit() {
+        const selectable$ = this.configurableInputComponent
+            ? this.configurableInputComponent.positionChange$.pipe(map(position => 0 < position))
+            : of(true);
+        this.selectable$ = selectable$.pipe(tap(selectable => {
+            if (!selectable) {
+                this.formControl.setValue(true, { emitEvent: false });
+            }
+        }));
     }
-    get max() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    setCombinationModeAnd() {
+        this.formControl.setValue(true);
     }
-    get step() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.step) || this.config.step;
+    setCombinationModeOr() {
+        this.formControl.setValue(false);
     }
 }
-NumberFormInputComponent.id = 'number-form-input';
-NumberFormInputComponent.decorators = [
+CombinationModeFormInputComponent.id = 'combination-mode-form-input';
+CombinationModeFormInputComponent.decorators = [
     { type: 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-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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                styles: [".mode-select{text-transform:uppercase}\n"]
             },] }
 ];
-NumberFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
+CombinationModeFormInputComponent.ctorParameters = () => [
+    { type: ConfigurableInputComponent, decorators: [{ type: Optional }] }
+];
 
 /**
  * @description
- * Displays a password text input. Should be used with `string` type fields.
+ * An input for monetary values. Should be used with `int` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class PasswordFormInputComponent {
+class CurrencyFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.currencyCode$ = this.dataService.settings
+            .getActiveChannel()
+            .mapStream(data => data.activeChannel.currencyCode);
+    }
 }
-PasswordFormInputComponent.id = 'password-form-input';
-PasswordFormInputComponent.decorators = [
+CurrencyFormInputComponent.id = 'currency-form-input';
+CurrencyFormInputComponent.decorators = [
     { type: 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-currency-form-input',
+                template: "<vdr-currency-input\r\n    [formControl]=\"formControl\"\r\n    [readonly]=\"readonly\"\r\n    [currencyCode]=\"currencyCode$ | async\"\r\n></vdr-currency-input>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
-];
+];
+CurrencyFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
+CurrencyFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
 
 /**
  * @description
- * Allows the selection of multiple ProductVariants via an autocomplete select input.
- * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+ * Allows the selection of a Customer via an autocomplete select input.
+ * Should be used with `ID` type fields which represent Customer IDs.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class ProductSelectorFormInputComponent {
+class CustomerGroupFormInputComponent {
     constructor(dataService) {
         this.dataService = dataService;
-        this.isListInput = true;
     }
     ngOnInit() {
-        this.formControl.setValidators([
-            control => {
-                if (!control.value || !control.value.length) {
-                    return {
-                        atLeastOne: { length: control.value.length },
-                    };
-                }
-                return null;
-            },
-        ]);
-        this.selection$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value), switchMap(value => {
-            if (Array.isArray(value) && 0 < value.length) {
-                return forkJoin(value.map(id => this.dataService.product
-                    .getProductVariant(id)
-                    .mapSingle(data => data.productVariant)));
-            }
-            return of([]);
-        }), map(variants => variants.filter(notNullOrUndefined)));
+        this.customerGroups$ = this.dataService.customer
+            .getCustomerGroupList({
+            take: 1000,
+        })
+            .mapSingle(res => res.customerGroups.items)
+            .pipe(startWith([]));
     }
-    addProductVariant(product) {
-        const value = this.formControl.value;
-        this.formControl.setValue([...new Set([...value, product.productVariantId])]);
-    }
-    removeProductVariant(id) {
-        const value = this.formControl.value;
-        this.formControl.setValue(value.filter(_id => _id !== id));
+    selectGroup(group) {
+        this.formControl.setValue(group.id);
     }
 }
-ProductSelectorFormInputComponent.id = 'product-selector-form-input';
-ProductSelectorFormInputComponent.decorators = [
+CustomerGroupFormInputComponent.id = 'customer-group-form-input';
+CustomerGroupFormInputComponent.decorators = [
     { type: 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-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: 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 = () => [
+CustomerGroupFormInputComponent.ctorParameters = () => [
     { type: DataService }
-];
+];
+CustomerGroupFormInputComponent.propDecorators = {
+    readonly: [{ type: 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 selection of a datetime. Default input for `datetime` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class RelationFormInputComponent {
+class DateFormInputComponent {
+    get min() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    }
+    get max() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    }
+    get yearRange() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.yearRange) || this.config.yearRange;
+    }
 }
-RelationFormInputComponent.id = 'relation-form-input';
-RelationFormInputComponent.decorators = [
+DateFormInputComponent.id = 'date-form-input';
+DateFormInputComponent.decorators = [
     { type: 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-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: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
+                styles: [""]
             },] }
 ];
-RelationFormInputComponent.propDecorators = {
+DateFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
 /**
  * @description
- * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ * Allows the selection of multiple FacetValues via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent FacetValue IDs.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class RichTextFormInputComponent {
+class FacetValueFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.isListInput = true;
+    }
+    ngOnInit() {
+        this.facets$ = this.dataService.facet
+            .getAllFacets()
+            .mapSingle(data => data.facets.items)
+            .pipe(shareReplay(1));
+    }
 }
-RichTextFormInputComponent.id = 'rich-text-form-input';
-RichTextFormInputComponent.decorators = [
+FacetValueFormInputComponent.id = 'facet-value-form-input';
+FacetValueFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-rich-text-form-input',
-                template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n",
+                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: ChangeDetectionStrategy.OnPush,
-                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+                styles: [""]
             },] }
+];
+FacetValueFormInputComponent.ctorParameters = () => [
+    { type: DataService }
 ];
 
 /**
  * @description
- * Uses a select input to allow the selection of a string value. Should be used with
- * `string` type fields with options.
+ * Displays a number input. Default input for `int` and `float` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class SelectFormInputComponent {
-    get options() {
+class NumberFormInputComponent {
+    get prefix() {
         var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+    }
+    get suffix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+    }
+    get min() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    }
+    get max() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    }
+    get step() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.step) || this.config.step;
     }
 }
-SelectFormInputComponent.id = 'select-form-input';
-SelectFormInputComponent.decorators = [
+NumberFormInputComponent.id = 'number-form-input';
+NumberFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-select-form-input',
-                template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\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: ChangeDetectionStrategy.OnPush,
-                styles: ["select{width:100%}\n"]
+                styles: [""]
             },] }
 ];
-SelectFormInputComponent.propDecorators = {
+NumberFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
 /**
  * @description
- * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+ * Displays a password text input. Should be used with `string` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class TextFormInputComponent {
-    get prefix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
-    }
-    get suffix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
-    }
+class PasswordFormInputComponent {
 }
-TextFormInputComponent.id = 'text-form-input';
-TextFormInputComponent.decorators = [
+PasswordFormInputComponent.id = 'password-form-input';
+PasswordFormInputComponent.decorators = [
     { type: 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-password-form-input',
+                template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["input{width:100%}\n"]
+                styles: [""]
             },] }
 ];
 
 /**
  * @description
- * Uses textarea form input. This is the default input for `text` type fields.
- *
- * @docsCategory custom-input-components
- * @docsPage default-inputs
+ * A helper class used to manage selection of list items. Supports multiple selection via
+ * cmd/ctrl/shift key.
  */
-class TextareaFormInputComponent {
-    get spellcheck() {
-        return this.config.spellcheck === true;
+class SelectionManager {
+    constructor(options) {
+        this.options = options;
+        this._selection = [];
+        this.items = [];
+    }
+    get selection() {
+        return this._selection;
+    }
+    setMultiSelect(isMultiSelect) {
+        this.options.multiSelect = isMultiSelect;
+    }
+    setCurrentItems(items) {
+        this.items = items;
+    }
+    toggleSelection(item, event) {
+        const { multiSelect, itemsAreEqual, additiveMode } = this.options;
+        const index = this._selection.findIndex(a => itemsAreEqual(a, item));
+        if (multiSelect && (event === null || event === void 0 ? void 0 : event.shiftKey) && 1 <= this._selection.length) {
+            const lastSelection = this._selection[this._selection.length - 1];
+            const lastSelectionIndex = this.items.findIndex(a => itemsAreEqual(a, lastSelection));
+            const currentIndex = this.items.findIndex(a => itemsAreEqual(a, item));
+            const start = currentIndex < lastSelectionIndex ? currentIndex : lastSelectionIndex;
+            const end = currentIndex > lastSelectionIndex ? currentIndex + 1 : lastSelectionIndex;
+            this._selection.push(...this.items.slice(start, end).filter(a => !this._selection.find(s => 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(x => (Object.assign({}, x)));
+    }
+    selectMultiple(items) {
+        this._selection = items;
+    }
+    isSelected(item) {
+        return !!this._selection.find(a => this.options.itemsAreEqual(a, item));
+    }
+    lastSelected() {
+        return this._selection[this._selection.length - 1];
+    }
+}
+
+class ProductMultiSelectorDialogComponent {
+    constructor(dataService, changeDetector) {
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.mode = 'product';
+        this.initialSelectionIds = [];
+        this.searchTerm$ = new BehaviorSubject('');
+        this.searchFacetValueIds$ = new BehaviorSubject([]);
+        this.paginationConfig = {
+            currentPage: 1,
+            itemsPerPage: 25,
+            totalItems: 1,
+        };
+        this.paginationConfig$ = new BehaviorSubject(this.paginationConfig);
+    }
+    ngOnInit() {
+        const idFn = this.mode === 'product'
+            ? (a, b) => a.productId === b.productId
+            : (a, b) => a.productVariantId === b.productVariantId;
+        this.selectionManager = new SelectionManager({
+            multiSelect: true,
+            itemsAreEqual: idFn,
+            additiveMode: true,
+        });
+        const searchQueryResult = this.dataService.product.searchProducts('', this.paginationConfig.itemsPerPage, 0);
+        const result$ = combineLatest(this.searchTerm$, this.searchFacetValueIds$, this.paginationConfig$).subscribe(([term, facetValueIds, pagination]) => {
+            const take = +pagination.itemsPerPage;
+            const skip = (pagination.currentPage - 1) * take;
+            return searchQueryResult.ref.refetch({
+                input: { skip, take, term, facetValueIds, groupByProduct: this.mode === 'product' },
+            });
+        });
+        this.items$ = searchQueryResult.stream$.pipe(tap(data => {
+            this.paginationConfig.totalItems = data.search.totalItems;
+            this.selectionManager.setCurrentItems(data.search.items);
+        }), map(data => data.search.items));
+        this.facetValues$ = searchQueryResult.stream$.pipe(map(data => data.search.facetValues));
+        if (this.initialSelectionIds.length) {
+            if (this.mode === 'product') {
+                this.dataService.product
+                    .getProducts({
+                    filter: {
+                        id: {
+                            in: this.initialSelectionIds,
+                        },
+                    },
+                })
+                    .single$.subscribe(({ products }) => {
+                    this.selectionManager.selectMultiple(products.items.map(product => ({
+                        productId: product.id,
+                        productName: product.name,
+                    })));
+                    this.changeDetector.markForCheck();
+                });
+            }
+            else {
+                this.dataService.product
+                    .getProductVariants({
+                    filter: {
+                        id: {
+                            in: this.initialSelectionIds,
+                        },
+                    },
+                })
+                    .single$.subscribe(({ productVariants }) => {
+                    this.selectionManager.selectMultiple(productVariants.items.map(variant => ({
+                        productVariantId: variant.id,
+                        productVariantName: variant.name,
+                    })));
+                    this.changeDetector.markForCheck();
+                });
+            }
+        }
+    }
+    trackByFn(index, item) {
+        return item.productId;
+    }
+    setSearchTerm(term) {
+        this.searchTerm$.next(term);
+    }
+    setFacetValueIds(ids) {
+        this.searchFacetValueIds$.next(ids);
+    }
+    toggleSelection(item, event) {
+        this.selectionManager.toggleSelection(item, event);
+    }
+    clearSelection() {
+        this.selectionManager.selectMultiple([]);
+    }
+    isSelected(item) {
+        return this.selectionManager.isSelected(item);
+    }
+    entityInfoClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    pageChange(page) {
+        this.paginationConfig.currentPage = page;
+        this.paginationConfig$.next(this.paginationConfig);
+    }
+    itemsPerPageChange(itemsPerPage) {
+        this.paginationConfig.itemsPerPage = itemsPerPage;
+        this.paginationConfig$.next(this.paginationConfig);
+    }
+    select() {
+        this.resolveWith(this.selectionManager.selection);
+    }
+    cancel() {
+        this.resolveWith();
     }
 }
-TextareaFormInputComponent.id = 'textarea-form-input';
-TextareaFormInputComponent.decorators = [
+ProductMultiSelectorDialogComponent.decorators = [
     { type: 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-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: ChangeDetectionStrategy.OnPush,
-                styles: [":host textarea{resize:both;height:6rem;width:100%}\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"]
             },] }
+];
+ProductMultiSelectorDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: ChangeDetectorRef }
 ];
 
-const 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:
- *
+class ProductMultiSelectorFormInputComponent {
+    constructor(modalService, dataService, changeDetector) {
+        this.modalService = modalService;
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.mode = 'product';
+        this.isListInput = true;
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.mode = (_b = (_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.selectionMode) !== null && _b !== void 0 ? _b : 'product';
+    }
+    select() {
+        this.modalService
+            .fromComponent(ProductMultiSelectorDialogComponent, {
+            size: 'xl',
+            locals: {
+                mode: this.mode,
+                initialSelectionIds: this.formControl.value,
+            },
+        })
+            .subscribe(selection => {
+            if (selection) {
+                this.formControl.setValue(selection.map(item => this.mode === 'product' ? item.productId : item.productVariantId));
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+}
+ProductMultiSelectorFormInputComponent.id = 'product-multi-form-input';
+ProductMultiSelectorFormInputComponent.decorators = [
+    { type: Component, args: [{
+                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: ChangeDetectionStrategy.OnPush,
+                styles: [""]
+            },] }
+];
+ProductMultiSelectorFormInputComponent.ctorParameters = () => [
+    { type: ModalService },
+    { type: DataService },
+    { type: ChangeDetectorRef }
+];
+ProductMultiSelectorFormInputComponent.propDecorators = {
+    config: [{ type: Input }],
+    formControl: [{ type: Input }],
+    readonly: [{ type: 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
+ */
+class ProductSelectorFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.isListInput = true;
+    }
+    ngOnInit() {
+        this.formControl.setValidators([
+            control => {
+                if (!control.value || !control.value.length) {
+                    return {
+                        atLeastOne: { length: control.value.length },
+                    };
+                }
+                return null;
+            },
+        ]);
+        this.selection$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value), switchMap(value => {
+            if (Array.isArray(value) && 0 < value.length) {
+                return forkJoin(value.map(id => this.dataService.product
+                    .getProductVariant(id)
+                    .mapSingle(data => data.productVariant)));
+            }
+            return of([]);
+        }), map(variants => variants.filter(notNullOrUndefined)));
+    }
+    addProductVariant(product) {
+        const value = this.formControl.value;
+        this.formControl.setValue([...new Set([...value, product.productVariantId])]);
+    }
+    removeProductVariant(id) {
+        const value = this.formControl.value;
+        this.formControl.setValue(value.filter(_id => _id !== id));
+    }
+}
+ProductSelectorFormInputComponent.id = 'product-selector-form-input';
+ProductSelectorFormInputComponent.decorators = [
+    { type: 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: 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"]
+            },] }
+];
+ProductSelectorFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
+
+/**
+ * @description
+ * The default input component for `relation` type custom fields. Allows the selection
+ * of a ProductVariant, Product, Customer or Asset. For other entity types, a custom
+ * implementation will need to be defined. See {@link registerFormInputComponent}.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class RelationFormInputComponent {
+}
+RelationFormInputComponent.id = 'relation-form-input';
+RelationFormInputComponent.decorators = [
+    { type: 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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
+            },] }
+];
+RelationFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
+
+/**
+ * @description
+ * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class RichTextFormInputComponent {
+}
+RichTextFormInputComponent.id = 'rich-text-form-input';
+RichTextFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-rich-text-form-input',
+                template: "<vdr-rich-text-editor\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n></vdr-rich-text-editor>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+            },] }
+];
+
+/**
+ * @description
+ * Uses a select input to allow the selection of a string value. Should be used with
+ * `string` type fields with options.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class SelectFormInputComponent {
+    get options() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
+    }
+}
+SelectFormInputComponent.id = 'select-form-input';
+SelectFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-select-form-input',
+                template: "<select clrSelect [formControl]=\"formControl\" [vdrDisabled]=\"readonly\">\r\n    <option *ngIf=\"config.nullable\" [ngValue]=\"null\"></option>\r\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\r\n        {{ (option | customFieldLabel) || option.label || option.value }}\r\n    </option>\r\n</select>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["select{width:100%}\n"]
+            },] }
+];
+SelectFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
+
+/**
+ * @description
+ * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class TextFormInputComponent {
+    get prefix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+    }
+    get suffix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+    }
+}
+TextFormInputComponent.id = 'text-form-input';
+TextFormInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-text-form-input',
+                template: "<vdr-affixed-input\r\n    [suffix]=\"suffix\"\r\n    [prefix]=\"prefix\"\r\n>\r\n    <input type=\"text\" [readonly]=\"readonly\" [formControl]=\"formControl\" />\r\n</vdr-affixed-input>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: ["input{width:100%}\n"]
+            },] }
+];
+
+/**
+ * @description
+ * Uses textarea form input. This is the default input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+class TextareaFormInputComponent {
+    get spellcheck() {
+        return this.config.spellcheck === true;
+    }
+}
+TextareaFormInputComponent.id = 'textarea-form-input';
+TextareaFormInputComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush,
+                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+            },] }
+];
+
+const 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 = {
@@ -9080,7 +9704,7 @@ class AddressFormComponent {
 AddressFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-address-form',
-                template: "<form [formGroup]=\"formGroup\">\r\n    <clr-input-container>\r\n        <label>{{ 'customer.full-name' | translate }}</label>\r\n        <input formControlName=\"fullName\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n",
+                template: "<form [formGroup]=\"formGroup\">\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.full-name' | translate }}</label>\n                <input formControlName=\"fullName\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.company' | translate }}</label>\n                <input formControlName=\"company\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.street-line-1' | translate }}</label>\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.street-line-2' | translate }}</label>\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.city' | translate }}</label>\n                <input formControlName=\"city\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.province' | translate }}</label>\n                <input formControlName=\"province\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n    </div>\n    <div class=\"clr-row\">\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.postal-code' | translate }}</label>\n                <input formControlName=\"postalCode\" type=\"text\" clrInput />\n            </clr-input-container>\n        </div>\n        <div class=\"clr-col-md-4\">\n            <clr-input-container>\n                <label>{{ 'customer.country' | translate }}</label>\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\n                        {{ country.name }}\n                    </option>\n                </select>\n            </clr-input-container>\n        </div>\n    </div>\n    <clr-input-container>\n        <label>{{ 'customer.phone-number' | translate }}</label>\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput />\n    </clr-input-container>\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\n        <label>{{ 'common.custom-fields' | translate }}</label>\n        <vdr-tabbed-custom-fields\n            entityName=\"Address\"\n            [customFields]=\"customFields\"\n            [customFieldsFormGroup]=\"customFieldsGroup\"\n        ></vdr-tabbed-custom-fields>\n    </section>\n</form>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
@@ -9307,11 +9931,15 @@ class AssetGalleryComponent {
         this.canDelete = false;
         this.selectionChange = new EventEmitter();
         this.deleteAssets = new EventEmitter();
-        this.selection = [];
+        this.selectionManager = new SelectionManager({
+            multiSelect: this.multiSelect,
+            itemsAreEqual: (a, b) => a.id === b.id,
+            additiveMode: false,
+        });
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         if (this.assets) {
-            for (const asset of this.selection) {
+            for (const asset of this.selectionManager.selection) {
                 // Update and selected assets with any changes
                 const match = this.assets.find(a => a.id === asset.id);
                 if (match) {
@@ -9319,49 +9947,26 @@ class AssetGalleryComponent {
                 }
             }
         }
-    }
-    toggleSelection(asset, event) {
-        const index = this.selection.findIndex(a => a.id === asset.id);
-        if (this.multiSelect && (event === null || event === void 0 ? void 0 : event.shiftKey) && 1 <= this.selection.length) {
-            const lastSelection = this.selection[this.selection.length - 1];
-            const lastSelectionIndex = this.assets.findIndex(a => a.id === lastSelection.id);
-            const currentIndex = this.assets.findIndex(a => a.id === asset.id);
-            const start = currentIndex < lastSelectionIndex ? currentIndex : lastSelectionIndex;
-            const end = currentIndex > lastSelectionIndex ? currentIndex + 1 : lastSelectionIndex;
-            this.selection.push(...this.assets.slice(start, end).filter(a => !this.selection.find(s => s.id === a.id)));
+        if (changes['assets']) {
+            this.selectionManager.setCurrentItems(this.assets);
         }
-        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];
-            }
+        if (changes['multiSelect']) {
+            this.selectionManager.setMultiSelect(this.multiSelect);
         }
-        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(x => (Object.assign({}, x)));
-        this.selectionChange.emit(this.selection);
+    }
+    toggleSelection(asset, event) {
+        this.selectionManager.toggleSelection(asset, event);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
     selectMultiple(assets) {
-        this.selection = assets;
-        this.selectionChange.emit(this.selection);
+        this.selectionManager.selectMultiple(assets);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
     isSelected(asset) {
-        return !!this.selection.find(a => a.id === asset.id);
+        return this.selectionManager.isSelected(asset);
     }
     lastSelected() {
-        return this.selection[this.selection.length - 1];
+        return this.selectionManager.lastSelected();
     }
     previewAsset(asset) {
         this.modalService
@@ -9380,9 +9985,9 @@ class AssetGalleryComponent {
 AssetGalleryComponent.decorators = [
     { type: 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: 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 = () => [
@@ -9817,7 +10422,7 @@ function SingleSearchSelectionModelFactory() {
     return new SingleSearchSelectionModel();
 }
 
-const ɵ0 = SingleSearchSelectionModelFactory;
+const ɵ0$1 = SingleSearchSelectionModelFactory;
 class AssetSearchInputComponent {
     constructor() {
         this.searchTermChange = new EventEmitter();
@@ -9903,7 +10508,7 @@ AssetSearchInputComponent.decorators = [
                 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: ChangeDetectionStrategy.OnPush,
-                providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
+                providers: [{ provide: 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"]
             },] }
 ];
@@ -9921,404 +10526,158 @@ class ChannelAssignmentControlComponent {
         this.includeDefaultChannel = true;
         this.disableChannelIds = [];
         this.value = [];
-        this.disabled = false;
-    }
-    ngOnInit() {
-        this.channels$ = this.dataService.client.userStatus().single$.pipe(map(({ userStatus }) => userStatus.channels.filter(c => this.includeDefaultChannel ? true : c.code !== DEFAULT_CHANNEL_CODE)), tap(channels => {
-            if (!this.channels) {
-                this.channels = channels;
-                this.mapIncomingValueToChannels(this.lastIncomingValue);
-            }
-            else {
-                this.channels = channels;
-            }
-        }));
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    writeValue(obj) {
-        this.lastIncomingValue = obj;
-        this.mapIncomingValueToChannels(obj);
-    }
-    focussed() {
-        if (this.onTouched) {
-            this.onTouched();
-        }
-    }
-    channelIsDisabled(id) {
-        return this.disableChannelIds.includes(id);
-    }
-    valueChanged(value) {
-        if (Array.isArray(value)) {
-            this.onChange(value.map(c => c.id));
-        }
-        else {
-            this.onChange([value ? value.id : undefined]);
-        }
-    }
-    compareFn(c1, c2) {
-        const c1id = typeof c1 === 'string' ? c1 : c1.id;
-        const c2id = typeof c2 === 'string' ? c2 : c2.id;
-        return c1id === c2id;
-    }
-    mapIncomingValueToChannels(value) {
-        var _a;
-        if (Array.isArray(value)) {
-            if (typeof value[0] === 'string') {
-                this.value = value
-                    .map(id => { var _a; return (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === id); })
-                    .filter(notNullOrUndefined);
-            }
-            else {
-                this.value = value;
-            }
-        }
-        else {
-            if (typeof value === 'string') {
-                const channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === value);
-                if (channel) {
-                    this.value = [channel];
-                }
-            }
-            else if (value && value.id) {
-                this.value = [value];
-            }
-        }
-    }
-}
-ChannelAssignmentControlComponent.decorators = [
-    { type: Component, args: [{
-                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: ChangeDetectionStrategy.Default,
-                providers: [
-                    {
-                        provide: 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 = () => [
-    { type: DataService }
-];
-ChannelAssignmentControlComponent.propDecorators = {
-    multiple: [{ type: Input }],
-    includeDefaultChannel: [{ type: Input }],
-    disableChannelIds: [{ type: Input }]
-};
-
-class ChannelBadgeComponent {
-    get isDefaultChannel() {
-        return this.channelCode === DEFAULT_CHANNEL_CODE;
-    }
-}
-ChannelBadgeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-channel-badge',
-                template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block}button :host{margin-bottom:-1px}clr-icon{margin-right:6px}\n"]
-            },] }
-];
-ChannelBadgeComponent.propDecorators = {
-    channelCode: [{ type: 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
- */
-class ChipComponent {
-    constructor() {
-        this.invert = false;
-        /**
-         * @description
-         * If set, the chip will have an auto-generated background
-         * color based on the string value passed in.
-         */
-        this.colorFrom = '';
-        this.iconClick = new EventEmitter();
-    }
-}
-ChipComponent.decorators = [
-    { type: 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: 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: Input }],
-    invert: [{ type: Input }],
-    colorFrom: [{ type: Input }],
-    colorType: [{ type: Input }],
-    iconClick: [{ type: 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(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((value, j) => ({
-            name: operation.args[j].name,
-            value: value.hasOwnProperty('value')
-                ? encodeConfigArgValue(value.value)
-                : encodeConfigArgValue(value),
-        })),
-    };
-}
-function configurableOperationValueIsValid(def, value) {
-    if (!def || !value) {
-        return false;
-    }
-    if (def.code !== value.code) {
-        return false;
-    }
-    for (const argDef of def.args) {
-        const argVal = value.args[argDef.name];
-        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
-            return false;
-        }
-    }
-    return true;
-}
-/**
- * Returns a default value based on the type of the config arg.
- */
-function getDefaultConfigArgValue(arg) {
-    if (arg.list) {
-        return [];
-    }
-    if (arg.defaultValue) {
-        return arg.defaultValue;
-    }
-    const type = arg.type;
-    switch (type) {
-        case 'string':
-        case 'datetime':
-        case 'float':
-        case 'ID':
-        case 'int':
-            return null;
-        case 'boolean':
-            return false;
-        default:
-            assertNever(type);
-    }
-}
-
-/**
- * Interpolates the description of an ConfigurableOperation with the given values.
- */
-function interpolateDescription(operation, values) {
-    if (!operation) {
-        return '';
-    }
-    const templateString = operation.description;
-    const interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, (substring, argName) => {
-        const normalizedArgName = argName.toLowerCase();
-        const value = values[normalizedArgName];
-        if (value == null) {
-            return '_';
-        }
-        let formatted = value;
-        const argDef = operation.args.find(arg => 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.
- */
-class ConfigurableInputComponent {
-    constructor() {
-        this.readonly = false;
-        this.removable = true;
-        this.remove = new EventEmitter();
-        this.argValues = {};
-        this.form = new FormGroup({});
-    }
-    interpolateDescription() {
-        if (this.operationDefinition) {
-            return interpolateDescription(this.operationDefinition, this.form.value);
-        }
-        else {
-            return '';
-        }
-    }
-    ngOnChanges(changes) {
-        if ('operation' in changes || 'operationDefinition' in changes) {
-            this.createForm();
-        }
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+        this.disabled = false;
+    }
+    ngOnInit() {
+        this.channels$ = this.dataService.client.userStatus().single$.pipe(map(({ userStatus }) => userStatus.channels.filter(c => this.includeDefaultChannel ? true : c.code !== DEFAULT_CHANNEL_CODE)), tap(channels => {
+            if (!this.channels) {
+                this.channels = channels;
+                this.mapIncomingValueToChannels(this.lastIncomingValue);
+            }
+            else {
+                this.channels = channels;
+            }
+        }));
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouch = fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.form.disable();
-        }
-        else {
-            this.form.enable();
-        }
+        this.disabled = isDisabled;
     }
-    writeValue(value) {
-        if (value) {
-            this.form.patchValue(value);
-        }
+    writeValue(obj) {
+        this.lastIncomingValue = obj;
+        this.mapIncomingValueToChannels(obj);
     }
-    trackByName(index, arg) {
-        return arg.name;
+    focussed() {
+        if (this.onTouched) {
+            this.onTouched();
+        }
     }
-    getArgDef(arg) {
-        var _a;
-        return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(a => a.name === arg.name);
+    channelIsDisabled(id) {
+        return this.disableChannelIds.includes(id);
     }
-    createForm() {
-        var _a, _b;
-        if (!this.operation) {
-            return;
+    valueChanged(value) {
+        if (Array.isArray(value)) {
+            this.onChange(value.map(c => c.id));
         }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        else {
+            this.onChange([value ? value.id : undefined]);
         }
-        this.form = new FormGroup({});
-        this.form.__id = Math.random().toString(36).substr(10);
-        if (this.operation.args) {
-            for (const arg of ((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []) {
-                let value = (_b = this.operation.args.find(a => a.name === arg.name)) === null || _b === void 0 ? void 0 : _b.value;
-                if (value === undefined) {
-                    value = getDefaultConfigArgValue(arg);
-                }
-                const validators = arg.list ? undefined : arg.required ? Validators.required : undefined;
-                this.form.addControl(arg.name, new FormControl(value, validators));
+    }
+    compareFn(c1, c2) {
+        const c1id = typeof c1 === 'string' ? c1 : c1.id;
+        const c2id = typeof c2 === 'string' ? c2 : c2.id;
+        return c1id === c2id;
+    }
+    mapIncomingValueToChannels(value) {
+        var _a;
+        if (Array.isArray(value)) {
+            if (typeof value[0] === 'string') {
+                this.value = value
+                    .map(id => { var _a; return (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === id); })
+                    .filter(notNullOrUndefined);
+            }
+            else {
+                this.value = value;
             }
         }
-        this.subscription = this.form.valueChanges.subscribe(value => {
-            if (this.onChange) {
-                this.onChange({
-                    code: this.operation && this.operation.code,
-                    args: value,
-                });
+        else {
+            if (typeof value === 'string') {
+                const channel = (_a = this.channels) === null || _a === void 0 ? void 0 : _a.find(c => c.id === value);
+                if (channel) {
+                    this.value = [channel];
+                }
             }
-            if (this.onTouch) {
-                this.onTouch();
+            else if (value && value.id) {
+                this.value = [value];
             }
-        });
-    }
-    validate(c) {
-        if (this.form.invalid) {
-            return {
-                required: true,
-            };
         }
-        return null;
     }
 }
-ConfigurableInputComponent.decorators = [
+ChannelAssignmentControlComponent.decorators = [
     { type: 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: 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: ChangeDetectionStrategy.Default,
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
-                        useExisting: ConfigurableInputComponent,
-                        multi: true,
-                    },
-                    {
-                        provide: NG_VALIDATORS,
-                        useExisting: forwardRef(() => 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: Input }],
-    operationDefinition: [{ type: Input }],
-    readonly: [{ type: Input }],
-    removable: [{ type: Input }],
-    remove: [{ type: Output }]
+ChannelAssignmentControlComponent.ctorParameters = () => [
+    { type: DataService }
+];
+ChannelAssignmentControlComponent.propDecorators = {
+    multiple: [{ type: Input }],
+    includeDefaultChannel: [{ type: Input }],
+    disableChannelIds: [{ type: Input }]
+};
+
+class ChannelBadgeComponent {
+    get isDefaultChannel() {
+        return this.channelCode === DEFAULT_CHANNEL_CODE;
+    }
+}
+ChannelBadgeComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-channel-badge',
+                template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:inline-block}button :host{margin-bottom:-1px}clr-icon{margin-right:6px}\n"]
+            },] }
+];
+ChannelBadgeComponent.propDecorators = {
+    channelCode: [{ type: 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
+ */
+class ChipComponent {
+    constructor() {
+        this.invert = false;
+        /**
+         * @description
+         * If set, the chip will have an auto-generated background
+         * color based on the string value passed in.
+         */
+        this.colorFrom = '';
+        this.iconClick = new EventEmitter();
+    }
+}
+ChipComponent.decorators = [
+    { type: 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: 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: Input }],
+    invert: [{ type: Input }],
+    colorFrom: [{ type: Input }],
+    colorType: [{ type: Input }],
+    iconClick: [{ type: Output }]
 };
 
 /**
@@ -11925,7 +12284,7 @@ class FormattedAddressComponent {
 FormattedAddressComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-formatted-address',
-                template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n",
+                template: "<ul class=\"address-lines\">\r\n    <li *ngIf=\"address.fullName\">{{ address.fullName }}</li>\r\n    <li *ngIf=\"address.company\">{{ address.company }}</li>\r\n    <li *ngIf=\"address.streetLine1\">{{ address.streetLine1 }}</li>\r\n    <li *ngIf=\"address.streetLine2\">{{ address.streetLine2 }}</li>\r\n    <li *ngIf=\"address.city\">{{ address.city }}</li>\r\n    <li *ngIf=\"address.province\">{{ address.province }}</li>\r\n    <li *ngIf=\"address.postalCode\">{{ address.postalCode }}</li>\r\n    <li *ngIf=\"address.country\">\r\n        <clr-icon shape=\"world\" size=\"12\"></clr-icon>\r\n        {{ getCountryName() }}\r\n    </li>\r\n    <li *ngIf=\"address.phoneNumber\">\r\n        <clr-icon shape=\"phone-handset\" size=\"12\"></clr-icon>\r\n        {{ address.phoneNumber }}\r\n    </li>\r\n    <li *ngFor=\"let customField of getCustomFields()\" class=\"custom-field\">\r\n        <vdr-labeled-data [label]=\"customField.key\">{{ customField.value }}</vdr-labeled-data>\r\n    </li>\r\n</ul>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".address-lines{list-style-type:none;line-height:1.2em}.custom-field{margin-top:6px}\n"]
             },] }
@@ -11941,7 +12300,7 @@ HelpTooltipComponent.decorators = [
                 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: ChangeDetectionStrategy.OnPush,
-                styles: [""]
+                styles: ["clr-tooltip{display:inline-flex}\n"]
             },] }
 ];
 HelpTooltipComponent.propDecorators = {
@@ -12203,6 +12562,105 @@ PaginationControlsComponent.propDecorators = {
     pageChange: [{ type: Output }]
 };
 
+const ɵ0 = SingleSearchSelectionModelFactory;
+class ProductSearchInputComponent {
+    constructor() {
+        this.searchTermChange = new EventEmitter();
+        this.facetValueChange = new EventEmitter();
+        this.lastTerm = '';
+        this.lastFacetValueIds = [];
+        this.filterFacetResults = (term, item) => {
+            if (!this.isFacetValueItem(item)) {
+                return false;
+            }
+            const cix = term.indexOf(':');
+            const facetName = cix > -1 ? term.toLowerCase().slice(0, cix) : null;
+            const 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 = (input) => {
+            return typeof input === 'object' && !!input && input.hasOwnProperty('facetValue');
+        };
+    }
+    setSearchTerm(term) {
+        if (term) {
+            this.selectComponent.select({ label: term, value: { label: term } });
+        }
+        else {
+            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isFacetValueItem(i.value));
+            if (currentTerm) {
+                this.selectComponent.unselect(currentTerm);
+            }
+        }
+    }
+    setFacetValues(ids) {
+        const items = this.selectComponent.items;
+        this.selectComponent.selectedItems.forEach(item => {
+            if (this.isFacetValueItem(item.value) && !ids.includes(item.value.facetValue.id)) {
+                this.selectComponent.unselect(item);
+            }
+        });
+        ids.map(id => {
+            return items === null || items === void 0 ? void 0 : items.find(item => this.isFacetValueItem(item) && item.facetValue.id === id);
+        })
+            .filter(notNullOrUndefined)
+            .forEach(item => {
+            const isSelected = this.selectComponent.selectedItems.find(i => {
+                const val = i.value;
+                if (this.isFacetValueItem(val)) {
+                    return val.facetValue.id === item.facetValue.id;
+                }
+                return false;
+            });
+            if (!isSelected) {
+                this.selectComponent.select({ label: '', value: item });
+            }
+        });
+    }
+    onSelectChange(selectedItems) {
+        if (!Array.isArray(selectedItems)) {
+            selectedItems = [selectedItems];
+        }
+        const searchTermItem = selectedItems.find(item => !this.isFacetValueItem(item));
+        const searchTerm = searchTermItem ? searchTermItem.label : '';
+        const facetValueIds = selectedItems.filter(this.isFacetValueItem).map(i => 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;
+        }
+    }
+    addTagFn(item) {
+        return { label: item };
+    }
+    isSearchHeaderSelected() {
+        return this.selectComponent.itemsList.markedIndex === -1;
+    }
+}
+ProductSearchInputComponent.decorators = [
+    { type: 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: ChangeDetectionStrategy.OnPush,
+                providers: [{ provide: 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: Input }],
+    searchTermChange: [{ type: Output }],
+    facetValueChange: [{ type: Output }],
+    selectComponent: [{ type: ViewChild, args: ['selectComponent', { static: true },] }]
+};
+
 /**
  * @description
  * A component for selecting product variants via an autocomplete-style select input.
@@ -13003,7 +13461,7 @@ RichTextEditorComponent.decorators = [
                     },
                     ProsemirrorService,
                 ],
-                styles: ["@charset \"UTF-8\";::ng-deep .ProseMirror{position:relative}::ng-deep .ProseMirror{word-wrap:break-word;white-space:pre-wrap;-webkit-font-variant-ligatures:none;font-feature-settings:none;font-variant-ligatures:none}::ng-deep .ProseMirror pre{white-space:pre-wrap}::ng-deep .ProseMirror li{position:relative}::ng-deep .ProseMirror-hideselection *::selection{background:transparent}::ng-deep .ProseMirror-hideselection *::-moz-selection{background:transparent}::ng-deep .ProseMirror-hideselection{caret-color:transparent}::ng-deep .ProseMirror-selectednode{outline:2px solid var(--color-primary-500)}::ng-deep li.ProseMirror-selectednode{outline:none}::ng-deep li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-32px;right:-2px;top:-2px;bottom:-2px;border:2px solid var(--color-primary-500);pointer-events:none}::ng-deep .ProseMirror-textblock-dropdown{min-width:3em}::ng-deep .ProseMirror-menu{margin:0 -4px;line-height:1}::ng-deep .ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:pre}::ng-deep .ProseMirror-menuitem{margin-right:3px;display:inline-block}::ng-deep .ProseMirror-menuseparator{border-right:1px solid var(--color-component-border-200);margin-right:3px}::ng-deep .ProseMirror-menu-dropdown,::ng-deep .ProseMirror-menu-dropdown-menu{font-size:90%;white-space:nowrap}::ng-deep .ProseMirror-menu-dropdown{vertical-align:1px;cursor:pointer;position:relative;padding-right:15px}::ng-deep .ProseMirror-menu-dropdown-wrap{padding:1px 0 1px 4px;display:inline-block;position:relative}::ng-deep .ProseMirror-menu-dropdown:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}::ng-deep .ProseMirror-menu-dropdown-menu,::ng-deep .ProseMirror-menu-submenu{position:absolute;background:white;color:var(--color-grey-600);border:1px solid var(--color-component-border-200);padding:2px}::ng-deep .ProseMirror-menu-dropdown-menu{z-index:15;min-width:6em}::ng-deep .ProseMirror-menu-dropdown-item{cursor:pointer;padding:2px 8px 2px 4px}::ng-deep .ProseMirror-menu-dropdown-item:hover{background:var(--color-component-bg-100)}::ng-deep .ProseMirror-menu-submenu-wrap{position:relative;margin-right:-4px}::ng-deep .ProseMirror-menu-submenu-label:after{content:\"\";border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 4px)}::ng-deep .ProseMirror-menu-submenu{display:none;min-width:4em;left:100%;top:-3px}::ng-deep .ProseMirror-menu-active{background:var(--color-component-bg-100);border-radius:4px}::ng-deep .ProseMirror-menu-disabled{opacity:.3}::ng-deep .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,::ng-deep .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}::ng-deep .ProseMirror-menubar{border-top-left-radius:inherit;border-top-right-radius:inherit;position:relative;min-height:1em;color:var(--color-grey-600);padding:1px 6px;top:0;left:0;right:0;background:var(--color-component-bg-100);z-index:10;box-sizing:border-box;overflow:visible}::ng-deep .ProseMirror-icon{display:inline-block;line-height:.8;vertical-align:-2px;padding:2px 8px;cursor:pointer}::ng-deep .ProseMirror-menu-disabled.ProseMirror-icon{cursor:default}::ng-deep .ProseMirror-icon svg{fill:currentColor;height:1em}::ng-deep .ProseMirror-icon span{vertical-align:text-top}::ng-deep .ProseMirror-gapcursor{display:none;pointer-events:none;position:absolute}::ng-deep .ProseMirror-gapcursor:after{content:\"\";display:block;position:absolute;top:-2px;width:20px;border-top:1px solid black;animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}::ng-deep .ProseMirror-focused .ProseMirror-gapcursor{display:block}::ng-deep .ProseMirror ul,::ng-deep .ProseMirror ol{padding-left:30px;list-style-position:initial}::ng-deep .ProseMirror blockquote{padding-left:1em;border-left:3px solid var(--color-grey-100);margin-left:0;margin-right:0}::ng-deep .ProseMirror-prompt{background:white;padding:5px 10px 5px 15px;border:1px solid silver;position:fixed;border-radius:3px;z-index:11;box-shadow:-.5px 2px 5px #0003}::ng-deep .ProseMirror-prompt h5{margin:0;font-weight:normal;font-size:100%;color:var(--color-grey-500)}::ng-deep .ProseMirror-prompt input[type=text],::ng-deep .ProseMirror-prompt textarea{background:var(--color-component-bg-100);border:none;outline:none}::ng-deep .ProseMirror-prompt input[type=text]{padding:0 4px}::ng-deep .ProseMirror-prompt-close{position:absolute;left:2px;top:1px;color:var(--color-grey-400);border:none;background:transparent;padding:0}::ng-deep .ProseMirror-prompt-close:after{content:\"\\e2\\153\\2022\";font-size:12px}::ng-deep .ProseMirror-invalid{background:var(--color-warning-200);border:1px solid var(--color-warning-300);border-radius:4px;padding:5px 10px;position:absolute;min-width:10em}::ng-deep .ProseMirror-prompt-buttons{margin-top:5px;display:none}::ng-deep #editor,::ng-deep .editor{background:var(--color-form-input-bg);color:#000;background-clip:padding-box;border-radius:4px;border:2px solid rgba(0,0,0,.2);padding:5px 0;margin-bottom:23px}::ng-deep .ProseMirror p:first-child,::ng-deep .ProseMirror h1:first-child,::ng-deep .ProseMirror h2:first-child,::ng-deep .ProseMirror h3:first-child,::ng-deep .ProseMirror h4:first-child,::ng-deep .ProseMirror h5:first-child,::ng-deep .ProseMirror h6:first-child{margin-top:10px}::ng-deep .ProseMirror{padding:4px 8px 4px 14px;line-height:1.2;outline:none}::ng-deep .ProseMirror p{margin-bottom:.5rem;color:var(--color-grey-800)!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 = () => [
@@ -13024,6 +13482,7 @@ class SelectToggleComponent {
     constructor() {
         this.size = 'large';
         this.selected = false;
+        this.hiddenWhenOff = false;
         this.disabled = false;
         this.selectedChange = new EventEmitter();
     }
@@ -13031,14 +13490,15 @@ class SelectToggleComponent {
 SelectToggleComponent.decorators = [
     { type: 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: 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: Input }],
     selected: [{ type: Input }],
+    hiddenWhenOff: [{ type: Input }],
     disabled: [{ type: Input }],
     label: [{ type: Input }],
     selectedChange: [{ type: Output }]
@@ -13792,7 +14252,7 @@ class RelationAssetInputComponent {
         this.dataService = dataService;
     }
     ngOnInit() {
-        this.asset$ = this.parentFormControl.valueChanges.pipe(startWith(this.parentFormControl.value), map(asset => asset === null || asset === void 0 ? void 0 : asset.id), distinctUntilChanged(), switchMap(id => {
+        this.asset$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value), map(asset => asset === null || asset === void 0 ? void 0 : asset.id), distinctUntilChanged(), switchMap(id => {
             if (id) {
                 return this.dataService.product.getAsset(id).mapStream(data => data.asset || undefined);
             }
@@ -13811,14 +14271,14 @@ class RelationAssetInputComponent {
         })
             .subscribe(result => {
             if (result && result.length) {
-                this.parentFormControl.setValue(result[0]);
-                this.parentFormControl.markAsDirty();
+                this.formControl.setValue(result[0]);
+                this.formControl.markAsDirty();
             }
         });
     }
     remove() {
-        this.parentFormControl.setValue(null);
-        this.parentFormControl.markAsDirty();
+        this.formControl.setValue(null);
+        this.formControl.markAsDirty();
     }
     previewAsset(asset) {
         this.modalService
@@ -13830,6 +14290,7 @@ class RelationAssetInputComponent {
             .subscribe();
     }
 }
+RelationAssetInputComponent.id = 'asset-form-input';
 RelationAssetInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'vdr-relation-asset-input',
@@ -13844,7 +14305,7 @@ RelationAssetInputComponent.ctorParameters = () => [
 ];
 RelationAssetInputComponent.propDecorators = {
     readonly: [{ type: Input }],
-    parentFormControl: [{ type: Input }],
+    formControl: [{ type: Input, args: ['parentFormControl',] }],
     config: [{ type: Input }]
 };
 
@@ -15034,6 +15495,8 @@ const DECLARATIONS = [
     UiExtensionPointComponent,
     CustomDetailComponentHostComponent,
     AssetPreviewLinksComponent,
+    ProductMultiSelectorDialogComponent,
+    ProductSearchInputComponent,
 ];
 const DYNAMIC_FORM_INPUTS = [
     TextFormInputComponent,
@@ -15057,6 +15520,8 @@ const DYNAMIC_FORM_INPUTS = [
     TextareaFormInputComponent,
     RichTextFormInputComponent,
     JsonEditorFormInputComponent,
+    ProductMultiSelectorFormInputComponent,
+    CombinationModeFormInputComponent,
 ];
 class SharedModule {
 }
@@ -15594,7 +16059,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '1.5.2';
+const ADMIN_UI_VERSION = '1.6.2';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.
@@ -15814,5 +16279,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, ASSET_FRAGMENT, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddressFormComponent, AdjustmentType, AdministratorDataService, AffixedInputComponent, AppComponent, AppComponentModule, AppShellComponent, AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetSearchInputComponent, AssetType, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BooleanFormInputComponent, BreadcrumbComponent, CANCEL_JOB, CANCEL_ORDER, CHANNEL_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelLabelPipe, ChannelSwitcherComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, ComponentRegistryService, ConfigurableInputComponent, CoreModule, CurrencyCode, CurrencyFormInputComponent, CurrencyInputComponent, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldControlComponent, CustomFieldLabelPipe, CustomHttpTranslationLoader, CustomerDataService, CustomerGroupFormInputComponent, CustomerLabelComponent, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ASSETS, DELETE_CHANNEL, DELETE_COLLECTION, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_NOTE, DELETE_FACET, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PRODUCT, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_ROLE, DELETE_SHIPPING_METHOD, DELETE_TAG, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_ZONE, DISCOUNT_FRAGMENT, DashboardWidgetService, DataModule, DataService, DataTableColumnComponent, DataTableComponent, DateFormInputComponent, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueSelectorComponent, FetchAdapter, FileSizePipe, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ADMINISTRATOR, GET_ADMINISTRATORS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNEL, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_COUNTRY, GET_COUNTRY_LIST, GET_CURRENT_USER, GET_CUSTOMER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_LIST, GET_FACET_WITH_VALUES, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_ORDER_SUMMARY, GET_PAYMENT_METHOD, GET_PAYMENT_METHOD_LIST, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_PROMOTION, GET_PROMOTION_LIST, GET_ROLE, GET_ROLES, GET_SERVER_CONFIG, GET_SHIPPING_METHOD, GET_SHIPPING_METHOD_LIST, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_CATEGORY, GET_TAX_RATE, GET_TAX_RATE_LIST, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONES, GLOBAL_SETTINGS_FRAGMENT, GlobalFlag, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryDetailComponent, HistoryEntryType, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, ModalDialogComponent, ModalService, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderDataService, OrderStateLabelComponent, OverlayHostComponent, OverlayHostService, PAYMENT_METHOD_FRAGMENT, PRODUCT_DETAIL_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PaginationControlsComponent, PasswordFormInputComponent, PercentageSuffixInputComponent, Permission, ProductDataService, ProductSelectorComponent, ProductSelectorFormInputComponent, PromotionDataService, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RelationAssetInputComponent, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RichTextEditorComponent, RichTextFormInputComponent, SEARCH_PRODUCTS, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_CONTENT_LANGUAGE, SET_DISPLAY_UI_EXTENSION_POINTS, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SelectFormInputComponent, SelectToggleComponent, SentenceCasePipe, ServerConfigService, SettingsDataService, SharedModule, ShippingMethodDataService, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, StateI18nTokenPipe, StatusBadgeComponent, StockMovementType, StringToColorPipe, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagSelectorComponent, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UserMenuComponent, ZONE_FRAGMENT, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createResolveData, createUpdatedTranslatable, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, encodeConfigArgValue, findTranslation, flattenFacetValues, getAppConfig, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getLocales, getMarkRange, getServerLocation, headingRule, hostExternalFrame, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, jsonValidator, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, registerCustomDetailComponent, registerCustomFieldComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, removeReadonlyCustomFields, setDashboardWidgetLayout, stringToColor, toConfigurableOperationInput, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, ɵ1, ɵ10, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
+export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, ASSET_FRAGMENT, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddressFormComponent, AdjustmentType, AdministratorDataService, AffixedInputComponent, AppComponent, AppComponentModule, AppShellComponent, AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetSearchInputComponent, AssetType, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BooleanFormInputComponent, BreadcrumbComponent, CANCEL_JOB, CANCEL_ORDER, CHANNEL_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelLabelPipe, ChannelSwitcherComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, CoreModule, CurrencyCode, CurrencyFormInputComponent, CurrencyInputComponent, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldControlComponent, CustomFieldLabelPipe, CustomHttpTranslationLoader, CustomerDataService, CustomerGroupFormInputComponent, CustomerLabelComponent, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ASSETS, DELETE_CHANNEL, DELETE_COLLECTION, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_NOTE, DELETE_FACET, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PRODUCT, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_ROLE, DELETE_SHIPPING_METHOD, DELETE_TAG, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_ZONE, DISCOUNT_FRAGMENT, DashboardWidgetService, DataModule, DataService, DataTableColumnComponent, DataTableComponent, DateFormInputComponent, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueSelectorComponent, FetchAdapter, FileSizePipe, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ADMINISTRATOR, GET_ADMINISTRATORS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNEL, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_COUNTRY, GET_COUNTRY_LIST, GET_CURRENT_USER, GET_CUSTOMER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_LIST, GET_FACET_WITH_VALUES, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_ORDER_SUMMARY, GET_PAYMENT_METHOD, GET_PAYMENT_METHOD_LIST, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_PROMOTION, GET_PROMOTION_LIST, GET_ROLE, GET_ROLES, GET_SERVER_CONFIG, GET_SHIPPING_METHOD, GET_SHIPPING_METHOD_LIST, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_CATEGORY, GET_TAX_RATE, GET_TAX_RATE_LIST, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONES, GLOBAL_SETTINGS_FRAGMENT, GlobalFlag, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryDetailComponent, HistoryEntryType, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, ModalDialogComponent, ModalService, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderDataService, OrderStateLabelComponent, OverlayHostComponent, OverlayHostService, PAYMENT_METHOD_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PaginationControlsComponent, PasswordFormInputComponent, PercentageSuffixInputComponent, Permission, ProductDataService, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductSearchInputComponent, ProductSelectorComponent, ProductSelectorFormInputComponent, PromotionDataService, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RelationAssetInputComponent, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RichTextEditorComponent, RichTextFormInputComponent, SEARCH_PRODUCTS, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_CONTENT_LANGUAGE, SET_DISPLAY_UI_EXTENSION_POINTS, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SentenceCasePipe, ServerConfigService, SettingsDataService, SharedModule, ShippingMethodDataService, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, StateI18nTokenPipe, StatusBadgeComponent, StockMovementType, StringToColorPipe, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagSelectorComponent, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UserMenuComponent, ZONE_FRAGMENT, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createResolveData, createUpdatedTranslatable, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, encodeConfigArgValue, findTranslation, flattenFacetValues, getAppConfig, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getLocales, getMarkRange, getServerLocation, headingRule, hostExternalFrame, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, jsonValidator, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, registerCustomDetailComponent, registerCustomFieldComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, removeReadonlyCustomFields, setDashboardWidgetLayout, stringToColor, toConfigurableOperationInput, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, ɵ1, ɵ10, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
 //# sourceMappingURL=vendure-admin-ui-core.js.map