@vendure/admin-ui 1.5.2 → 1.6.0

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_DEF_FRAGMENT = gql `
-    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
-        args {
-            name
-            type
-            required
-            defaultValue
-            list
-            ui
-            label
-        }
-        code
-        description
-    }
-`;
-const ERROR_RESULT_FRAGMENT = gql `
-    fragment ErrorResult on ErrorResult {
-        errorCode
-        message
-    }
+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
+            description
+        }
+        code
+        description
+    }
+`;
+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 } }
@@ -3315,6 +3336,7 @@ const ORDER_FRAGMENT = gql `
         state
         nextStates
         total
+        totalWithTax
         currencyCode
         customer {
             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 = () => [
@@ -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,337 +8563,447 @@ 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;
-    }
-    ngOnInit() {
-        this.customerGroups$ = this.dataService.customer
-            .getCustomerGroupList({
-            take: 1000,
-        })
-            .mapSingle(res => res.customerGroups.items)
-            .pipe(startWith([]));
-    }
-    selectGroup(group) {
-        this.formControl.setValue(group.id);
-    }
+function configurableDefinitionToInstance(def) {
+    return Object.assign(Object.assign({}, def), { args: def.args.map(arg => {
+            return Object.assign(Object.assign({}, arg), { value: getDefaultConfigArgValue(arg) });
+        }) });
 }
-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
+ * 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' }
+ *     ]
+ * }
+ * ```
  */
-class DateFormInputComponent {
-    get min() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+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;
     }
-    get max() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    if (def.code !== value.code) {
+        return false;
     }
-    get yearRange() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.yearRange) || this.config.yearRange;
+    for (const argDef of def.args) {
+        const argVal = value.args[argDef.name];
+        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
+            return false;
+        }
     }
+    return true;
 }
-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
+ * Returns a default value based on the type of the config arg.
  */
-class FacetValueFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.isListInput = true;
+function getDefaultConfigArgValue(arg) {
+    if (arg.list) {
+        return [];
     }
-    ngOnInit() {
-        this.facets$ = this.dataService.facet
-            .getAllFacets()
-            .mapSingle(data => data.facets.items)
-            .pipe(shareReplay(1));
+    if (arg.defaultValue) {
+        return arg.defaultValue;
     }
-}
-FacetValueFormInputComponent.id = 'facet-value-form-input';
-FacetValueFormInputComponent.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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-FacetValueFormInputComponent.ctorParameters = () => [
-    { type: DataService }
-];
+    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);
+    }
+}
 
 /**
- * @description
- * Displays a number input. Default input for `int` and `float` type fields.
- *
- * @docsCategory custom-input-components
- * @docsPage default-inputs
+ * Interpolates the description of an ConfigurableOperation with the given values.
  */
-class NumberFormInputComponent {
-    get prefix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
+function interpolateDescription(operation, values) {
+    if (!operation) {
+        return '';
     }
-    get suffix() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
+    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);
     }
-    get min() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.min) || this.config.min;
+    interpolateDescription() {
+        if (this.operationDefinition) {
+            return interpolateDescription(this.operationDefinition, this.form.value);
+        }
+        else {
+            return '';
+        }
     }
-    get max() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.max) || this.config.max;
+    ngOnInit() {
+        this.positionChange$ = this.positionChangeSubject.asObservable();
     }
-    get step() {
+    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.config.ui) === null || _a === void 0 ? void 0 : _a.step) || this.config.step;
+        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;
     }
 }
-NumberFormInputComponent.id = 'number-form-input';
-NumberFormInputComponent.decorators = [
+ConfigurableInputComponent.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-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"]
             },] }
 ];
-NumberFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
+ConfigurableInputComponent.propDecorators = {
+    operation: [{ type: Input }],
+    operationDefinition: [{ type: Input }],
+    readonly: [{ type: Input }],
+    removable: [{ type: Input }],
+    position: [{ type: Input }],
+    remove: [{ type: Output }]
 };
 
 /**
  * @description
- * Displays a password text input. Should be used with `string` type fields.
+ * A special input used to display the "Combination mode" AND/OR toggle.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class PasswordFormInputComponent {
+class CombinationModeFormInputComponent {
+    constructor(configurableInputComponent) {
+        this.configurableInputComponent = configurableInputComponent;
+    }
+    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 });
+            }
+        }));
+    }
+    setCombinationModeAnd() {
+        this.formControl.setValue(true);
+    }
+    setCombinationModeOr() {
+        this.formControl.setValue(false);
+    }
 }
-PasswordFormInputComponent.id = 'password-form-input';
-PasswordFormInputComponent.decorators = [
+CombinationModeFormInputComponent.id = 'combination-mode-form-input';
+CombinationModeFormInputComponent.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-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"]
             },] }
+];
+CombinationModeFormInputComponent.ctorParameters = () => [
+    { type: ConfigurableInputComponent, decorators: [{ type: Optional }] }
 ];
 
 /**
  * @description
- * Allows the selection of multiple ProductVariants via an autocomplete select input.
- * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
+ * An input for monetary values. Should be used with `int` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class ProductSelectorFormInputComponent {
+class CurrencyFormInputComponent {
     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));
+        this.currencyCode$ = this.dataService.settings
+            .getActiveChannel()
+            .mapStream(data => data.activeChannel.currencyCode);
     }
 }
-ProductSelectorFormInputComponent.id = 'product-selector-form-input';
-ProductSelectorFormInputComponent.decorators = [
+CurrencyFormInputComponent.id = 'currency-form-input';
+CurrencyFormInputComponent.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-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: [".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 = () => [
+CurrencyFormInputComponent.ctorParameters = () => [
     { type: DataService }
-];
+];
+CurrencyFormInputComponent.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 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 RelationFormInputComponent {
+class CustomerGroupFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
+    ngOnInit() {
+        this.customerGroups$ = this.dataService.customer
+            .getCustomerGroupList({
+            take: 1000,
+        })
+            .mapSingle(res => res.customerGroups.items)
+            .pipe(startWith([]));
+    }
+    selectGroup(group) {
+        this.formControl.setValue(group.id);
+    }
 }
-RelationFormInputComponent.id = 'relation-form-input';
-RelationFormInputComponent.decorators = [
+CustomerGroupFormInputComponent.id = 'customer-group-form-input';
+CustomerGroupFormInputComponent.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-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: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
+                styles: [""]
             },] }
 ];
-RelationFormInputComponent.propDecorators = {
+CustomerGroupFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
+CustomerGroupFormInputComponent.propDecorators = {
     readonly: [{ type: Input }]
 };
 
 /**
  * @description
- * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ * Allows selection of a datetime. Default input for `datetime` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class RichTextFormInputComponent {
+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;
+    }
 }
-RichTextFormInputComponent.id = 'rich-text-form-input';
-RichTextFormInputComponent.decorators = [
+DateFormInputComponent.id = 'date-form-input';
+DateFormInputComponent.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-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 textarea{resize:both;height:6rem;width:100%}\n"]
+                styles: [""]
             },] }
-];
+];
+DateFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
 
 /**
  * @description
- * Uses a select input to allow the selection of a string value. Should be used with
- * `string` type fields with options.
+ * Allows the selection of multiple FacetValues via an autocomplete select input.
+ * Should be used with `ID` type **list** fields which represent FacetValue IDs.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class SelectFormInputComponent {
-    get options() {
-        var _a;
-        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
+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));
     }
 }
-SelectFormInputComponent.id = 'select-form-input';
-SelectFormInputComponent.decorators = [
+FacetValueFormInputComponent.id = 'facet-value-form-input';
+FacetValueFormInputComponent.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-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: ["select{width:100%}\n"]
+                styles: [""]
             },] }
 ];
-SelectFormInputComponent.propDecorators = {
-    readonly: [{ type: Input }]
-};
+FacetValueFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
 
 /**
  * @description
- * Uses a regular text form input. This is the default input for `string` and `localeString` type fields.
+ * Displays a number input. Default input for `int` and `float` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class TextFormInputComponent {
+class NumberFormInputComponent {
     get prefix() {
         var _a;
         return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
@@ -8813,1512 +9012,1672 @@ class TextFormInputComponent {
         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;
+    }
 }
-TextFormInputComponent.id = 'text-form-input';
-TextFormInputComponent.decorators = [
+NumberFormInputComponent.id = 'number-form-input';
+NumberFormInputComponent.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-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: ["input{width:100%}\n"]
+                styles: [""]
             },] }
-];
+];
+NumberFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
+};
 
 /**
  * @description
- * Uses textarea form input. This is the default input for `text` type fields.
+ * Displays a password text input. Should be used with `string` type fields.
  *
  * @docsCategory custom-input-components
  * @docsPage default-inputs
  */
-class TextareaFormInputComponent {
-    get spellcheck() {
-        return this.config.spellcheck === true;
-    }
+class PasswordFormInputComponent {
 }
-TextareaFormInputComponent.id = 'textarea-form-input';
-TextareaFormInputComponent.decorators = [
+PasswordFormInputComponent.id = 'password-form-input';
+PasswordFormInputComponent.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-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: [":host textarea{resize:both;height:6rem;width:100%}\n"]
+                styles: [""]
             },] }
 ];
 
-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:
- *
- * @example
- * ```TypeScript
- * const config = {
- *   // ...
- *   customFields: {
- *     ProductVariant: [
- *       {
- *         name: 'rrp',
- *         type: 'int',
- *         ui: { component: 'my-custom-input' },
- *       },
- *     ]
- *   }
- * }
- * ```
- *
- * or with an argument of a {@link ConfigurableOperationDef}:
- *
- * @example
- * ```TypeScript
- * args: {
- *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
- * }
- * ```
- *
- * @docsCategory custom-input-components
- */
-function registerFormInputComponent(id, component) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (registry) => () => {
-            registry.registerInputComponent(id, component);
-        },
-        deps: [ComponentRegistryService],
-    };
-}
 /**
  * @description
- * **Deprecated** use `registerFormInputComponent()` in combination with the customField `ui` config instead.
- *
- * Registers a custom component to act as the form input control for the given custom field.
- * This should be used in the NgModule `providers` array of your ui extension module.
- *
- * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   declarations: [MyCustomFieldControl],
- *   providers: [
- *       registerCustomFieldComponent('Product', 'someCustomField', MyCustomFieldControl),
- *   ],
- * })
- * export class MyUiExtensionModule {}
- * ```
- *
- * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
- *
- * @docsCategory custom-input-components
- */
-function registerCustomFieldComponent(entity, fieldName, component) {
-    return {
-        provide: APP_INITIALIZER,
-        multi: true,
-        useFactory: (customFieldComponentService) => () => {
-            customFieldComponentService.registerCustomFieldComponent(entity, fieldName, component);
-        },
-        deps: [CustomFieldComponentService],
-    };
-}
-/**
- * Registers the default form input components.
+ * A helper class used to manage selection of list items. Supports multiple selection via
+ * cmd/ctrl/shift key.
  */
-function registerDefaultFormInputs() {
-    return defaultFormInputs.map(cmp => registerFormInputComponent(cmp.id, cmp));
+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 ActionBarItemsComponent {
-    constructor(navBuilderService, route, dataService, notificationService) {
-        this.navBuilderService = navBuilderService;
-        this.route = route;
+class ProductMultiSelectorDialogComponent {
+    constructor(dataService, changeDetector) {
         this.dataService = dataService;
-        this.notificationService = notificationService;
-        this.locationId$ = new BehaviorSubject('');
+        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() {
-        this.items$ = combineLatest(this.navBuilderService.actionBarConfig$, this.locationId$).pipe(map(([items, locationId]) => items.filter(config => config.locationId === locationId)));
-    }
-    ngOnChanges(changes) {
-        if ('locationId' in changes) {
-            this.locationId$.next(changes['locationId'].currentValue);
-        }
-    }
-    handleClick(event, item) {
-        if (typeof item.onClick === 'function') {
-            item.onClick(event, {
-                route: this.route,
-                dataService: this.dataService,
-                notificationService: this.notificationService,
+        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();
+                });
+            }
         }
     }
-    getRouterLink(item) {
-        return this.navBuilderService.getRouterLink(item, this.route);
+    trackByFn(index, item) {
+        return item.productId;
     }
-    getButtonStyles(item) {
-        const styles = ['btn'];
-        if (item.buttonStyle && item.buttonStyle === 'link') {
-            styles.push('btn-link');
-            return styles;
-        }
-        styles.push(this.getButtonColorClass(item));
-        return styles;
+    setSearchTerm(term) {
+        this.searchTerm$.next(term);
     }
-    getButtonColorClass(item) {
-        switch (item.buttonColor) {
-            case undefined:
-            case 'primary':
-                return item.buttonStyle === 'outline' ? 'btn-outline' : 'btn-primary';
-            case 'success':
-                return item.buttonStyle === 'outline' ? 'btn-success-outline' : 'btn-success';
-            case 'warning':
-                return item.buttonStyle === 'outline' ? 'btn-warning-outline' : 'btn-warning';
-            default:
-                assertNever(item.buttonColor);
-                return '';
-        }
+    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();
     }
 }
-ActionBarItemsComponent.decorators = [
+ProductMultiSelectorDialogComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-action-bar-items',
-                template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n",
+                selector: 'vdr-product-multi-selector-dialog',
+                template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block;min-height:36px}\n"]
+                styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"]
             },] }
 ];
-ActionBarItemsComponent.ctorParameters = () => [
-    { type: NavBuilderService },
-    { type: ActivatedRoute },
+ProductMultiSelectorDialogComponent.ctorParameters = () => [
     { type: DataService },
-    { type: NotificationService }
-];
-ActionBarItemsComponent.propDecorators = {
-    locationId: [{ type: HostBinding, args: ['attr.data-location-id',] }, { type: Input }]
-};
+    { type: ChangeDetectorRef }
+];
 
-class ActionBarLeftComponent {
-    constructor() {
-        this.grow = false;
+class ProductMultiSelectorFormInputComponent {
+    constructor(modalService, dataService, changeDetector) {
+        this.modalService = modalService;
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.mode = 'product';
+        this.isListInput = true;
     }
-}
-ActionBarLeftComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-ab-left',
-                template: `
-        <ng-content></ng-content>
-    `
-            },] }
-];
-ActionBarLeftComponent.propDecorators = {
-    grow: [{ type: Input }]
-};
-class ActionBarRightComponent {
-    constructor() {
-        this.grow = false;
+    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();
+            }
+        });
     }
 }
-ActionBarRightComponent.decorators = [
+ProductMultiSelectorFormInputComponent.id = 'product-multi-form-input';
+ProductMultiSelectorFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-ab-right',
-                template: `
-        <ng-content></ng-content>
-    `
+                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: [""]
             },] }
 ];
-ActionBarRightComponent.propDecorators = {
-    grow: [{ type: Input }]
-};
-class ActionBarComponent {
+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));
+    }
 }
-ActionBarComponent.decorators = [
+ProductSelectorFormInputComponent.id = 'product-selector-form-input';
+ProductSelectorFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-action-bar',
-                template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n",
-                styles: [":host{display:flex;justify-content:space-between;align-items:baseline;background-color:var(--color-component-bg-100);position:sticky;top:-24px;z-index:25;border-bottom:1px solid var(--color-component-border-200)}:host>.grow{flex:1}\n"]
+                selector: 'vdr-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"]
             },] }
 ];
-ActionBarComponent.propDecorators = {
-    left: [{ type: ContentChild, args: [ActionBarLeftComponent,] }],
-    right: [{ type: ContentChild, args: [ActionBarRightComponent,] }]
-};
+ProductSelectorFormInputComponent.ctorParameters = () => [
+    { type: DataService }
+];
 
-class AddressFormComponent {
+/**
+ * @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 {
 }
-AddressFormComponent.decorators = [
+RelationFormInputComponent.id = 'relation-form-input';
+RelationFormInputComponent.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",
+                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: [""]
+                styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"]
             },] }
 ];
-AddressFormComponent.propDecorators = {
-    customFields: [{ type: Input }],
-    formGroup: [{ type: Input }],
-    availableCountries: [{ type: Input }]
+RelationFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
 };
 
 /**
- * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+ * @description
+ * Uses the {@link RichTextEditorComponent} as in input for `text` type fields.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
  */
-class AffixedInputComponent {
+class RichTextFormInputComponent {
 }
-AffixedInputComponent.decorators = [
+RichTextFormInputComponent.id = 'rich-text-form-input';
+RichTextFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-affixed-input',
-                template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n",
+                selector: 'vdr-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{display:inline-flex}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-grey-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix input{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"]
+                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
             },] }
-];
-AffixedInputComponent.propDecorators = {
-    prefix: [{ type: Input }],
-    suffix: [{ type: Input }]
-};
+];
 
 /**
- * A form input control which displays a number input with a percentage sign suffix.
+ * @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 PercentageSuffixInputComponent {
-    constructor() {
-        this.disabled = false;
-        this.readonly = false;
-    }
-    ngOnChanges(changes) {
-        if ('value' in changes) {
-            this.writeValue(changes['value'].currentValue);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    onInput(value) {
-        this.onChange(value);
-    }
-    writeValue(value) {
-        const numericValue = +value;
-        if (!Number.isNaN(numericValue)) {
-            this._value = numericValue;
-        }
+class SelectFormInputComponent {
+    get options() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.options) || this.config.options;
     }
 }
-PercentageSuffixInputComponent.decorators = [
+SelectFormInputComponent.id = 'select-form-input';
+SelectFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-percentage-suffix-input',
-                template: `
-        <vdr-affixed-input suffix="%">
-            <input
-                type="number"
-                step="1"
-                [value]="_value"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                (input)="onInput($event.target.value)"
-                (focus)="onTouch()"
-            />
-        </vdr-affixed-input>
-    `,
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: PercentageSuffixInputComponent,
-                        multi: true,
-                    },
-                ],
-                styles: [`
-            :host {
-                padding: 0;
-            }
-        `]
+                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"]
             },] }
 ];
-PercentageSuffixInputComponent.propDecorators = {
-    disabled: [{ type: Input }],
-    readonly: [{ type: Input }],
-    value: [{ type: Input }]
+SelectFormInputComponent.propDecorators = {
+    readonly: [{ type: Input }]
 };
 
 /**
- * A component for selecting files to upload as new Assets.
+ * @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 AssetFileInputComponent {
-    constructor(serverConfig) {
-        this.serverConfig = serverConfig;
-        /**
-         * CSS selector of the DOM element which will be masked by the file
-         * drop zone. Defaults to `body`.
-         */
-        this.dropZoneTarget = 'body';
-        this.uploading = false;
-        this.selectFiles = new EventEmitter();
-        this.dragging = false;
-        this.overDropZone = false;
-        this.dropZoneStyle = {
-            'width.px': 0,
-            'height.px': 0,
-            'top.px': 0,
-            'left.px': 0,
-        };
-    }
-    ngOnInit() {
-        this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
-        this.fitDropZoneToTarget();
-    }
-    onDragEnter() {
-        this.dragging = true;
-        this.fitDropZoneToTarget();
-    }
-    // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
-    onDragLeave(event) {
-        if (!event.clientX && !event.clientY) {
-            this.dragging = false;
-        }
-    }
-    /**
-     * Preventing this event is required to make dropping work.
-     * See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_a_drop_zone
-     */
-    onDragOver(event) {
-        event.preventDefault();
-    }
-    // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
-    onDrop(event) {
-        event.preventDefault();
-        this.dragging = false;
-        this.overDropZone = false;
-        const files = Array.from(event.dataTransfer ? event.dataTransfer.items : [])
-            .map(i => i.getAsFile())
-            .filter(notNullOrUndefined);
-        this.selectFiles.emit(files);
-    }
-    select(event) {
-        const files = event.target.files;
-        if (files) {
-            this.selectFiles.emit(Array.from(files));
-        }
+class TextFormInputComponent {
+    get prefix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.prefix) || this.config.prefix;
     }
-    fitDropZoneToTarget() {
-        const target = document.querySelector(this.dropZoneTarget);
-        if (target) {
-            const rect = target.getBoundingClientRect();
-            this.dropZoneStyle['width.px'] = rect.width;
-            this.dropZoneStyle['height.px'] = rect.height;
-            this.dropZoneStyle['top.px'] = rect.top;
-            this.dropZoneStyle['left.px'] = rect.left;
-        }
+    get suffix() {
+        var _a;
+        return ((_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.suffix) || this.config.suffix;
     }
 }
-AssetFileInputComponent.decorators = [
+TextFormInputComponent.id = 'text-form-input';
+TextFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-asset-file-input',
-                template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n",
+                selector: 'vdr-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: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"]
+                styles: ["input{width:100%}\n"]
             },] }
-];
-AssetFileInputComponent.ctorParameters = () => [
-    { type: ServerConfigService }
-];
-AssetFileInputComponent.propDecorators = {
-    dropZoneTarget: [{ type: Input }],
-    uploading: [{ type: Input }],
-    selectFiles: [{ type: Output }],
-    onDragEnter: [{ type: HostListener, args: ['document:dragenter',] }],
-    onDragLeave: [{ type: HostListener, args: ['document:dragleave', ['$event'],] }]
-};
+];
 
-class AssetPreviewDialogComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-    }
-    ngOnInit() {
-        this.assetWithTags$ = of(this.asset).pipe(mergeMap(asset => {
-            if (this.hasTags(asset)) {
-                return of(asset);
-            }
-            else {
-                // tslint:disable-next-line:no-non-null-assertion
-                return this.dataService.product.getAsset(asset.id).mapSingle(data => data.asset);
-            }
-        }));
-    }
-    hasTags(asset) {
-        return asset.hasOwnProperty('tags');
+/**
+ * @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;
     }
 }
-AssetPreviewDialogComponent.decorators = [
+TextareaFormInputComponent.id = 'textarea-form-input';
+TextareaFormInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-asset-preview-dialog',
-                template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n",
+                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{height:70vh}.update-button.hidden{visibility:hidden}\n"]
+                styles: [":host textarea{resize:both;height:6rem;width:100%}\n"]
             },] }
-];
-AssetPreviewDialogComponent.ctorParameters = () => [
-    { type: DataService }
 ];
 
-class AssetGalleryComponent {
-    constructor(modalService) {
-        this.modalService = modalService;
-        /**
-         * If true, allows multiple assets to be selected by ctrl+clicking.
-         */
-        this.multiSelect = false;
-        this.canDelete = false;
-        this.selectionChange = new EventEmitter();
-        this.deleteAssets = new EventEmitter();
-        this.selection = [];
-    }
-    ngOnChanges() {
-        if (this.assets) {
-            for (const asset of this.selection) {
-                // Update and selected assets with any changes
-                const match = this.assets.find(a => a.id === asset.id);
-                if (match) {
-                    Object.assign(asset, match);
-                }
-            }
-        }
-    }
-    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)));
-        }
-        else if (index === -1) {
-            if (this.multiSelect && ((event === null || event === void 0 ? void 0 : event.ctrlKey) || (event === null || event === void 0 ? void 0 : event.shiftKey))) {
-                this.selection.push(asset);
-            }
-            else {
-                this.selection = [asset];
-            }
-        }
-        else {
-            if (this.multiSelect && (event === null || event === void 0 ? void 0 : event.ctrlKey)) {
-                this.selection.splice(index, 1);
-            }
-            else if (1 < this.selection.length) {
-                this.selection = [asset];
-            }
-            else {
-                this.selection.splice(index, 1);
-            }
-        }
-        // Make the selection mutable
-        this.selection = this.selection.map(x => (Object.assign({}, x)));
-        this.selectionChange.emit(this.selection);
-    }
-    selectMultiple(assets) {
-        this.selection = assets;
-        this.selectionChange.emit(this.selection);
-    }
-    isSelected(asset) {
-        return !!this.selection.find(a => a.id === asset.id);
-    }
-    lastSelected() {
-        return this.selection[this.selection.length - 1];
-    }
-    previewAsset(asset) {
-        this.modalService
-            .fromComponent(AssetPreviewDialogComponent, {
-            size: 'xl',
-            closable: true,
-            locals: { asset },
-        })
-            .subscribe();
-    }
-    entityInfoClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-}
-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",
-                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"]
-            },] }
-];
-AssetGalleryComponent.ctorParameters = () => [
-    { type: ModalService }
+const defaultFormInputs = [
+    BooleanFormInputComponent,
+    CurrencyFormInputComponent,
+    DateFormInputComponent,
+    FacetValueFormInputComponent,
+    NumberFormInputComponent,
+    SelectFormInputComponent,
+    TextFormInputComponent,
+    ProductSelectorFormInputComponent,
+    CustomerGroupFormInputComponent,
+    PasswordFormInputComponent,
+    RelationFormInputComponent,
+    TextareaFormInputComponent,
+    RichTextFormInputComponent,
+    JsonEditorFormInputComponent,
+    ProductMultiSelectorFormInputComponent,
+    CombinationModeFormInputComponent,
 ];
-AssetGalleryComponent.propDecorators = {
-    assets: [{ type: Input }],
-    multiSelect: [{ type: Input }],
-    canDelete: [{ type: Input }],
-    selectionChange: [{ type: Output }],
-    deleteAssets: [{ type: Output }]
-};
-
 /**
  * @description
- * A dialog which allows the creation and selection of assets.
+ * 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
- * selectAssets() {
- *   this.modalService
- *     .fromComponent(AssetPickerDialogComponent, {
- *         size: 'xl',
- *     })
- *     .subscribe(result => {
- *         if (result && result.length) {
- *             // ...
- *         }
- *     });
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   declarations: [MyCustomFieldControl],
+ *   providers: [
+ *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ *
+ * This input component can then be used in a custom field:
+ *
+ * @example
+ * ```TypeScript
+ * const config = {
+ *   // ...
+ *   customFields: {
+ *     ProductVariant: [
+ *       {
+ *         name: 'rrp',
+ *         type: 'int',
+ *         ui: { component: 'my-custom-input' },
+ *       },
+ *     ]
+ *   }
  * }
  * ```
  *
- * @docsCategory components
+ * or with an argument of a {@link ConfigurableOperationDef}:
+ *
+ * @example
+ * ```TypeScript
+ * args: {
+ *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
+ * }
+ * ```
+ *
+ * @docsCategory custom-input-components
  */
-class AssetPickerDialogComponent {
-    constructor(dataService, notificationService) {
+function registerFormInputComponent(id, component) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.registerInputComponent(id, component);
+        },
+        deps: [ComponentRegistryService],
+    };
+}
+/**
+ * @description
+ * **Deprecated** use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
+ * Registers a custom component to act as the form input control for the given custom field.
+ * This should be used in the NgModule `providers` array of your ui extension module.
+ *
+ * @example
+ * ```TypeScript
+ * \@NgModule({
+ *   imports: [SharedModule],
+ *   declarations: [MyCustomFieldControl],
+ *   providers: [
+ *       registerCustomFieldComponent('Product', 'someCustomField', MyCustomFieldControl),
+ *   ],
+ * })
+ * export class MyUiExtensionModule {}
+ * ```
+ *
+ * @deprecated use `registerFormInputComponent()` in combination with the customField `ui` config instead.
+ *
+ * @docsCategory custom-input-components
+ */
+function registerCustomFieldComponent(entity, fieldName, component) {
+    return {
+        provide: APP_INITIALIZER,
+        multi: true,
+        useFactory: (customFieldComponentService) => () => {
+            customFieldComponentService.registerCustomFieldComponent(entity, fieldName, component);
+        },
+        deps: [CustomFieldComponentService],
+    };
+}
+/**
+ * Registers the default form input components.
+ */
+function registerDefaultFormInputs() {
+    return defaultFormInputs.map(cmp => registerFormInputComponent(cmp.id, cmp));
+}
+
+class ActionBarItemsComponent {
+    constructor(navBuilderService, route, dataService, notificationService) {
+        this.navBuilderService = navBuilderService;
+        this.route = route;
         this.dataService = dataService;
         this.notificationService = notificationService;
-        this.paginationConfig = {
-            currentPage: 1,
-            itemsPerPage: 25,
-            totalItems: 1,
-        };
-        this.multiSelect = true;
-        this.initialTags = [];
-        this.selection = [];
-        this.searchTerm$ = new BehaviorSubject(undefined);
-        this.filterByTags$ = new BehaviorSubject(undefined);
-        this.uploading = false;
-        this.destroy$ = new Subject();
+        this.locationId$ = new BehaviorSubject('');
     }
     ngOnInit() {
-        this.listQuery = this.dataService.product.getAssetList(this.paginationConfig.itemsPerPage, 0);
-        this.allTags$ = this.dataService.product.getTagList().mapSingle(data => data.tags.items);
-        this.assets$ = this.listQuery.stream$.pipe(tap(result => (this.paginationConfig.totalItems = result.assets.totalItems)), map(result => result.assets.items));
-        this.searchTerm$.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => {
-            this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
-        });
-        this.filterByTags$.pipe(debounceTime(100), takeUntil(this.destroy$)).subscribe(() => {
-            this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
-        });
+        this.items$ = combineLatest(this.navBuilderService.actionBarConfig$, this.locationId$).pipe(map(([items, locationId]) => items.filter(config => config.locationId === locationId)));
     }
-    ngAfterViewInit() {
-        if (0 < this.initialTags.length) {
-            this.allTags$
-                .pipe(take(1), map(allTags => allTags.filter(tag => this.initialTags.includes(tag.value))), tap(tags => this.filterByTags$.next(tags)), delay(1))
-                .subscribe(tags => this.assetSearchInputComponent.setTags(tags));
+    ngOnChanges(changes) {
+        if ('locationId' in changes) {
+            this.locationId$.next(changes['locationId'].currentValue);
         }
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    pageChange(page) {
-        this.paginationConfig.currentPage = page;
-        this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
-    }
-    itemsPerPageChange(itemsPerPage) {
-        this.paginationConfig.itemsPerPage = itemsPerPage;
-        this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
-    }
-    cancel() {
-        this.resolveWith();
+    handleClick(event, item) {
+        if (typeof item.onClick === 'function') {
+            item.onClick(event, {
+                route: this.route,
+                dataService: this.dataService,
+                notificationService: this.notificationService,
+            });
+        }
     }
-    select() {
-        this.resolveWith(this.selection);
+    getRouterLink(item) {
+        return this.navBuilderService.getRouterLink(item, this.route);
     }
-    createAssets(files) {
-        if (files.length) {
-            this.uploading = true;
-            this.dataService.product
-                .createAssets(files)
-                .pipe(finalize(() => (this.uploading = false)))
-                .subscribe(res => {
-                this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
-                this.notificationService.success(marker('asset.notify-create-assets-success'), {
-                    count: files.length,
-                });
-                const assets = res.createAssets.filter(a => a.__typename === 'Asset');
-                this.assetGalleryComponent.selectMultiple(assets);
-            });
+    getButtonStyles(item) {
+        const styles = ['btn'];
+        if (item.buttonStyle && item.buttonStyle === 'link') {
+            styles.push('btn-link');
+            return styles;
         }
+        styles.push(this.getButtonColorClass(item));
+        return styles;
     }
-    fetchPage(currentPage, itemsPerPage) {
-        var _a;
-        const take = +itemsPerPage;
-        const skip = (currentPage - 1) * +itemsPerPage;
-        const searchTerm = this.searchTerm$.value;
-        const tags = (_a = this.filterByTags$.value) === null || _a === void 0 ? void 0 : _a.map(t => t.value);
-        this.listQuery.ref.refetch({
-            options: {
-                skip,
-                take,
-                filter: {
-                    name: {
-                        contains: searchTerm,
-                    },
-                },
-                sort: {
-                    createdAt: SortOrder.DESC,
-                },
-                tags,
-                tagsOperator: LogicalOperator.AND,
-            },
-        });
+    getButtonColorClass(item) {
+        switch (item.buttonColor) {
+            case undefined:
+            case 'primary':
+                return item.buttonStyle === 'outline' ? 'btn-outline' : 'btn-primary';
+            case 'success':
+                return item.buttonStyle === 'outline' ? 'btn-success-outline' : 'btn-success';
+            case 'warning':
+                return item.buttonStyle === 'outline' ? 'btn-warning-outline' : 'btn-warning';
+            default:
+                assertNever(item.buttonColor);
+                return '';
+        }
     }
 }
-AssetPickerDialogComponent.decorators = [
+ActionBarItemsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-asset-picker-dialog',
-                template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;height:70vh}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"]
+                selector: 'vdr-action-bar-items',
+                template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:inline-block;min-height:36px}\n"]
             },] }
 ];
-AssetPickerDialogComponent.ctorParameters = () => [
+ActionBarItemsComponent.ctorParameters = () => [
+    { type: NavBuilderService },
+    { type: ActivatedRoute },
     { type: DataService },
     { type: NotificationService }
 ];
-AssetPickerDialogComponent.propDecorators = {
-    assetSearchInputComponent: [{ type: ViewChild, args: ['assetSearchInputComponent',] }],
-    assetGalleryComponent: [{ type: ViewChild, args: ['assetGalleryComponent',] }]
+ActionBarItemsComponent.propDecorators = {
+    locationId: [{ type: HostBinding, args: ['attr.data-location-id',] }, { type: Input }]
 };
 
-class AssetPreviewLinksComponent {
+class ActionBarLeftComponent {
     constructor() {
-        this.sizes = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
+        this.grow = false;
     }
 }
-AssetPreviewLinksComponent.decorators = [
+ActionBarLeftComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-asset-preview-links',
-                template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape=\"caret\" dir=\"down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview: size\"\r\n            [title]=\"asset | assetPreview: size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n",
+                selector: 'vdr-ab-left',
+                template: `
+        <ng-content></ng-content>
+    `
+            },] }
+];
+ActionBarLeftComponent.propDecorators = {
+    grow: [{ type: Input }]
+};
+class ActionBarRightComponent {
+    constructor() {
+        this.grow = false;
+    }
+}
+ActionBarRightComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-ab-right',
+                template: `
+        <ng-content></ng-content>
+    `
+            },] }
+];
+ActionBarRightComponent.propDecorators = {
+    grow: [{ type: Input }]
+};
+class ActionBarComponent {
+}
+ActionBarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-action-bar',
+                template: "<div class=\"left-content\" [class.grow]=\"left?.grow\"><ng-content select=\"vdr-ab-left\"></ng-content></div>\r\n<div class=\"right-content\" [class.grow]=\"right?.grow\"><ng-content select=\"vdr-ab-right\"></ng-content></div>\r\n",
+                styles: [":host{display:flex;justify-content:space-between;align-items:baseline;background-color:var(--color-component-bg-100);position:sticky;top:-24px;z-index:25;border-bottom:1px solid var(--color-component-border-200)}:host>.grow{flex:1}\n"]
+            },] }
+];
+ActionBarComponent.propDecorators = {
+    left: [{ type: ContentChild, args: [ActionBarLeftComponent,] }],
+    right: [{ type: ContentChild, args: [ActionBarRightComponent,] }]
+};
+
+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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".asset-preview-link{font-size:12px}\n"]
+                styles: [""]
             },] }
 ];
-AssetPreviewLinksComponent.propDecorators = {
-    asset: [{ type: Input }]
+AddressFormComponent.propDecorators = {
+    customFields: [{ type: Input }],
+    formGroup: [{ type: Input }],
+    availableCountries: [{ type: Input }]
 };
 
-class ManageTagsDialogComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.toDelete = [];
-        this.toUpdate = [];
-    }
-    ngOnInit() {
-        this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
+/**
+ * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+ */
+class AffixedInputComponent {
+}
+AffixedInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-affixed-input',
+                template: "<div [class.has-prefix]=\"!!prefix\" [class.has-suffix]=\"!!suffix\">\r\n    <ng-content></ng-content>\r\n</div>\r\n<div class=\"affix prefix\" *ngIf=\"prefix\">{{ prefix }}</div>\r\n<div class=\"affix suffix\" *ngIf=\"suffix\">{{ suffix }}</div>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:inline-flex}.affix{color:var(--color-grey-800);display:flex;align-items:center;background-color:var(--color-grey-200);border:1px solid var(--color-component-border-300);top:1px;padding:3px;line-height:.58333rem;transition:border .2s}::ng-deep .has-prefix input{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.prefix{order:-1;border-radius:3px 0 0 3px;border-right:none}::ng-deep .has-suffix input{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.suffix{border-radius:0 3px 3px 0;border-left:none}\n"]
+            },] }
+];
+AffixedInputComponent.propDecorators = {
+    prefix: [{ type: Input }],
+    suffix: [{ type: Input }]
+};
+
+/**
+ * A form input control which displays a number input with a percentage sign suffix.
+ */
+class PercentageSuffixInputComponent {
+    constructor() {
+        this.disabled = false;
+        this.readonly = false;
     }
-    toggleDelete(id) {
-        const marked = this.markedAsDeleted(id);
-        if (marked) {
-            this.toDelete = this.toDelete.filter(_id => _id !== id);
-        }
-        else {
-            this.toDelete.push(id);
+    ngOnChanges(changes) {
+        if ('value' in changes) {
+            this.writeValue(changes['value'].currentValue);
         }
     }
-    markedAsDeleted(id) {
-        return this.toDelete.includes(id);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    updateTagValue(id, value) {
-        const exists = this.toUpdate.find(i => i.id === id);
-        if (exists) {
-            exists.value = value;
-        }
-        else {
-            this.toUpdate.push({ id, value });
-        }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
     }
-    saveChanges() {
-        const operations = [];
-        for (const id of this.toDelete) {
-            operations.push(this.dataService.product.deleteTag(id));
-        }
-        for (const item of this.toUpdate) {
-            if (!this.toDelete.includes(item.id)) {
-                operations.push(this.dataService.product.updateTag(item));
-            }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onInput(value) {
+        this.onChange(value);
+    }
+    writeValue(value) {
+        const numericValue = +value;
+        if (!Number.isNaN(numericValue)) {
+            this._value = numericValue;
         }
-        return forkJoin(operations).subscribe(() => this.resolveWith(true));
     }
 }
-ManageTagsDialogComponent.decorators = [
+PercentageSuffixInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-manage-tags-dialog',
-                template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb2 p1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"]
+                selector: 'vdr-percentage-suffix-input',
+                template: `
+        <vdr-affixed-input suffix="%">
+            <input
+                type="number"
+                step="1"
+                [value]="_value"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                (input)="onInput($event.target.value)"
+                (focus)="onTouch()"
+            />
+        </vdr-affixed-input>
+    `,
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: PercentageSuffixInputComponent,
+                        multi: true,
+                    },
+                ],
+                styles: [`
+            :host {
+                padding: 0;
+            }
+        `]
             },] }
 ];
-ManageTagsDialogComponent.ctorParameters = () => [
-    { type: DataService }
-];
+PercentageSuffixInputComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
+    value: [{ type: Input }]
+};
 
-class AssetPreviewComponent {
-    constructor(formBuilder, dataService, notificationService, changeDetector, modalService) {
-        this.formBuilder = formBuilder;
-        this.dataService = dataService;
-        this.notificationService = notificationService;
-        this.changeDetector = changeDetector;
-        this.modalService = modalService;
-        this.editable = false;
-        this.customFields = [];
-        this.assetChange = new EventEmitter();
-        this.editClick = new EventEmitter();
-        this.size = 'medium';
-        this.width = 0;
-        this.height = 0;
-        this.centered = true;
-        this.settingFocalPoint = false;
-    }
-    get fpx() {
-        return this.asset.focalPoint ? this.asset.focalPoint.x : null;
-    }
-    get fpy() {
-        return this.asset.focalPoint ? this.asset.focalPoint.y : null;
+/**
+ * A component for selecting files to upload as new Assets.
+ */
+class AssetFileInputComponent {
+    constructor(serverConfig) {
+        this.serverConfig = serverConfig;
+        /**
+         * CSS selector of the DOM element which will be masked by the file
+         * drop zone. Defaults to `body`.
+         */
+        this.dropZoneTarget = 'body';
+        this.uploading = false;
+        this.selectFiles = new EventEmitter();
+        this.dragging = false;
+        this.overDropZone = false;
+        this.dropZoneStyle = {
+            'width.px': 0,
+            'height.px': 0,
+            'top.px': 0,
+            'left.px': 0,
+        };
     }
     ngOnInit() {
-        var _a;
-        const { focalPoint } = this.asset;
-        this.form = this.formBuilder.group({
-            name: [this.asset.name],
-            tags: [(_a = this.asset.tags) === null || _a === void 0 ? void 0 : _a.map(t => t.value)],
-        });
-        this.subscription = this.form.valueChanges.subscribe(value => {
-            this.assetChange.emit({
-                id: this.asset.id,
-                name: value.name,
-                tags: value.tags,
-            });
-        });
-        this.subscription.add(fromEvent(window, 'resize')
-            .pipe(debounceTime(50))
-            .subscribe(() => {
-            this.updateDimensions();
-            this.changeDetector.markForCheck();
-        }));
+        this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
+        this.fitDropZoneToTarget();
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    getSourceFileName() {
-        const parts = this.asset.source.split(/[\\\/]/g);
-        return parts[parts.length - 1];
-    }
-    onImageLoad() {
-        this.updateDimensions();
-        this.changeDetector.markForCheck();
+    onDragEnter() {
+        this.dragging = true;
+        this.fitDropZoneToTarget();
     }
-    updateDimensions() {
-        const img = this.imageElementRef.nativeElement;
-        const container = this.previewDivRef.nativeElement;
-        const imgWidth = img.naturalWidth;
-        const imgHeight = img.naturalHeight;
-        const containerWidth = container.offsetWidth;
-        const containerHeight = container.offsetHeight;
-        const constrainToContainer = this.settingFocalPoint;
-        if (constrainToContainer) {
-            const controlsMarginPx = 48 * 2;
-            const availableHeight = containerHeight - controlsMarginPx;
-            const availableWidth = containerWidth;
-            const hRatio = imgHeight / availableHeight;
-            const wRatio = imgWidth / availableWidth;
-            const imageExceedsAvailableDimensions = 1 < hRatio || 1 < wRatio;
-            if (imageExceedsAvailableDimensions) {
-                const factor = hRatio < wRatio ? wRatio : hRatio;
-                this.width = Math.round(imgWidth / factor);
-                this.height = Math.round(imgHeight / factor);
-                this.centered = true;
-                return;
-            }
+    // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
+    onDragLeave(event) {
+        if (!event.clientX && !event.clientY) {
+            this.dragging = false;
         }
-        this.width = imgWidth;
-        this.height = imgHeight;
-        this.centered = imgWidth <= containerWidth && imgHeight <= containerHeight;
-    }
-    setFocalPointStart() {
-        this.sizePriorToSettingFocalPoint = this.size;
-        this.size = 'medium';
-        this.settingFocalPoint = true;
-        this.lastFocalPoint = this.asset.focalPoint || { x: 0.5, y: 0.5 };
-        this.updateDimensions();
-    }
-    removeFocalPoint() {
-        this.dataService.product
-            .updateAsset({
-            id: this.asset.id,
-            focalPoint: null,
-        })
-            .subscribe(() => {
-            this.notificationService.success(marker('asset.update-focal-point-success'));
-            this.asset = Object.assign(Object.assign({}, this.asset), { focalPoint: null });
-            this.changeDetector.markForCheck();
-        }, () => this.notificationService.error(marker('asset.update-focal-point-error')));
     }
-    onFocalPointChange(point) {
-        this.lastFocalPoint = point;
+    /**
+     * Preventing this event is required to make dropping work.
+     * See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API#Define_a_drop_zone
+     */
+    onDragOver(event) {
+        event.preventDefault();
     }
-    setFocalPointCancel() {
-        this.settingFocalPoint = false;
-        this.lastFocalPoint = undefined;
-        this.size = this.sizePriorToSettingFocalPoint;
+    // DragEvent is not supported in Safari, see https://github.com/vendure-ecommerce/vendure/pull/284
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging = false;
+        this.overDropZone = false;
+        const files = Array.from(event.dataTransfer ? event.dataTransfer.items : [])
+            .map(i => i.getAsFile())
+            .filter(notNullOrUndefined);
+        this.selectFiles.emit(files);
     }
-    setFocalPointEnd() {
-        this.settingFocalPoint = false;
-        this.size = this.sizePriorToSettingFocalPoint;
-        if (this.lastFocalPoint) {
-            const { x, y } = this.lastFocalPoint;
-            this.lastFocalPoint = undefined;
-            this.dataService.product
-                .updateAsset({
-                id: this.asset.id,
-                focalPoint: { x, y },
-            })
-                .subscribe(() => {
-                this.notificationService.success(marker('asset.update-focal-point-success'));
-                this.asset = Object.assign(Object.assign({}, this.asset), { focalPoint: { x, y } });
-                this.changeDetector.markForCheck();
-            }, () => this.notificationService.error(marker('asset.update-focal-point-error')));
+    select(event) {
+        const files = event.target.files;
+        if (files) {
+            this.selectFiles.emit(Array.from(files));
         }
     }
-    manageTags() {
-        this.modalService
-            .fromComponent(ManageTagsDialogComponent, {
-            size: 'sm',
-        })
-            .subscribe(result => {
-            if (result) {
-                this.notificationService.success(marker('common.notify-updated-tags-success'));
-            }
-        });
+    fitDropZoneToTarget() {
+        const target = document.querySelector(this.dropZoneTarget);
+        if (target) {
+            const rect = target.getBoundingClientRect();
+            this.dropZoneStyle['width.px'] = rect.width;
+            this.dropZoneStyle['height.px'] = rect.height;
+            this.dropZoneStyle['top.px'] = rect.top;
+            this.dropZoneStyle['left.px'] = rect.left;
+        }
     }
 }
-AssetPreviewComponent.decorators = [
+AssetFileInputComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-asset-preview',
-                template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n",
+                selector: 'vdr-asset-file-input',
+                template: "<input type=\"file\" class=\"file-input\" #fileInput (change)=\"select($event)\" multiple [accept]=\"accept\" />\r\n<button class=\"btn btn-primary\" (click)=\"fileInput.click()\" [disabled]=\"uploading\">\r\n    <ng-container *ngIf=\"uploading; else selectable\">\r\n        <clr-spinner clrInline></clr-spinner>\r\n        {{ 'asset.uploading' | translate }}\r\n    </ng-container>\r\n    <ng-template #selectable>\r\n        <clr-icon shape=\"upload-cloud\"></clr-icon>\r\n        {{ 'asset.upload-assets' | translate }}\r\n    </ng-template>\r\n</button>\r\n<div\r\n    class=\"drop-zone\"\r\n    [ngStyle]=\"dropZoneStyle\"\r\n    [class.visible]=\"dragging\"\r\n    [class.dragging-over]=\"overDropZone\"\r\n    (dragenter)=\"overDropZone = true\"\r\n    (dragleave)=\"overDropZone = false\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n    #dropZone\r\n>\r\n    <div class=\"drop-label\" (dragenter)=\"overDropZone = true\">\r\n        <clr-icon shape=\"upload-cloud\" size=\"32\"></clr-icon>\r\n        {{ 'catalog.drop-files-to-upload' | translate }}\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"]
+                styles: [".file-input{display:none}.drop-zone{position:fixed;background-color:var(--color-primary-500);border:3px dashed var(--color-component-border-300);opacity:0;visibility:hidden;z-index:1000;transition:opacity .2s,background-color .2s,visibility 0s .2s;display:flex;align-items:center;justify-content:center}.drop-zone.visible{opacity:.3;visibility:visible;transition:opacity .2s,background-color .2s,border .2s,visibility 0s}.drop-zone .drop-label{background-color:#fffc;border-radius:3px;padding:24px;font-size:32px;pointer-events:none;opacity:.5;transition:opacity .2s}.drop-zone.dragging-over{border-color:#fff;background-color:var(--color-primary-500);opacity:.7;transition:background-color .2s,border .2s}.drop-zone.dragging-over .drop-label{opacity:1}\n"]
             },] }
 ];
-AssetPreviewComponent.ctorParameters = () => [
-    { type: FormBuilder },
-    { type: DataService },
-    { type: NotificationService },
-    { type: ChangeDetectorRef },
-    { type: ModalService }
+AssetFileInputComponent.ctorParameters = () => [
+    { type: ServerConfigService }
 ];
-AssetPreviewComponent.propDecorators = {
-    asset: [{ type: Input }],
-    editable: [{ type: Input }],
-    customFields: [{ type: Input }],
-    customFieldsForm: [{ type: Input }],
-    assetChange: [{ type: Output }],
-    editClick: [{ type: Output }],
-    imageElementRef: [{ type: ViewChild, args: ['imageElement', { static: true },] }],
-    previewDivRef: [{ type: ViewChild, args: ['previewDiv', { static: true },] }]
+AssetFileInputComponent.propDecorators = {
+    dropZoneTarget: [{ type: Input }],
+    uploading: [{ type: Input }],
+    selectFiles: [{ type: Output }],
+    onDragEnter: [{ type: HostListener, args: ['document:dragenter',] }],
+    onDragLeave: [{ type: HostListener, args: ['document:dragleave', ['$event'],] }]
 };
 
-/**
- * A custom SelectionModel for the NgSelect component which only allows a single
- * search term at a time.
- */
-class SingleSearchSelectionModel {
-    constructor() {
-        this._selected = [];
-    }
-    get value() {
-        return this._selected;
+class AssetPreviewDialogComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
     }
-    select(item, multiple, groupAsModel) {
-        item.selected = true;
-        if (groupAsModel || !item.children) {
-            if (item.value.label) {
-                const isSearchTerm = (i) => !!i.value.label;
-                const searchTerms = this._selected.filter(isSearchTerm);
-                if (searchTerms.length > 0) {
-                    // there is already a search term, so replace it with this new one.
-                    this._selected = this._selected.filter(i => !isSearchTerm(i)).concat(item);
-                }
-                else {
-                    this._selected.push(item);
-                }
+    ngOnInit() {
+        this.assetWithTags$ = of(this.asset).pipe(mergeMap(asset => {
+            if (this.hasTags(asset)) {
+                return of(asset);
             }
             else {
-                this._selected.push(item);
+                // tslint:disable-next-line:no-non-null-assertion
+                return this.dataService.product.getAsset(asset.id).mapSingle(data => data.asset);
+            }
+        }));
+    }
+    hasTags(asset) {
+        return asset.hasOwnProperty('tags');
+    }
+}
+AssetPreviewDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-asset-preview-dialog',
+                template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{height:70vh}.update-button.hidden{visibility:hidden}\n"]
+            },] }
+];
+AssetPreviewDialogComponent.ctorParameters = () => [
+    { type: DataService }
+];
+
+class AssetGalleryComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        /**
+         * If true, allows multiple assets to be selected by ctrl+clicking.
+         */
+        this.multiSelect = false;
+        this.canDelete = false;
+        this.selectionChange = new EventEmitter();
+        this.deleteAssets = new EventEmitter();
+        this.selectionManager = new SelectionManager({
+            multiSelect: this.multiSelect,
+            itemsAreEqual: (a, b) => a.id === b.id,
+            additiveMode: false,
+        });
+    }
+    ngOnChanges(changes) {
+        if (this.assets) {
+            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) {
+                    Object.assign(asset, match);
+                }
             }
         }
+        if (changes['assets']) {
+            this.selectionManager.setCurrentItems(this.assets);
+        }
+        if (changes['multiSelect']) {
+            this.selectionManager.setMultiSelect(this.multiSelect);
+        }
     }
-    unselect(item, multiple) {
-        this._selected = this._selected.filter(x => x !== item);
-        item.selected = false;
+    toggleSelection(asset, event) {
+        this.selectionManager.toggleSelection(asset, event);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
-    clear(keepDisabled) {
-        this._selected = keepDisabled ? this._selected.filter(x => x.disabled) : [];
+    selectMultiple(assets) {
+        this.selectionManager.selectMultiple(assets);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
-    _setChildrenSelectedState(children, selected) {
-        children.forEach(x => (x.selected = selected));
+    isSelected(asset) {
+        return this.selectionManager.isSelected(asset);
     }
-    _removeChildren(parent) {
-        this._selected = this._selected.filter(x => x.parent !== parent);
+    lastSelected() {
+        return this.selectionManager.lastSelected();
     }
-    _removeParent(parent) {
-        this._selected = this._selected.filter(x => x !== parent);
+    previewAsset(asset) {
+        this.modalService
+            .fromComponent(AssetPreviewDialogComponent, {
+            size: 'xl',
+            closable: true,
+            locals: { asset },
+        })
+            .subscribe();
+    }
+    entityInfoClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
     }
 }
-function SingleSearchSelectionModelFactory() {
-    return new SingleSearchSelectionModel();
-}
+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            <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}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 = () => [
+    { type: ModalService }
+];
+AssetGalleryComponent.propDecorators = {
+    assets: [{ type: Input }],
+    multiSelect: [{ type: Input }],
+    canDelete: [{ type: Input }],
+    selectionChange: [{ type: Output }],
+    deleteAssets: [{ type: Output }]
+};
 
-const ɵ0 = SingleSearchSelectionModelFactory;
-class AssetSearchInputComponent {
-    constructor() {
-        this.searchTermChange = new EventEmitter();
-        this.tagsChange = new EventEmitter();
-        this.lastTerm = '';
-        this.lastTagIds = [];
-        this.filterTagResults = (term, item) => {
-            if (!this.isTag(item)) {
-                return false;
-            }
-            return item.value.toLowerCase().startsWith(term.toLowerCase());
-        };
-        this.isTag = (input) => {
-            return typeof input === 'object' && !!input && input.hasOwnProperty('value');
+/**
+ * @description
+ * A dialog which allows the creation and selection of assets.
+ *
+ * @example
+ * ```TypeScript
+ * selectAssets() {
+ *   this.modalService
+ *     .fromComponent(AssetPickerDialogComponent, {
+ *         size: 'xl',
+ *     })
+ *     .subscribe(result => {
+ *         if (result && result.length) {
+ *             // ...
+ *         }
+ *     });
+ * }
+ * ```
+ *
+ * @docsCategory components
+ */
+class AssetPickerDialogComponent {
+    constructor(dataService, notificationService) {
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.paginationConfig = {
+            currentPage: 1,
+            itemsPerPage: 25,
+            totalItems: 1,
         };
+        this.multiSelect = true;
+        this.initialTags = [];
+        this.selection = [];
+        this.searchTerm$ = new BehaviorSubject(undefined);
+        this.filterByTags$ = new BehaviorSubject(undefined);
+        this.uploading = false;
+        this.destroy$ = new Subject();
     }
-    setSearchTerm(term) {
-        if (term) {
-            this.selectComponent.select({ label: term, value: { label: term } });
-        }
-        else {
-            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isTag(i.value));
-            if (currentTerm) {
-                this.selectComponent.unselect(currentTerm);
-            }
-        }
-    }
-    setTags(tags) {
-        const items = this.selectComponent.items;
-        this.selectComponent.selectedItems.forEach(item => {
-            if (this.isTag(item.value) && !tags.map(t => t.id).includes(item.id)) {
-                this.selectComponent.unselect(item);
-            }
+    ngOnInit() {
+        this.listQuery = this.dataService.product.getAssetList(this.paginationConfig.itemsPerPage, 0);
+        this.allTags$ = this.dataService.product.getTagList().mapSingle(data => data.tags.items);
+        this.assets$ = this.listQuery.stream$.pipe(tap(result => (this.paginationConfig.totalItems = result.assets.totalItems)), map(result => result.assets.items));
+        this.searchTerm$.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => {
+            this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
         });
-        tags.map(tag => {
-            return items === null || items === void 0 ? void 0 : items.find(item => this.isTag(item) && item.id === tag.id);
-        })
-            .filter(notNullOrUndefined)
-            .forEach(item => {
-            const isSelected = this.selectComponent.selectedItems.find(i => {
-                const val = i.value;
-                if (this.isTag(val)) {
-                    return val.id === item.id;
-                }
-                return false;
-            });
-            if (!isSelected) {
-                this.selectComponent.select({ label: '', value: item });
-            }
+        this.filterByTags$.pipe(debounceTime(100), takeUntil(this.destroy$)).subscribe(() => {
+            this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
         });
     }
-    onSelectChange(selectedItems) {
-        if (!Array.isArray(selectedItems)) {
-            selectedItems = [selectedItems];
-        }
-        const searchTermItems = selectedItems.filter(item => !this.isTag(item));
-        if (1 < searchTermItems.length) {
-            for (let i = 0; i < searchTermItems.length - 1; i++) {
-                // this.selectComponent.unselect(searchTermItems[i] as any);
-            }
-        }
-        const searchTermItem = searchTermItems[searchTermItems.length - 1];
-        const searchTerm = searchTermItem ? searchTermItem.label : '';
-        const tags = selectedItems.filter(this.isTag);
-        if (searchTerm !== this.lastTerm) {
-            this.searchTermChange.emit(searchTerm);
-            this.lastTerm = searchTerm;
+    ngAfterViewInit() {
+        if (0 < this.initialTags.length) {
+            this.allTags$
+                .pipe(take(1), map(allTags => allTags.filter(tag => this.initialTags.includes(tag.value))), tap(tags => this.filterByTags$.next(tags)), delay(1))
+                .subscribe(tags => this.assetSearchInputComponent.setTags(tags));
         }
-        if (this.lastTagIds.join(',') !== tags.map(t => t.id).join(',')) {
-            this.tagsChange.emit(tags);
-            this.lastTagIds = tags.map(t => t.id);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    pageChange(page) {
+        this.paginationConfig.currentPage = page;
+        this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
+    }
+    itemsPerPageChange(itemsPerPage) {
+        this.paginationConfig.itemsPerPage = itemsPerPage;
+        this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    select() {
+        this.resolveWith(this.selection);
+    }
+    createAssets(files) {
+        if (files.length) {
+            this.uploading = true;
+            this.dataService.product
+                .createAssets(files)
+                .pipe(finalize(() => (this.uploading = false)))
+                .subscribe(res => {
+                this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage);
+                this.notificationService.success(marker('asset.notify-create-assets-success'), {
+                    count: files.length,
+                });
+                const assets = res.createAssets.filter(a => a.__typename === 'Asset');
+                this.assetGalleryComponent.selectMultiple(assets);
+            });
         }
     }
-    isSearchHeaderSelected() {
-        return this.selectComponent.itemsList.markedIndex === -1;
+    fetchPage(currentPage, itemsPerPage) {
+        var _a;
+        const take = +itemsPerPage;
+        const skip = (currentPage - 1) * +itemsPerPage;
+        const searchTerm = this.searchTerm$.value;
+        const tags = (_a = this.filterByTags$.value) === null || _a === void 0 ? void 0 : _a.map(t => t.value);
+        this.listQuery.ref.refetch({
+            options: {
+                skip,
+                take,
+                filter: {
+                    name: {
+                        contains: searchTerm,
+                    },
+                },
+                sort: {
+                    createdAt: SortOrder.DESC,
+                },
+                tags,
+                tagsOperator: LogicalOperator.AND,
+            },
+        });
     }
-    addTagFn(item) {
-        return { label: item };
+}
+AssetPickerDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'vdr-asset-picker-dialog',
+                template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [":host{display:flex;flex-direction:column;height:70vh}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"]
+            },] }
+];
+AssetPickerDialogComponent.ctorParameters = () => [
+    { type: DataService },
+    { type: NotificationService }
+];
+AssetPickerDialogComponent.propDecorators = {
+    assetSearchInputComponent: [{ type: ViewChild, args: ['assetSearchInputComponent',] }],
+    assetGalleryComponent: [{ type: ViewChild, args: ['assetGalleryComponent',] }]
+};
+
+class AssetPreviewLinksComponent {
+    constructor() {
+        this.sizes = ['tiny', 'thumb', 'small', 'medium', 'large', 'full'];
     }
 }
-AssetSearchInputComponent.decorators = [
+AssetPreviewLinksComponent.decorators = [
     { type: Component, args: [{
-                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",
+                selector: 'vdr-asset-preview-links',
+                template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape=\"caret\" dir=\"down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview: size\"\r\n            [title]=\"asset | assetPreview: size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
-                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"]
+                styles: [".asset-preview-link{font-size:12px}\n"]
             },] }
 ];
-AssetSearchInputComponent.propDecorators = {
-    tags: [{ type: Input }],
-    searchTermChange: [{ type: Output }],
-    tagsChange: [{ type: Output }],
-    selectComponent: [{ type: ViewChild, args: ['selectComponent', { static: true },] }]
+AssetPreviewLinksComponent.propDecorators = {
+    asset: [{ type: Input }]
 };
 
-class ChannelAssignmentControlComponent {
+class ManageTagsDialogComponent {
     constructor(dataService) {
         this.dataService = dataService;
-        this.multiple = true;
-        this.includeDefaultChannel = true;
-        this.disableChannelIds = [];
-        this.value = [];
-        this.disabled = false;
+        this.toDelete = [];
+        this.toUpdate = [];
     }
     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;
+        this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
     }
-    writeValue(obj) {
-        this.lastIncomingValue = obj;
-        this.mapIncomingValueToChannels(obj);
-    }
-    focussed() {
-        if (this.onTouched) {
-            this.onTouched();
+    toggleDelete(id) {
+        const marked = this.markedAsDeleted(id);
+        if (marked) {
+            this.toDelete = this.toDelete.filter(_id => _id !== id);
+        }
+        else {
+            this.toDelete.push(id);
         }
     }
-    channelIsDisabled(id) {
-        return this.disableChannelIds.includes(id);
+    markedAsDeleted(id) {
+        return this.toDelete.includes(id);
     }
-    valueChanged(value) {
-        if (Array.isArray(value)) {
-            this.onChange(value.map(c => c.id));
+    updateTagValue(id, value) {
+        const exists = this.toUpdate.find(i => i.id === id);
+        if (exists) {
+            exists.value = value;
         }
         else {
-            this.onChange([value ? value.id : undefined]);
+            this.toUpdate.push({ id, value });
         }
     }
-    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;
-            }
+    saveChanges() {
+        const operations = [];
+        for (const id of this.toDelete) {
+            operations.push(this.dataService.product.deleteTag(id));
         }
-        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];
+        for (const item of this.toUpdate) {
+            if (!this.toDelete.includes(item.id)) {
+                operations.push(this.dataService.product.updateTag(item));
             }
         }
+        return forkJoin(operations).subscribe(() => this.resolveWith(true));
     }
 }
-ChannelAssignmentControlComponent.decorators = [
+ManageTagsDialogComponent.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"]
+                selector: 'vdr-manage-tags-dialog',
+                template: "<ng-template vdrDialogTitle>\r\n    <span>{{ 'common.manage-tags' | translate }}</span>\r\n</ng-template>\r\n<p class=\"mt0 mb4\">{{ 'common.manage-tags-description' | translate }}</p>\r\n<ul class=\"tag-list\" *ngFor=\"let tag of allTags$ | async\">\r\n    <li class=\"mb2 p1\" [class.to-delete]=\"markedAsDeleted(tag.id)\">\r\n        <clr-icon shape=\"tag\" class=\"is-solid mr2\" [style.color]=\"tag.value | stringToColor\"></clr-icon>\r\n        <input type=\"text\" (input)=\"updateTagValue(tag.id, $event.target.value)\" [value]=\"tag.value\" />\r\n        <button class=\"icon-button\" (click)=\"toggleDelete(tag.id)\">\r\n            <clr-icon shape=\"trash\" class=\"is-danger\" [class.is-solid]=\"markedAsDeleted(tag.id)\"></clr-icon>\r\n        </button>\r\n    </li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"resolveWith(false)\" class=\"btn btn-secondary\">\r\n        {{ 'common.cancel' | translate }}\r\n    </button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"saveChanges()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"!toUpdate.length && !toDelete.length\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".tag-list{list-style-type:none}.tag-list li{display:flex;align-items:center}.tag-list li input{max-width:170px}.tag-list li.to-delete{opacity:.7;background-color:var(--color-component-bg-300)}.tag-list li.to-delete input{background-color:transparent!important}\n"]
             },] }
 ];
-ChannelAssignmentControlComponent.ctorParameters = () => [
+ManageTagsDialogComponent.ctorParameters = () => [
     { type: DataService }
-];
-ChannelAssignmentControlComponent.propDecorators = {
-    multiple: [{ type: Input }],
-    includeDefaultChannel: [{ type: Input }],
-    disableChannelIds: [{ type: Input }]
-};
+];
 
-class ChannelBadgeComponent {
-    get isDefaultChannel() {
-        return this.channelCode === DEFAULT_CHANNEL_CODE;
+class AssetPreviewComponent {
+    constructor(formBuilder, dataService, notificationService, changeDetector, modalService) {
+        this.formBuilder = formBuilder;
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.changeDetector = changeDetector;
+        this.modalService = modalService;
+        this.editable = false;
+        this.customFields = [];
+        this.assetChange = new EventEmitter();
+        this.editClick = new EventEmitter();
+        this.size = 'medium';
+        this.width = 0;
+        this.height = 0;
+        this.centered = true;
+        this.settingFocalPoint = false;
+    }
+    get fpx() {
+        return this.asset.focalPoint ? this.asset.focalPoint.x : null;
+    }
+    get fpy() {
+        return this.asset.focalPoint ? this.asset.focalPoint.y : null;
+    }
+    ngOnInit() {
+        var _a;
+        const { focalPoint } = this.asset;
+        this.form = this.formBuilder.group({
+            name: [this.asset.name],
+            tags: [(_a = this.asset.tags) === null || _a === void 0 ? void 0 : _a.map(t => t.value)],
+        });
+        this.subscription = this.form.valueChanges.subscribe(value => {
+            this.assetChange.emit({
+                id: this.asset.id,
+                name: value.name,
+                tags: value.tags,
+            });
+        });
+        this.subscription.add(fromEvent(window, 'resize')
+            .pipe(debounceTime(50))
+            .subscribe(() => {
+            this.updateDimensions();
+            this.changeDetector.markForCheck();
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    getSourceFileName() {
+        const parts = this.asset.source.split(/[\\\/]/g);
+        return parts[parts.length - 1];
+    }
+    onImageLoad() {
+        this.updateDimensions();
+        this.changeDetector.markForCheck();
+    }
+    updateDimensions() {
+        const img = this.imageElementRef.nativeElement;
+        const container = this.previewDivRef.nativeElement;
+        const imgWidth = img.naturalWidth;
+        const imgHeight = img.naturalHeight;
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        const constrainToContainer = this.settingFocalPoint;
+        if (constrainToContainer) {
+            const controlsMarginPx = 48 * 2;
+            const availableHeight = containerHeight - controlsMarginPx;
+            const availableWidth = containerWidth;
+            const hRatio = imgHeight / availableHeight;
+            const wRatio = imgWidth / availableWidth;
+            const imageExceedsAvailableDimensions = 1 < hRatio || 1 < wRatio;
+            if (imageExceedsAvailableDimensions) {
+                const factor = hRatio < wRatio ? wRatio : hRatio;
+                this.width = Math.round(imgWidth / factor);
+                this.height = Math.round(imgHeight / factor);
+                this.centered = true;
+                return;
+            }
+        }
+        this.width = imgWidth;
+        this.height = imgHeight;
+        this.centered = imgWidth <= containerWidth && imgHeight <= containerHeight;
+    }
+    setFocalPointStart() {
+        this.sizePriorToSettingFocalPoint = this.size;
+        this.size = 'medium';
+        this.settingFocalPoint = true;
+        this.lastFocalPoint = this.asset.focalPoint || { x: 0.5, y: 0.5 };
+        this.updateDimensions();
+    }
+    removeFocalPoint() {
+        this.dataService.product
+            .updateAsset({
+            id: this.asset.id,
+            focalPoint: null,
+        })
+            .subscribe(() => {
+            this.notificationService.success(marker('asset.update-focal-point-success'));
+            this.asset = Object.assign(Object.assign({}, this.asset), { focalPoint: null });
+            this.changeDetector.markForCheck();
+        }, () => this.notificationService.error(marker('asset.update-focal-point-error')));
+    }
+    onFocalPointChange(point) {
+        this.lastFocalPoint = point;
+    }
+    setFocalPointCancel() {
+        this.settingFocalPoint = false;
+        this.lastFocalPoint = undefined;
+        this.size = this.sizePriorToSettingFocalPoint;
+    }
+    setFocalPointEnd() {
+        this.settingFocalPoint = false;
+        this.size = this.sizePriorToSettingFocalPoint;
+        if (this.lastFocalPoint) {
+            const { x, y } = this.lastFocalPoint;
+            this.lastFocalPoint = undefined;
+            this.dataService.product
+                .updateAsset({
+                id: this.asset.id,
+                focalPoint: { x, y },
+            })
+                .subscribe(() => {
+                this.notificationService.success(marker('asset.update-focal-point-success'));
+                this.asset = Object.assign(Object.assign({}, this.asset), { focalPoint: { x, y } });
+                this.changeDetector.markForCheck();
+            }, () => this.notificationService.error(marker('asset.update-focal-point-error')));
+        }
+    }
+    manageTags() {
+        this.modalService
+            .fromComponent(ManageTagsDialogComponent, {
+            size: 'sm',
+        })
+            .subscribe(result => {
+            if (result) {
+                this.notificationService.success(marker('common.notify-updated-tags-success'));
+            }
+        });
     }
 }
-ChannelBadgeComponent.decorators = [
+AssetPreviewComponent.decorators = [
     { type: Component, args: [{
-                selector: 'vdr-channel-badge',
-                template: "<clr-icon shape=\"layers\" [style.color]=\"isDefaultChannel ? '#aaa' : (channelCode | stringToColor)\"></clr-icon>\r\n",
+                selector: 'vdr-asset-preview',
+                template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block}button :host{margin-bottom:-1px}clr-icon{margin-right:6px}\n"]
+                styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"]
             },] }
 ];
-ChannelBadgeComponent.propDecorators = {
-    channelCode: [{ type: Input }]
+AssetPreviewComponent.ctorParameters = () => [
+    { type: FormBuilder },
+    { type: DataService },
+    { type: NotificationService },
+    { type: ChangeDetectorRef },
+    { type: ModalService }
+];
+AssetPreviewComponent.propDecorators = {
+    asset: [{ type: Input }],
+    editable: [{ type: Input }],
+    customFields: [{ type: Input }],
+    customFieldsForm: [{ type: Input }],
+    assetChange: [{ type: Output }],
+    editClick: [{ type: Output }],
+    imageElementRef: [{ type: ViewChild, args: ['imageElement', { static: true },] }],
+    previewDivRef: [{ type: ViewChild, args: ['previewDiv', { static: true },] }]
 };
 
 /**
- * @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
+ * A custom SelectionModel for the NgSelect component which only allows a single
+ * search term at a time.
  */
-class ChipComponent {
+class SingleSearchSelectionModel {
     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;
+        this._selected = [];
     }
-    if (def.code !== value.code) {
-        return false;
+    get value() {
+        return this._selected;
     }
-    for (const argDef of def.args) {
-        const argVal = value.args[argDef.name];
-        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
-            return false;
+    select(item, multiple, groupAsModel) {
+        item.selected = true;
+        if (groupAsModel || !item.children) {
+            if (item.value.label) {
+                const isSearchTerm = (i) => !!i.value.label;
+                const searchTerms = this._selected.filter(isSearchTerm);
+                if (searchTerms.length > 0) {
+                    // there is already a search term, so replace it with this new one.
+                    this._selected = this._selected.filter(i => !isSearchTerm(i)).concat(item);
+                }
+                else {
+                    this._selected.push(item);
+                }
+            }
+            else {
+                this._selected.push(item);
+            }
         }
     }
-    return true;
-}
-/**
- * Returns a default value based on the type of the config arg.
- */
-function getDefaultConfigArgValue(arg) {
-    if (arg.list) {
-        return [];
+    unselect(item, multiple) {
+        this._selected = this._selected.filter(x => x !== item);
+        item.selected = false;
     }
-    if (arg.defaultValue) {
-        return arg.defaultValue;
+    clear(keepDisabled) {
+        this._selected = keepDisabled ? this._selected.filter(x => x.disabled) : [];
     }
-    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);
+    _setChildrenSelectedState(children, selected) {
+        children.forEach(x => (x.selected = selected));
     }
-}
-
-/**
- * Interpolates the description of an ConfigurableOperation with the given values.
- */
-function interpolateDescription(operation, values) {
-    if (!operation) {
-        return '';
+    _removeChildren(parent) {
+        this._selected = this._selected.filter(x => x.parent !== parent);
     }
-    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;
+    _removeParent(parent) {
+        this._selected = this._selected.filter(x => x !== parent);
+    }
+}
+function SingleSearchSelectionModelFactory() {
+    return new SingleSearchSelectionModel();
 }
 
-/**
- * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
- */
-class ConfigurableInputComponent {
+const ɵ0$1 = SingleSearchSelectionModelFactory;
+class AssetSearchInputComponent {
     constructor() {
-        this.readonly = false;
-        this.removable = true;
-        this.remove = new EventEmitter();
-        this.argValues = {};
-        this.form = new FormGroup({});
+        this.searchTermChange = new EventEmitter();
+        this.tagsChange = new EventEmitter();
+        this.lastTerm = '';
+        this.lastTagIds = [];
+        this.filterTagResults = (term, item) => {
+            if (!this.isTag(item)) {
+                return false;
+            }
+            return item.value.toLowerCase().startsWith(term.toLowerCase());
+        };
+        this.isTag = (input) => {
+            return typeof input === 'object' && !!input && input.hasOwnProperty('value');
+        };
     }
-    interpolateDescription() {
-        if (this.operationDefinition) {
-            return interpolateDescription(this.operationDefinition, this.form.value);
+    setSearchTerm(term) {
+        if (term) {
+            this.selectComponent.select({ label: term, value: { label: term } });
         }
         else {
-            return '';
+            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isTag(i.value));
+            if (currentTerm) {
+                this.selectComponent.unselect(currentTerm);
+            }
         }
     }
-    ngOnChanges(changes) {
-        if ('operation' in changes || 'operationDefinition' in changes) {
-            this.createForm();
-        }
+    setTags(tags) {
+        const items = this.selectComponent.items;
+        this.selectComponent.selectedItems.forEach(item => {
+            if (this.isTag(item.value) && !tags.map(t => t.id).includes(item.id)) {
+                this.selectComponent.unselect(item);
+            }
+        });
+        tags.map(tag => {
+            return items === null || items === void 0 ? void 0 : items.find(item => this.isTag(item) && item.id === tag.id);
+        })
+            .filter(notNullOrUndefined)
+            .forEach(item => {
+            const isSelected = this.selectComponent.selectedItems.find(i => {
+                const val = i.value;
+                if (this.isTag(val)) {
+                    return val.id === item.id;
+                }
+                return false;
+            });
+            if (!isSelected) {
+                this.selectComponent.select({ label: '', value: item });
+            }
+        });
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+    onSelectChange(selectedItems) {
+        if (!Array.isArray(selectedItems)) {
+            selectedItems = [selectedItems];
         }
+        const searchTermItems = selectedItems.filter(item => !this.isTag(item));
+        if (1 < searchTermItems.length) {
+            for (let i = 0; i < searchTermItems.length - 1; i++) {
+                // this.selectComponent.unselect(searchTermItems[i] as any);
+            }
+        }
+        const searchTermItem = searchTermItems[searchTermItems.length - 1];
+        const searchTerm = searchTermItem ? searchTermItem.label : '';
+        const tags = selectedItems.filter(this.isTag);
+        if (searchTerm !== this.lastTerm) {
+            this.searchTermChange.emit(searchTerm);
+            this.lastTerm = searchTerm;
+        }
+        if (this.lastTagIds.join(',') !== tags.map(t => t.id).join(',')) {
+            this.tagsChange.emit(tags);
+            this.lastTagIds = tags.map(t => t.id);
+        }
+    }
+    isSearchHeaderSelected() {
+        return this.selectComponent.itemsList.markedIndex === -1;
+    }
+    addTagFn(item) {
+        return { label: item };
+    }
+}
+AssetSearchInputComponent.decorators = [
+    { type: Component, args: [{
+                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$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"]
+            },] }
+];
+AssetSearchInputComponent.propDecorators = {
+    tags: [{ type: Input }],
+    searchTermChange: [{ type: Output }],
+    tagsChange: [{ type: Output }],
+    selectComponent: [{ type: ViewChild, args: ['selectComponent', { static: true },] }]
+};
+
+class ChannelAssignmentControlComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.multiple = true;
+        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.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 }]
 };
 
 /**
@@ -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.0';
 
 /**
  * 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