@vendure/admin-ui 2.0.0-next.3 → 2.0.0-next.7

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, Optional, Pipe, ViewChild, APP_INITIALIZER, Injector, NgModule, HostBinding, ContentChild, ChangeDetectorRef, ViewContainerRef, ViewChildren, TemplateRef, SkipSelf, forwardRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Component, isDevMode, Inject, HostListener, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, Optional, Pipe, ViewChild, APP_INITIALIZER, Injector, NgModule, ChangeDetectorRef, ViewContainerRef, ViewChildren, forwardRef, HostBinding, ContentChild, TemplateRef, SkipSelf, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule, PlatformLocation } from '@angular/common';
 import { concatMap, bufferCount, map, filter, distinctUntilChanged, skip, takeUntil, tap, take, finalize, switchMap, mergeMap, mapTo, catchError, startWith, shareReplay, throttleTime, scan, debounceTime, delay } from 'rxjs/operators';
@@ -24,7 +24,7 @@ import { TranslateMessageFormatCompiler, MESSAGE_FORMAT_CONFIG } from 'ngx-trans
 import * as i1$3 from '@clr/angular';
 import { ClarityModule } from '@clr/angular';
 import * as i2 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, FormArray, FormGroup, Validators, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormArray, NG_VALUE_ACCESSOR, FormGroup, Validators, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1$4 from '@angular/cdk/overlay';
@@ -37,12 +37,12 @@ import { createUploadLink } from 'apollo-upload-client';
 import { omit } from '@vendure/common/lib/omit';
 import { __awaiter } from 'tslib';
 import { CodeJar } from 'codejar';
+import * as i3$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@ng-select/ng-select';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-select/ng-select';
 import dayjs from 'dayjs';
 import * as i9 from '@angular/cdk/bidi';
-import * as i3$1 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$5 from 'ngx-pagination';
 import { PaginationService, NgxPaginationModule } from 'ngx-pagination';
 import { joinUp, joinDown, lift, selectParentNode, toggleMark, wrapIn, chainCommands, exitCode, setBlockType, baseKeymap } from 'prosemirror-commands';
@@ -2055,459 +2055,460 @@ class FacetDataService {
     }
 }
 
-const DISCOUNT_FRAGMENT = gql `
-    fragment Discount on Discount {
-        adjustmentSource
-        amount
-        amountWithTax
-        description
-        type
-    }
+const DISCOUNT_FRAGMENT = gql `
+    fragment Discount on Discount {
+        adjustmentSource
+        amount
+        amountWithTax
+        description
+        type
+    }
 `;
-const REFUND_FRAGMENT = gql `
-    fragment Refund on Refund {
-        id
-        state
-        items
-        shipping
-        adjustment
-        transactionId
-        paymentId
-    }
+const REFUND_FRAGMENT = gql `
+    fragment Refund on Refund {
+        id
+        state
+        items
+        shipping
+        adjustment
+        transactionId
+        paymentId
+    }
 `;
-const ORDER_ADDRESS_FRAGMENT = gql `
-    fragment OrderAddress on OrderAddress {
-        fullName
-        company
-        streetLine1
-        streetLine2
-        city
-        province
-        postalCode
-        country
-        countryCode
-        phoneNumber
-    }
+const ORDER_ADDRESS_FRAGMENT = gql `
+    fragment OrderAddress on OrderAddress {
+        fullName
+        company
+        streetLine1
+        streetLine2
+        city
+        province
+        postalCode
+        country
+        countryCode
+        phoneNumber
+    }
 `;
-const ORDER_FRAGMENT = gql `
-    fragment Order on Order {
-        id
-        createdAt
-        updatedAt
-        orderPlacedAt
-        code
-        state
-        nextStates
-        total
-        currencyCode
-        customer {
-            id
-            firstName
-            lastName
-        }
-        shippingLines {
-            shippingMethod {
-                name
-            }
-        }
-    }
+const ORDER_FRAGMENT = gql `
+    fragment Order on Order {
+        id
+        createdAt
+        updatedAt
+        orderPlacedAt
+        code
+        state
+        nextStates
+        total
+        totalWithTax
+        currencyCode
+        customer {
+            id
+            firstName
+            lastName
+        }
+        shippingLines {
+            shippingMethod {
+                name
+            }
+        }
+    }
 `;
-const FULFILLMENT_FRAGMENT = gql `
-    fragment Fulfillment on Fulfillment {
-        id
-        state
-        nextStates
-        createdAt
-        updatedAt
-        method
-        orderItems {
-            id
-        }
-        trackingCode
-    }
+const FULFILLMENT_FRAGMENT = gql `
+    fragment Fulfillment on Fulfillment {
+        id
+        state
+        nextStates
+        createdAt
+        updatedAt
+        method
+        orderItems {
+            id
+        }
+        trackingCode
+    }
 `;
-const ORDER_LINE_FRAGMENT = gql `
-    fragment OrderLine on OrderLine {
-        id
-        featuredAsset {
-            preview
-        }
-        productVariant {
-            id
-            name
-            sku
-            trackInventory
-            stockOnHand
-        }
-        discounts {
-            ...Discount
-        }
-        unitPrice
-        unitPriceWithTax
-        proratedUnitPrice
-        proratedUnitPriceWithTax
-        quantity
-        items {
-            id
-            unitPrice
-            unitPriceWithTax
-            taxRate
-            refundId
-            cancelled
-            fulfillment {
-                ...Fulfillment
-            }
-        }
-        linePrice
-        lineTax
-        linePriceWithTax
-        discountedLinePrice
-        discountedLinePriceWithTax
-    }
+const ORDER_LINE_FRAGMENT = gql `
+    fragment OrderLine on OrderLine {
+        id
+        featuredAsset {
+            preview
+        }
+        productVariant {
+            id
+            name
+            sku
+            trackInventory
+            stockOnHand
+        }
+        discounts {
+            ...Discount
+        }
+        unitPrice
+        unitPriceWithTax
+        proratedUnitPrice
+        proratedUnitPriceWithTax
+        quantity
+        items {
+            id
+            unitPrice
+            unitPriceWithTax
+            taxRate
+            refundId
+            cancelled
+            fulfillment {
+                ...Fulfillment
+            }
+        }
+        linePrice
+        lineTax
+        linePriceWithTax
+        discountedLinePrice
+        discountedLinePriceWithTax
+    }
 `;
-const ORDER_DETAIL_FRAGMENT = gql `
-    fragment OrderDetail on Order {
-        id
-        createdAt
-        updatedAt
-        code
-        state
-        nextStates
-        active
-        couponCodes
-        customer {
-            id
-            firstName
-            lastName
-        }
-        lines {
-            ...OrderLine
-        }
-        surcharges {
-            id
-            sku
-            description
-            price
-            priceWithTax
-            taxRate
-        }
-        discounts {
-            ...Discount
-        }
-        promotions {
-            id
-            couponCode
-        }
-        subTotal
-        subTotalWithTax
-        total
-        totalWithTax
-        currencyCode
-        shipping
-        shippingWithTax
-        shippingLines {
-            shippingMethod {
-                id
-                code
-                name
-                fulfillmentHandlerCode
-                description
-            }
-        }
-        taxSummary {
-            description
-            taxBase
-            taxRate
-            taxTotal
-        }
-        shippingAddress {
-            ...OrderAddress
-        }
-        billingAddress {
-            ...OrderAddress
-        }
-        payments {
-            id
-            createdAt
-            transactionId
-            amount
-            method
-            state
-            nextStates
-            errorMessage
-            metadata
-            refunds {
-                id
-                createdAt
-                state
-                items
-                adjustment
-                total
-                paymentId
-                reason
-                transactionId
-                method
-                metadata
-                orderItems {
-                    id
-                }
-            }
-        }
-        fulfillments {
-            ...Fulfillment
-        }
-        modifications {
-            id
-            createdAt
-            isSettled
-            priceChange
-            note
-            payment {
-                id
-                amount
-            }
-            orderItems {
-                id
-            }
-            refund {
-                id
-                paymentId
-                total
-            }
-            surcharges {
-                id
-            }
-        }
-    }
-    ${DISCOUNT_FRAGMENT}
-    ${ORDER_ADDRESS_FRAGMENT}
-    ${FULFILLMENT_FRAGMENT}
-    ${ORDER_LINE_FRAGMENT}
+const ORDER_DETAIL_FRAGMENT = gql `
+    fragment OrderDetail on Order {
+        id
+        createdAt
+        updatedAt
+        code
+        state
+        nextStates
+        active
+        couponCodes
+        customer {
+            id
+            firstName
+            lastName
+        }
+        lines {
+            ...OrderLine
+        }
+        surcharges {
+            id
+            sku
+            description
+            price
+            priceWithTax
+            taxRate
+        }
+        discounts {
+            ...Discount
+        }
+        promotions {
+            id
+            couponCode
+        }
+        subTotal
+        subTotalWithTax
+        total
+        totalWithTax
+        currencyCode
+        shipping
+        shippingWithTax
+        shippingLines {
+            shippingMethod {
+                id
+                code
+                name
+                fulfillmentHandlerCode
+                description
+            }
+        }
+        taxSummary {
+            description
+            taxBase
+            taxRate
+            taxTotal
+        }
+        shippingAddress {
+            ...OrderAddress
+        }
+        billingAddress {
+            ...OrderAddress
+        }
+        payments {
+            id
+            createdAt
+            transactionId
+            amount
+            method
+            state
+            nextStates
+            errorMessage
+            metadata
+            refunds {
+                id
+                createdAt
+                state
+                items
+                adjustment
+                total
+                paymentId
+                reason
+                transactionId
+                method
+                metadata
+                orderItems {
+                    id
+                }
+            }
+        }
+        fulfillments {
+            ...Fulfillment
+        }
+        modifications {
+            id
+            createdAt
+            isSettled
+            priceChange
+            note
+            payment {
+                id
+                amount
+            }
+            orderItems {
+                id
+            }
+            refund {
+                id
+                paymentId
+                total
+            }
+            surcharges {
+                id
+            }
+        }
+    }
+    ${DISCOUNT_FRAGMENT}
+    ${ORDER_ADDRESS_FRAGMENT}
+    ${FULFILLMENT_FRAGMENT}
+    ${ORDER_LINE_FRAGMENT}
 `;
-const GET_ORDERS_LIST = gql `
-    query GetOrderList($options: OrderListOptions) {
-        orders(options: $options) {
-            items {
-                ...Order
-            }
-            totalItems
-        }
-    }
-    ${ORDER_FRAGMENT}
+const GET_ORDERS_LIST = gql `
+    query GetOrderList($options: OrderListOptions) {
+        orders(options: $options) {
+            items {
+                ...Order
+            }
+            totalItems
+        }
+    }
+    ${ORDER_FRAGMENT}
 `;
-const GET_ORDER = gql `
-    query GetOrder($id: ID!) {
-        order(id: $id) {
-            ...OrderDetail
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
+const GET_ORDER = gql `
+    query GetOrder($id: ID!) {
+        order(id: $id) {
+            ...OrderDetail
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
 `;
-const SETTLE_PAYMENT = gql `
-    mutation SettlePayment($id: ID!) {
-        settlePayment(id: $id) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
-            ...ErrorResult
-            ... on SettlePaymentError {
-                paymentErrorMessage
-            }
-            ... on PaymentStateTransitionError {
-                transitionError
-            }
-            ... on OrderStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ERROR_RESULT_FRAGMENT}
+const SETTLE_PAYMENT = gql `
+    mutation SettlePayment($id: ID!) {
+        settlePayment(id: $id) {
+            ... on Payment {
+                id
+                transactionId
+                amount
+                method
+                state
+                metadata
+            }
+            ...ErrorResult
+            ... on SettlePaymentError {
+                paymentErrorMessage
+            }
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+            ... on OrderStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const TRANSITION_PAYMENT_TO_STATE = gql `
-    mutation TransitionPaymentToState($id: ID!, $state: String!) {
-        transitionPaymentToState(id: $id, state: $state) {
-            ... on Payment {
-                id
-                transactionId
-                amount
-                method
-                state
-                metadata
-            }
-            ...ErrorResult
-            ... on PaymentStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ERROR_RESULT_FRAGMENT}
+const TRANSITION_PAYMENT_TO_STATE = gql `
+    mutation TransitionPaymentToState($id: ID!, $state: String!) {
+        transitionPaymentToState(id: $id, state: $state) {
+            ... on Payment {
+                id
+                transactionId
+                amount
+                method
+                state
+                metadata
+            }
+            ...ErrorResult
+            ... on PaymentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const CREATE_FULFILLMENT = gql `
-    mutation CreateFulfillment($input: FulfillOrderInput!) {
-        addFulfillmentToOrder(input: $input) {
-            ...Fulfillment
-            ... on CreateFulfillmentError {
-                errorCode
-                message
-                fulfillmentHandlerError
-            }
-            ... on FulfillmentStateTransitionError {
-                errorCode
-                message
-                transitionError
-            }
-            ...ErrorResult
-        }
-    }
-    ${FULFILLMENT_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const CREATE_FULFILLMENT = gql `
+    mutation CreateFulfillment($input: FulfillOrderInput!) {
+        addFulfillmentToOrder(input: $input) {
+            ...Fulfillment
+            ... on CreateFulfillmentError {
+                errorCode
+                message
+                fulfillmentHandlerError
+            }
+            ... on FulfillmentStateTransitionError {
+                errorCode
+                message
+                transitionError
+            }
+            ...ErrorResult
+        }
+    }
+    ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const CANCEL_ORDER = gql `
-    mutation CancelOrder($input: CancelOrderInput!) {
-        cancelOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const CANCEL_ORDER = gql `
+    mutation CancelOrder($input: CancelOrderInput!) {
+        cancelOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const REFUND_ORDER = gql `
-    mutation RefundOrder($input: RefundOrderInput!) {
-        refundOrder(input: $input) {
-            ...Refund
-            ...ErrorResult
-        }
-    }
-    ${REFUND_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const REFUND_ORDER = gql `
+    mutation RefundOrder($input: RefundOrderInput!) {
+        refundOrder(input: $input) {
+            ...Refund
+            ...ErrorResult
+        }
+    }
+    ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const SETTLE_REFUND = gql `
-    mutation SettleRefund($input: SettleRefundInput!) {
-        settleRefund(input: $input) {
-            ...Refund
-            ...ErrorResult
-        }
-    }
-    ${REFUND_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const SETTLE_REFUND = gql `
+    mutation SettleRefund($input: SettleRefundInput!) {
+        settleRefund(input: $input) {
+            ...Refund
+            ...ErrorResult
+        }
+    }
+    ${REFUND_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const GET_ORDER_HISTORY = gql `
-    query GetOrderHistory($id: ID!, $options: HistoryEntryListOptions) {
-        order(id: $id) {
-            id
-            history(options: $options) {
-                totalItems
-                items {
-                    id
-                    type
-                    createdAt
-                    isPublic
-                    administrator {
-                        id
-                        firstName
-                        lastName
-                    }
-                    data
-                }
-            }
-        }
-    }
+const GET_ORDER_HISTORY = gql `
+    query GetOrderHistory($id: ID!, $options: HistoryEntryListOptions) {
+        order(id: $id) {
+            id
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
 `;
-const ADD_NOTE_TO_ORDER = gql `
-    mutation AddNoteToOrder($input: AddNoteToOrderInput!) {
-        addNoteToOrder(input: $input) {
-            id
-        }
-    }
+const ADD_NOTE_TO_ORDER = gql `
+    mutation AddNoteToOrder($input: AddNoteToOrderInput!) {
+        addNoteToOrder(input: $input) {
+            id
+        }
+    }
 `;
-const UPDATE_ORDER_NOTE = gql `
-    mutation UpdateOrderNote($input: UpdateOrderNoteInput!) {
-        updateOrderNote(input: $input) {
-            id
-            data
-            isPublic
-        }
-    }
+const UPDATE_ORDER_NOTE = gql `
+    mutation UpdateOrderNote($input: UpdateOrderNoteInput!) {
+        updateOrderNote(input: $input) {
+            id
+            data
+            isPublic
+        }
+    }
 `;
-const DELETE_ORDER_NOTE = gql `
-    mutation DeleteOrderNote($id: ID!) {
-        deleteOrderNote(id: $id) {
-            result
-            message
-        }
-    }
+const DELETE_ORDER_NOTE = gql `
+    mutation DeleteOrderNote($id: ID!) {
+        deleteOrderNote(id: $id) {
+            result
+            message
+        }
+    }
 `;
-const TRANSITION_ORDER_TO_STATE = gql `
-    mutation TransitionOrderToState($id: ID!, $state: String!) {
-        transitionOrderToState(id: $id, state: $state) {
-            ...Order
-            ...ErrorResult
-            ... on OrderStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${ORDER_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const TRANSITION_ORDER_TO_STATE = gql `
+    mutation TransitionOrderToState($id: ID!, $state: String!) {
+        transitionOrderToState(id: $id, state: $state) {
+            ...Order
+            ...ErrorResult
+            ... on OrderStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${ORDER_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const UPDATE_ORDER_CUSTOM_FIELDS = gql `
-    mutation UpdateOrderCustomFields($input: UpdateOrderInput!) {
-        setOrderCustomFields(input: $input) {
-            ...Order
-        }
-    }
-    ${ORDER_FRAGMENT}
+const UPDATE_ORDER_CUSTOM_FIELDS = gql `
+    mutation UpdateOrderCustomFields($input: UpdateOrderInput!) {
+        setOrderCustomFields(input: $input) {
+            ...Order
+        }
+    }
+    ${ORDER_FRAGMENT}
 `;
-const TRANSITION_FULFILLMENT_TO_STATE = gql `
-    mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
-        transitionFulfillmentToState(id: $id, state: $state) {
-            ...Fulfillment
-            ...ErrorResult
-            ... on FulfillmentStateTransitionError {
-                transitionError
-            }
-        }
-    }
-    ${FULFILLMENT_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const TRANSITION_FULFILLMENT_TO_STATE = gql `
+    mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
+        transitionFulfillmentToState(id: $id, state: $state) {
+            ...Fulfillment
+            ...ErrorResult
+            ... on FulfillmentStateTransitionError {
+                transitionError
+            }
+        }
+    }
+    ${FULFILLMENT_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const GET_ORDER_SUMMARY = gql `
-    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
-        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
-            totalItems
-            items {
-                id
-                total
-                currencyCode
-            }
-        }
-    }
+const GET_ORDER_SUMMARY = gql `
+    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
+        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
+            totalItems
+            items {
+                id
+                total
+                currencyCode
+            }
+        }
+    }
 `;
-const MODIFY_ORDER = gql `
-    mutation ModifyOrder($input: ModifyOrderInput!) {
-        modifyOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const MODIFY_ORDER = gql `
+    mutation ModifyOrder($input: ModifyOrderInput!) {
+        modifyOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
-const ADD_MANUAL_PAYMENT_TO_ORDER = gql `
-    mutation AddManualPayment($input: ManualPaymentInput!) {
-        addManualPaymentToOrder(input: $input) {
-            ...OrderDetail
-            ...ErrorResult
-        }
-    }
-    ${ORDER_DETAIL_FRAGMENT}
-    ${ERROR_RESULT_FRAGMENT}
+const ADD_MANUAL_PAYMENT_TO_ORDER = gql `
+    mutation AddManualPayment($input: ManualPaymentInput!) {
+        addManualPaymentToOrder(input: $input) {
+            ...OrderDetail
+            ...ErrorResult
+        }
+    }
+    ${ORDER_DETAIL_FRAGMENT}
+    ${ERROR_RESULT_FRAGMENT}
 `;
 
 class OrderDataService {
@@ -8222,6 +8223,7 @@ class AppShellComponent {
         this.modalService = modalService;
         this.localStorageService = localStorageService;
         this.availableLanguages = [];
+        this.hideVendureBranding = getAppConfig().hideVendureBranding;
     }
     ngOnInit() {
         this.userName$ = this.dataService.client
@@ -8265,10 +8267,10 @@ class AppShellComponent {
     }
 }
 AppShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$2.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-AppShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, 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"], components: [{ type: i1$3.ClrHeader, selector: "clr-header" }, { type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { type: MainNavComponent, selector: "vdr-main-nav" }], directives: [{ type: i1$3.ClrMainContainer, selector: "clr-main-container" }, { type: i1$3.MainContainerWillyWonka, selector: "clr-main-container" }, { type: i1$3.NavDetectionOompaLoompa, selector: "clr-header" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i3.AsyncPipe } });
+AppShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, 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:700;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"], components: [{ type: i1$3.ClrHeader, selector: "clr-header" }, { type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { type: MainNavComponent, selector: "vdr-main-nav" }], directives: [{ type: i1$3.ClrMainContainer, selector: "clr-main-container" }, { type: i1$3.MainContainerWillyWonka, selector: "clr-main-container" }, { type: i1$3.NavDetectionOompaLoompa, selector: "clr-header" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$2.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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"] }]
+            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\" /><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:700;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"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$2.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }]; } });
 
 class NotificationComponent {
@@ -9524,52 +9526,658 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }] } });
 
 /**
- * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+ * 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 AffixedInputComponent {
+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();
 }
-AffixedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AffixedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AffixedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: { prefix: "prefix", suffix: "suffix" }, ngImport: i0, 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", 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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AffixedInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-affixed-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
-        }], propDecorators: { prefix: [{
-                type: Input
-            }], suffix: [{
-                type: Input
-            }] } });
-
 /**
- * @description
- * A form input control which displays currency in decimal format, whilst working
- * with the integer cent value in the background.
- *
- * @example
- * ```HTML
- * <vdr-currency-input
- *     [(ngModel)]="entityPrice"
- *     [currencyCode]="currencyCode"
- * ></vdr-currency-input>
- * ```
- *
- * @docsCategory components
+ * Creates an empty ConfigurableOperation object based on the definition.
  */
-class CurrencyInputComponent {
-    constructor(dataService, changeDetectorRef) {
-        this.dataService = dataService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.disabled = false;
-        this.readonly = false;
-        this.currencyCode = '';
-        this.valueChange = new EventEmitter();
-        this.hasFractionPart = true;
-        this.currencyCode$ = new BehaviorSubject('');
-    }
-    ngOnInit() {
-        const languageCode$ = this.dataService.client.uiState().mapStream(data => data.uiState.language);
-        const shouldPrefix$ = combineLatest(languageCode$, this.currencyCode$).pipe(map(([languageCode, currencyCode]) => {
-            var _a, _b;
-            if (!currencyCode) {
+function configurableDefinitionToInstance(def) {
+    return Object.assign(Object.assign({}, def), { args: def.args.map(arg => {
+            return Object.assign(Object.assign({}, arg), { value: getDefaultConfigArgValue(arg) });
+        }) });
+}
+/**
+ * Converts an object of the type:
+ * ```
+ * {
+ *     code: 'my-operation',
+ *     args: {
+ *         someProperty: 'foo'
+ *     }
+ * }
+ * ```
+ * to the format defined by the ConfigurableOperationInput GraphQL input type:
+ * ```
+ * {
+ *     code: 'my-operation',
+ *     args: [
+ *         { name: 'someProperty', value: 'foo' }
+ *     ]
+ * }
+ * ```
+ */
+function toConfigurableOperationInput(operation, formValueOperations) {
+    return {
+        code: operation.code,
+        arguments: Object.values(formValueOperations.args || {}).map((value, j) => ({
+            name: operation.args[j].name,
+            value: (value === null || value === void 0 ? void 0 : value.hasOwnProperty('value'))
+                ? encodeConfigArgValue(value.value)
+                : encodeConfigArgValue(value),
+        })),
+    };
+}
+function configurableOperationValueIsValid(def, value) {
+    if (!def || !value) {
+        return false;
+    }
+    if (def.code !== value.code) {
+        return false;
+    }
+    for (const argDef of def.args) {
+        const argVal = value.args[argDef.name];
+        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Returns a default value based on the type of the config arg.
+ */
+function getDefaultConfigArgValue(arg) {
+    if (arg.list) {
+        return [];
+    }
+    if (arg.defaultValue) {
+        return arg.defaultValue;
+    }
+    const type = arg.type;
+    switch (type) {
+        case 'string':
+        case 'datetime':
+        case 'float':
+        case 'ID':
+        case 'int':
+            return null;
+        case 'boolean':
+            return false;
+        default:
+            assertNever(type);
+    }
+}
+
+/**
+ * Interpolates the description of an ConfigurableOperation with the given values.
+ */
+function interpolateDescription(operation, values) {
+    if (!operation) {
+        return '';
+    }
+    const templateString = operation.description;
+    const interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, (substring, argName) => {
+        const normalizedArgName = argName.toLowerCase();
+        const value = values[normalizedArgName];
+        if (value == null) {
+            return '_';
+        }
+        let formatted = value;
+        const argDef = operation.args.find(arg => arg.name === normalizedArgName);
+        if (argDef && argDef.type === 'int' && argDef.ui && argDef.ui.component === 'currency-form-input') {
+            formatted = value / 100;
+        }
+        if (argDef && argDef.type === 'datetime' && value instanceof Date) {
+            formatted = value.toLocaleDateString();
+        }
+        return formatted;
+    });
+    return interpolated;
+}
+
+class HelpTooltipComponent {
+}
+HelpTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HelpTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, 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", styles: ["clr-tooltip{display:inline-flex}\n"], components: [{ type: i1$3.ClrTooltip, selector: "clr-tooltip" }, { type: i1$3.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$3.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { type: i1$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HelpTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-help-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: ["clr-tooltip{display:inline-flex}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+/**
+ * A host component which delegates to an instance or list of FormInputComponent components.
+ */
+class DynamicFormInputComponent {
+    constructor(componentRegistryService, componentFactoryResolver, changeDetectorRef, injector) {
+        this.componentRegistryService = componentRegistryService;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.changeDetectorRef = changeDetectorRef;
+        this.injector = injector;
+        this.renderAsList = false;
+        this.listItems = [];
+        this.listId = 1;
+        this.listFormArray = new FormArray([]);
+        this.renderList$ = new Subject();
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        const componentId = this.getInputComponentConfig(this.def).component;
+        const componentType = this.componentRegistryService.getInputComponent(componentId);
+        if (componentType) {
+            this.componentType = componentType;
+        }
+        else {
+            // tslint:disable-next-line:no-console
+            console.error(`No form input component registered with the id "${componentId}". Using the default input instead.`);
+            const defaultComponentType = this.componentRegistryService.getInputComponent(this.getInputComponentConfig(Object.assign(Object.assign({}, this.def), { ui: undefined })).component);
+            if (defaultComponentType) {
+                this.componentType = defaultComponentType;
+            }
+        }
+    }
+    ngAfterViewInit() {
+        var _a;
+        if (this.componentType) {
+            const factory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);
+            // create a temp instance to check the value of `isListInput`
+            const cmpRef = factory.create(this.injector);
+            const isListInputComponent = (_a = cmpRef.instance.isListInput) !== null && _a !== void 0 ? _a : false;
+            cmpRef.destroy();
+            if (this.def.list === false && isListInputComponent) {
+                throw new Error(`The ${this.componentType.name} component is a list input, but the definition for ${this.def.name} does not expect a list`);
+            }
+            this.renderAsList = this.def.list && !isListInputComponent;
+            if (!this.renderAsList) {
+                this.singleComponentRef = this.renderInputComponent(factory, this.singleViewContainer, this.control);
+            }
+            else {
+                let formArraySub;
+                const renderListInputs = (viewContainerRefs) => {
+                    if (viewContainerRefs.length) {
+                        if (formArraySub) {
+                            formArraySub.unsubscribe();
+                        }
+                        this.listFormArray = new FormArray([]);
+                        this.listItems.forEach(i => { var _a; return (_a = i.componentRef) === null || _a === void 0 ? void 0 : _a.destroy(); });
+                        viewContainerRefs.forEach((ref, i) => {
+                            var _a;
+                            const listItem = (_a = this.listItems) === null || _a === void 0 ? void 0 : _a[i];
+                            if (listItem) {
+                                this.listFormArray.push(listItem.control);
+                                listItem.componentRef = this.renderInputComponent(factory, ref, listItem.control);
+                            }
+                        });
+                        formArraySub = this.listFormArray.valueChanges
+                            .pipe(takeUntil(this.destroy$))
+                            .subscribe(val => {
+                            this.control.markAsTouched();
+                            this.control.markAsDirty();
+                            this.onChange(val);
+                            this.control.patchValue(val, { emitEvent: false });
+                        });
+                        setTimeout(() => this.changeDetectorRef.markForCheck());
+                    }
+                };
+                // initial render
+                this.listItemContainers.changes
+                    .pipe(take(1))
+                    .subscribe(val => renderListInputs(this.listItemContainers));
+                // render on changes to the list
+                this.renderList$
+                    .pipe(switchMap(() => this.listItemContainers.changes.pipe(take(1))), takeUntil(this.destroy$))
+                    .subscribe(() => {
+                    renderListInputs(this.listItemContainers);
+                });
+            }
+        }
+        setTimeout(() => this.changeDetectorRef.markForCheck());
+    }
+    ngOnChanges(changes) {
+        if (this.listItems) {
+            for (const item of this.listItems) {
+                if (item.componentRef) {
+                    this.updateBindings(changes, item.componentRef);
+                }
+            }
+        }
+        if (this.singleComponentRef) {
+            this.updateBindings(changes, this.singleComponentRef);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    updateBindings(changes, componentRef) {
+        if ('def' in changes) {
+            componentRef.instance.config = simpleDeepClone(this.def);
+        }
+        if ('readonly' in changes) {
+            componentRef.instance.readonly = this.readonly;
+        }
+        componentRef.injector.get(ChangeDetectorRef).markForCheck();
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+    addListItem() {
+        var _a;
+        if (!this.listItems) {
+            this.listItems = [];
+        }
+        this.listItems.push({
+            id: this.listId++,
+            control: new FormControl((_a = this.def.defaultValue) !== null && _a !== void 0 ? _a : null),
+        });
+        this.renderList$.next();
+    }
+    moveListItem(event) {
+        if (this.listItems) {
+            moveItemInArray(this.listItems, event.previousIndex, event.currentIndex);
+            this.listFormArray.removeAt(event.previousIndex);
+            this.listFormArray.insert(event.currentIndex, event.item.data.control);
+            this.renderList$.next();
+        }
+    }
+    removeListItem(item) {
+        var _a;
+        if (this.listItems) {
+            const index = this.listItems.findIndex(i => i === item);
+            (_a = item.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.listFormArray.removeAt(index);
+            this.listItems = this.listItems.filter(i => i !== item);
+            this.renderList$.next();
+        }
+    }
+    renderInputComponent(factory, viewContainerRef, formControl) {
+        const componentRef = viewContainerRef.createComponent(factory);
+        const { instance } = componentRef;
+        instance.config = simpleDeepClone(this.def);
+        instance.formControl = formControl;
+        instance.readonly = this.readonly;
+        componentRef.injector.get(ChangeDetectorRef).markForCheck();
+        return componentRef;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    writeValue(obj) {
+        if (Array.isArray(obj)) {
+            if (obj.length === this.listItems.length) {
+                obj.forEach((value, index) => {
+                    var _a;
+                    const control = (_a = this.listItems[index]) === null || _a === void 0 ? void 0 : _a.control;
+                    control.patchValue(getConfigArgValue(value), { emitEvent: false });
+                });
+            }
+            else {
+                this.listItems = obj.map(value => ({
+                    id: this.listId++,
+                    control: new FormControl(getConfigArgValue(value)),
+                }));
+                this.renderList$.next();
+            }
+        }
+        else {
+            this.listItems = [];
+            this.renderList$.next();
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    getInputComponentConfig(argDef) {
+        var _a;
+        if (this.hasUiConfig(argDef) && argDef.ui.component) {
+            return argDef.ui;
+        }
+        const type = argDef === null || argDef === void 0 ? void 0 : argDef.type;
+        switch (type) {
+            case 'string':
+            case 'localeString': {
+                const hasOptions = !!(this.isConfigArgDef(argDef) && ((_a = argDef.ui) === null || _a === void 0 ? void 0 : _a.options)) ||
+                    !!argDef.options;
+                if (hasOptions) {
+                    return { component: 'select-form-input' };
+                }
+                else {
+                    return { component: 'text-form-input' };
+                }
+            }
+            case 'text': {
+                return { component: 'textarea-form-input' };
+            }
+            case 'int':
+            case 'float':
+                return { component: 'number-form-input' };
+            case 'boolean':
+                return { component: 'boolean-form-input' };
+            case 'datetime':
+                return { component: 'date-form-input' };
+            case 'ID':
+                return { component: 'text-form-input' };
+            case 'relation':
+                return { component: 'relation-form-input' };
+            default:
+                assertNever(type);
+        }
+    }
+    isConfigArgDef(def) {
+        return (def === null || def === void 0 ? void 0 : def.__typename) === 'ConfigArgDefinition';
+    }
+    hasUiConfig(def) {
+        var _a;
+        return typeof def === 'object' && typeof ((_a = def === null || def === void 0 ? void 0 : def.ui) === null || _a === void 0 ? void 0 : _a.component) === 'string';
+    }
+}
+DynamicFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DynamicFormInputComponent, deps: [{ token: ComponentRegistryService }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: { def: "def", readonly: "readonly", control: "control" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: DynamicFormInputComponent,
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-dynamic-form-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: DynamicFormInputComponent,
+                            multi: true,
+                        },
+                    ], template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: ComponentRegistryService }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { def: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], singleViewContainer: [{
+                type: ViewChild,
+                args: ['single', { read: ViewContainerRef }]
+            }], listItemContainers: [{
+                type: ViewChildren,
+                args: ['listItem', { read: ViewContainerRef }]
+            }] } });
+
+/**
+ * Formats a string into sentence case (first letter of first word uppercase).
+ */
+class SentenceCasePipe {
+    transform(value) {
+        if (typeof value === 'string') {
+            let lower;
+            if (isCamelCase(value)) {
+                lower = value.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+            }
+            else {
+                lower = value.toLowerCase();
+            }
+            return lower.charAt(0).toUpperCase() + lower.slice(1);
+        }
+        return value;
+    }
+}
+SentenceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SentenceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, name: "sentenceCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sentenceCase' }]
+        }] });
+function isCamelCase(value) {
+    return /^[a-zA-Z]+[A-Z][a-zA-Z]+$/.test(value);
+}
+
+/**
+ * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
+ */
+class ConfigurableInputComponent {
+    constructor() {
+        this.readonly = false;
+        this.removable = true;
+        this.position = 0;
+        this.remove = new EventEmitter();
+        this.argValues = {};
+        this.form = new FormGroup({});
+        this.positionChangeSubject = new BehaviorSubject(0);
+    }
+    interpolateDescription() {
+        if (this.operationDefinition) {
+            return interpolateDescription(this.operationDefinition, this.form.value);
+        }
+        else {
+            return '';
+        }
+    }
+    ngOnInit() {
+        this.positionChange$ = this.positionChangeSubject.asObservable();
+    }
+    ngOnChanges(changes) {
+        if ('operation' in changes || 'operationDefinition' in changes) {
+            this.createForm();
+        }
+        if ('position' in changes) {
+            this.positionChangeSubject.next(this.position);
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    writeValue(value) {
+        if (value) {
+            this.form.patchValue(value);
+        }
+    }
+    trackByName(index, arg) {
+        return arg.name;
+    }
+    getArgDef(arg) {
+        var _a;
+        return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(a => a.name === arg.name);
+    }
+    createForm() {
+        var _a, _b;
+        if (!this.operation) {
+            return;
+        }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.form = new FormGroup({});
+        this.form.__id = Math.random().toString(36).substr(10);
+        if (this.operation.args) {
+            for (const arg of ((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []) {
+                let value = (_b = this.operation.args.find(a => a.name === arg.name)) === null || _b === void 0 ? void 0 : _b.value;
+                if (value === undefined) {
+                    value = getDefaultConfigArgValue(arg);
+                }
+                const validators = arg.list ? undefined : arg.required ? Validators.required : undefined;
+                this.form.addControl(arg.name, new FormControl(value, validators));
+            }
+        }
+        this.subscription = this.form.valueChanges.subscribe(value => {
+            if (this.onChange) {
+                this.onChange({
+                    code: this.operation && this.operation.code,
+                    args: value,
+                });
+            }
+            if (this.onTouch) {
+                this.onTouch();
+            }
+        });
+    }
+    validate(c) {
+        if (this.form.invalid) {
+            return {
+                required: true,
+            };
+        }
+        return null;
+    }
+}
+ConfigurableInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfigurableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfigurableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: { operation: "operation", operationDefinition: "operationDefinition", readonly: "readonly", removable: "removable", position: "position" }, outputs: { remove: "remove" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: ConfigurableInputComponent,
+            multi: true,
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => ConfigurableInputComponent),
+            multi: true,
+        },
+    ], usesOnChanges: true, ngImport: i0, 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", 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"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "sentenceCase": SentenceCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfigurableInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-configurable-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: ConfigurableInputComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ConfigurableInputComponent),
+                            multi: true,
+                        },
+                    ], 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", 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"] }]
+        }], propDecorators: { operation: [{
+                type: Input
+            }], operationDefinition: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }] } });
+
+/**
+ * @description
+ * A special input used to display the "Combination mode" AND/OR toggle.
+ *
+ * @docsCategory custom-input-components
+ * @docsPage default-inputs
+ */
+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);
+    }
+}
+CombinationModeFormInputComponent.id = 'combination-mode-form-input';
+CombinationModeFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CombinationModeFormInputComponent, deps: [{ token: ConfigurableInputComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CombinationModeFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CombinationModeFormInputComponent, selector: "vdr-combination-mode-form-input", ngImport: i0, 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", styles: [".mode-select{text-transform:uppercase}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CombinationModeFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-combination-mode-form-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [".mode-select{text-transform:uppercase}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: ConfigurableInputComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+ */
+class AffixedInputComponent {
+}
+AffixedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AffixedInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AffixedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AffixedInputComponent, selector: "vdr-affixed-input", inputs: { prefix: "prefix", suffix: "suffix" }, ngImport: i0, 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", 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"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AffixedInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-affixed-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], propDecorators: { prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }] } });
+
+/**
+ * @description
+ * A form input control which displays currency in decimal format, whilst working
+ * with the integer cent value in the background.
+ *
+ * @example
+ * ```HTML
+ * <vdr-currency-input
+ *     [(ngModel)]="entityPrice"
+ *     [currencyCode]="currencyCode"
+ * ></vdr-currency-input>
+ * ```
+ *
+ * @docsCategory components
+ */
+class CurrencyInputComponent {
+    constructor(dataService, changeDetectorRef) {
+        this.dataService = dataService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.disabled = false;
+        this.readonly = false;
+        this.currencyCode = '';
+        this.valueChange = new EventEmitter();
+        this.hasFractionPart = true;
+        this.currencyCode$ = new BehaviorSubject('');
+    }
+    ngOnInit() {
+        const languageCode$ = this.dataService.client.uiState().mapStream(data => data.uiState.language);
+        const shouldPrefix$ = combineLatest(languageCode$, this.currencyCode$).pipe(map(([languageCode, currencyCode]) => {
+            var _a, _b;
+            if (!currencyCode) {
                 return '';
             }
             const locale = languageCode.replace(/_/g, '-');
@@ -10452,245 +11060,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  */
 class PasswordFormInputComponent {
 }
-PasswordFormInputComponent.id = 'password-form-input';
-PasswordFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PasswordFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-password-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""] }]
-        }] });
-
-/**
- * @description
- * Given an Asset object (an object with `preview` and optionally `focalPoint` properties), this pipe
- * returns a string with query parameters designed to work with the image resize capabilities of the
- * AssetServerPlugin.
- *
- * @example
- * ```HTML
- * <img [src]="asset | assetPreview:'tiny'" />
- * <img [src]="asset | assetPreview:150" />
- * ```
- *
- * @docsCategory pipes
- */
-class AssetPreviewPipe {
-    transform(asset, preset = 'thumb') {
-        if (!asset) {
-            return '';
-        }
-        if (asset.preview == null || typeof asset.preview !== 'string') {
-            throw new Error(`Expected an Asset, got ${JSON.stringify(asset)}`);
-        }
-        const fp = asset.focalPoint ? `&fpx=${asset.focalPoint.x}&fpy=${asset.focalPoint.y}` : '';
-        if (Number.isNaN(Number(preset))) {
-            return `${asset.preview}?preset=${preset}${fp}`;
-        }
-        else {
-            return `${asset.preview}?w=${preset}&h=${preset}${fp}`;
-        }
-    }
-}
-AssetPreviewPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AssetPreviewPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, name: "assetPreview" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'assetPreview',
-                }]
-        }] });
-
-/**
- * @description
- * A component for selecting product variants via an autocomplete-style select input.
- *
- * @example
- * ```HTML
- * <vdr-product-variant-selector
- *   (productSelected)="selectResult($event)"></vdr-product-selector>
- * ```
- *
- * @docsCategory components
- */
-class ProductVariantSelectorComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.searchInput$ = new Subject();
-        this.searchLoading = false;
-        this.productSelected = new EventEmitter();
-    }
-    ngOnInit() {
-        this.initSearchResults();
-    }
-    initSearchResults() {
-        const searchItems$ = this.searchInput$.pipe(debounceTime(200), distinctUntilChanged(), tap(() => (this.searchLoading = true)), switchMap(term => {
-            if (!term) {
-                return of([]);
-            }
-            return this.dataService.product
-                .productSelectorSearch(term, 10)
-                .mapSingle(result => result.search.items);
-        }), tap(() => (this.searchLoading = false)));
-        const clear$ = this.productSelected.pipe(mapTo([]));
-        this.searchResults$ = concat(of([]), merge(searchItems$, clear$));
-    }
-    selectResult(product) {
-        if (product) {
-            this.productSelected.emit(product);
-            this.ngSelect.clearModel();
-        }
-    }
-}
-ProductVariantSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { productSelected: [{
-                type: Output
-            }], ngSelect: [{
-                type: ViewChild,
-                args: ['autoComplete', { static: true }]
-            }] } });
-
-/**
- * @description
- * Allows the selection of multiple ProductVariants via an autocomplete select input.
- * Should be used with `ID` type **list** fields which represent ProductVariant IDs.
- *
- * @docsCategory custom-input-components
- * @docsPage default-inputs
- */
-class ProductSelectorFormInputComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.isListInput = true;
-    }
-    ngOnInit() {
-        this.formControl.setValidators([
-            control => {
-                if (!control.value || !control.value.length) {
-                    return {
-                        atLeastOne: { length: control.value.length },
-                    };
-                }
-                return null;
-            },
-        ]);
-        this.selection$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value), switchMap(value => {
-            if (Array.isArray(value) && 0 < value.length) {
-                return forkJoin(value.map(id => this.dataService.product
-                    .getProductVariant(id)
-                    .mapSingle(data => data.productVariant)));
-            }
-            return of([]);
-        }), map(variants => variants.filter(notNullOrUndefined)));
-    }
-    addProductVariant(product) {
-        const value = this.formControl.value;
-        this.formControl.setValue([...new Set([...value, product.productVariantId])]);
-    }
-    removeProductVariant(id) {
-        const value = this.formControl.value;
-        this.formControl.setValue(value.filter(_id => _id !== id));
-    }
-}
-ProductSelectorFormInputComponent.id = 'product-selector-form-input';
-ProductSelectorFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSelectorFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductSelectorFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSelectorFormInputComponent, selector: "vdr-product-selector-form-input", ngImport: i0, 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-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", 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"], components: [{ type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSelectorFormInputComponent, decorators: [{
+PasswordFormInputComponent.id = 'password-form-input';
+PasswordFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PasswordFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordFormInputComponent, selector: "vdr-password-form-input", ngImport: i0, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-selector-form-input', changeDetection: ChangeDetectionStrategy.OnPush, 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-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", 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"] }]
-        }], ctorParameters: function () { return [{ type: DataService }]; } });
+            args: [{ selector: 'vdr-password-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\r\n    type=\"password\"\r\n    [readonly]=\"readonly\"\r\n    [formControl]=\"formControl\"\r\n/>\r\n", styles: [""] }]
+        }] });
 
 /**
- * A component for selecting files to upload as new Assets.
+ * @description
+ * A helper class used to manage selection of list items. Supports multiple selection via
+ * cmd/ctrl/shift key.
  */
-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;
+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)));
     }
-    /**
-     * 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);
+    selectMultiple(items) {
+        this._selection = items;
     }
-    select(event) {
-        const files = event.target.files;
-        if (files) {
-            this.selectFiles.emit(Array.from(files));
-        }
+    isSelected(item) {
+        return !!this._selection.find(a => this.options.itemsAreEqual(a, item));
     }
-    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;
-        }
+    lastSelected() {
+        return this._selection[this._selection.length - 1];
     }
-}
-AssetFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetFileInputComponent, deps: [{ token: ServerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-AssetFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: { dropZoneTarget: "dropZoneTarget", uploading: "uploading" }, outputs: { selectFiles: "selectFiles" }, host: { listeners: { "document:dragenter": "onDragEnter()", "document:dragleave": "onDragLeave($event)" } }, ngImport: i0, 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", 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"], components: [{ type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetFileInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-asset-file-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
-        }], ctorParameters: function () { return [{ type: ServerConfigService }]; }, 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
@@ -10743,20 +11183,28 @@ function SingleSearchSelectionModelFactory() {
     return new SingleSearchSelectionModel();
 }
 
-class AssetSearchInputComponent {
+class ProductSearchInputComponent {
     constructor() {
         this.searchTermChange = new EventEmitter();
-        this.tagsChange = new EventEmitter();
+        this.facetValueChange = new EventEmitter();
         this.lastTerm = '';
-        this.lastTagIds = [];
-        this.filterTagResults = (term, item) => {
-            if (!this.isTag(item)) {
+        this.lastFacetValueIds = [];
+        this.filterFacetResults = (term, item) => {
+            if (!this.isFacetValueItem(item)) {
                 return false;
             }
-            return item.value.toLowerCase().startsWith(term.toLowerCase());
+            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.isTag = (input) => {
-            return typeof input === 'object' && !!input && input.hasOwnProperty('value');
+        this.isFacetValueItem = (input) => {
+            return typeof input === 'object' && !!input && input.hasOwnProperty('facetValue');
         };
     }
     setSearchTerm(term) {
@@ -10764,28 +11212,28 @@ class AssetSearchInputComponent {
             this.selectComponent.select({ label: term, value: { label: term } });
         }
         else {
-            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isTag(i.value));
+            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isFacetValueItem(i.value));
             if (currentTerm) {
                 this.selectComponent.unselect(currentTerm);
             }
         }
     }
-    setTags(tags) {
+    setFacetValues(ids) {
         const items = this.selectComponent.items;
         this.selectComponent.selectedItems.forEach(item => {
-            if (this.isTag(item.value) && !tags.map(t => t.id).includes(item.id)) {
+            if (this.isFacetValueItem(item.value) && !ids.includes(item.value.facetValue.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);
+        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.isTag(val)) {
-                    return val.id === item.id;
+                if (this.isFacetValueItem(val)) {
+                    return val.facetValue.id === item.facetValue.id;
                 }
                 return false;
             });
@@ -10798,540 +11246,732 @@ class AssetSearchInputComponent {
         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 searchTermItem = selectedItems.find(item => !this.isFacetValueItem(item));
         const searchTerm = searchTermItem ? searchTermItem.label : '';
-        const tags = selectedItems.filter(this.isTag);
+        const facetValueIds = selectedItems.filter(this.isFacetValueItem).map(i => i.facetValue.id);
         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);
+        if (this.lastFacetValueIds.join(',') !== facetValueIds.join(',')) {
+            this.facetValueChange.emit(facetValueIds);
+            this.lastFacetValueIds = facetValueIds;
         }
     }
-    isSearchHeaderSelected() {
-        return this.selectComponent.itemsList.markedIndex === -1;
-    }
     addTagFn(item) {
         return { label: item };
     }
+    isSearchHeaderSelected() {
+        return this.selectComponent.itemsList.markedIndex === -1;
+    }
 }
-AssetSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssetSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, 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", 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"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, decorators: [{
+ProductSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, 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", 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"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], 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", 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"] }]
-        }], propDecorators: { tags: [{
+            args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], 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", 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"] }]
+        }], propDecorators: { facetValueResults: [{
                 type: Input
             }], searchTermChange: [{
                 type: Output
-            }], tagsChange: [{
+            }], facetValueChange: [{
                 type: Output
             }], selectComponent: [{
                 type: ViewChild,
                 args: ['selectComponent', { static: true }]
             }] } });
 
-class ManageTagsDialogComponent {
-    constructor(dataService) {
-        this.dataService = dataService;
-        this.toDelete = [];
-        this.toUpdate = [];
-    }
-    ngOnInit() {
-        this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
-    }
-    toggleDelete(id) {
-        const marked = this.markedAsDeleted(id);
-        if (marked) {
-            this.toDelete = this.toDelete.filter(_id => _id !== id);
-        }
-        else {
-            this.toDelete.push(id);
-        }
-    }
-    markedAsDeleted(id) {
-        return this.toDelete.includes(id);
-    }
-    updateTagValue(id, value) {
-        const exists = this.toUpdate.find(i => i.id === id);
-        if (exists) {
-            exists.value = value;
-        }
-        else {
-            this.toUpdate.push({ id, value });
-        }
-    }
-    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));
-            }
-        }
-        return forkJoin(operations).subscribe(() => this.resolveWith(true));
+/**
+ * A simple, stateless toggle button for indicating selection.
+ */
+class SelectToggleComponent {
+    constructor() {
+        this.size = 'large';
+        this.selected = false;
+        this.hiddenWhenOff = false;
+        this.disabled = false;
+        this.selectedChange = new EventEmitter();
     }
 }
-ManageTagsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ManageTagsDialogComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-ManageTagsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, 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", 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"], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe, "stringToColor": StringToColorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ManageTagsDialogComponent, decorators: [{
+SelectToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, 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", 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"], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-manage-tags-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
-        }], ctorParameters: function () { return [{ type: DataService }]; } });
+            args: [{ selector: 'vdr-select-toggle', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], hiddenWhenOff: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
 
-class FocalPointControlComponent {
+/**
+ * A control for setting the number of items per page in a paginated list.
+ */
+class ItemsPerPageControlsComponent {
     constructor() {
-        this.visible = false;
-        this.editable = false;
-        this.fpx = 0.5;
-        this.fpy = 0.5;
-        this.focalPointChange = new EventEmitter();
-    }
-    get initialPosition() {
-        return this.focalPointToOffset(this.fpx == null ? 0.5 : this.fpx, this.fpy == null ? 0.5 : this.fpy);
-    }
-    onDragEnded(event) {
-        const { x, y } = this.getCurrentFocalPoint();
-        this.fpx = x;
-        this.fpy = y;
-        this.focalPointChange.emit({ x, y });
-    }
-    getCurrentFocalPoint() {
-        const { left: dotLeft, top: dotTop, width, height } = this.dot.nativeElement.getBoundingClientRect();
-        const { left: frameLeft, top: frameTop } = this.frame.nativeElement.getBoundingClientRect();
-        const xInPx = dotLeft - frameLeft + width / 2;
-        const yInPx = dotTop - frameTop + height / 2;
-        return {
-            x: xInPx / this.width,
-            y: yInPx / this.height,
-        };
-    }
-    focalPointToOffset(x, y) {
-        const { width, height } = this.dot.nativeElement.getBoundingClientRect();
-        return {
-            x: x * this.width - width / 2,
-            y: y * this.height - height / 2,
-        };
+        this.itemsPerPage = 10;
+        this.itemsPerPageChange = new EventEmitter();
     }
 }
-FocalPointControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FocalPointControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], directives: [{ type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, decorators: [{
+ItemsPerPageControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-focal-point-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"] }]
-        }], propDecorators: { visible: [{
-                type: Input
-            }], editable: [{
+            args: [{ selector: 'vdr-items-per-page-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""] }]
+        }], propDecorators: { itemsPerPage: [{
                 type: Input
-            }], width: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }, {
+            }], itemsPerPageChange: [{
+                type: Output
+            }] } });
+
+class PaginationControlsComponent {
+    constructor() {
+        this.pageChange = new EventEmitter();
+    }
+}
+PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: { id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"], directives: [{ type: i1$5.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["maxSize", "id"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginationControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-pagination-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"] }]
+        }], propDecorators: { id: [{
                 type: Input
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height.px']
-            }, {
+            }], currentPage: [{
                 type: Input
-            }], fpx: [{
+            }], itemsPerPage: [{
                 type: Input
-            }], fpy: [{
+            }], totalItems: [{
                 type: Input
-            }], focalPointChange: [{
+            }], pageChange: [{
                 type: Output
-            }], frame: [{
-                type: ViewChild,
-                args: ['frame', { static: true }]
-            }], dot: [{
-                type: ViewChild,
-                args: ['dot', { static: true }]
             }] } });
 
-class TagSelectorComponent {
-    constructor(dataService) {
+/**
+ * @description
+ * Given an Asset object (an object with `preview` and optionally `focalPoint` properties), this pipe
+ * returns a string with query parameters designed to work with the image resize capabilities of the
+ * AssetServerPlugin.
+ *
+ * @example
+ * ```HTML
+ * <img [src]="asset | assetPreview:'tiny'" />
+ * <img [src]="asset | assetPreview:150" />
+ * ```
+ *
+ * @docsCategory pipes
+ */
+class AssetPreviewPipe {
+    transform(asset, preset = 'thumb') {
+        if (!asset) {
+            return '';
+        }
+        if (asset.preview == null || typeof asset.preview !== 'string') {
+            throw new Error(`Expected an Asset, got ${JSON.stringify(asset)}`);
+        }
+        const fp = asset.focalPoint ? `&fpx=${asset.focalPoint.x}&fpy=${asset.focalPoint.y}` : '';
+        if (Number.isNaN(Number(preset))) {
+            return `${asset.preview}?preset=${preset}${fp}`;
+        }
+        else {
+            return `${asset.preview}?w=${preset}&h=${preset}${fp}`;
+        }
+    }
+}
+AssetPreviewPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AssetPreviewPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, name: "assetPreview" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'assetPreview',
+                }]
+        }] });
+
+class ProductMultiSelectorDialogComponent {
+    constructor(dataService, changeDetector) {
         this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.mode = 'product';
+        this.initialSelectionIds = [];
+        this.searchTerm$ = new BehaviorSubject('');
+        this.searchFacetValueIds$ = new BehaviorSubject([]);
+        this.paginationConfig = {
+            currentPage: 1,
+            itemsPerPage: 25,
+            totalItems: 1,
+        };
+        this.paginationConfig$ = new BehaviorSubject(this.paginationConfig);
     }
     ngOnInit() {
-        this.allTags$ = this.dataService.product
-            .getTagList()
-            .mapStream(data => data.tags.items.map(i => i.value));
+        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();
+                });
+            }
+        }
     }
-    addTagFn(val) {
-        return val;
+    trackByFn(index, item) {
+        return item.productId;
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    setSearchTerm(term) {
+        this.searchTerm$.next(term);
     }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
+    setFacetValueIds(ids) {
+        this.searchFacetValueIds$.next(ids);
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    toggleSelection(item, event) {
+        this.selectionManager.toggleSelection(item, event);
     }
-    writeValue(obj) {
-        if (Array.isArray(obj)) {
-            this._value = obj;
-        }
+    clearSelection() {
+        this.selectionManager.selectMultiple([]);
     }
-    valueChanged(event) {
-        this.onChange(event);
+    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();
     }
 }
-TagSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TagSelectorComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-TagSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: { placeholder: "placeholder" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: TagSelectorComponent,
-            multi: true,
-        },
-    ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}: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}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i2$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TagSelectorComponent, decorators: [{
+ProductMultiSelectorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProductMultiSelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, 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", 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"], components: [{ type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$3.CdsIconCustomTag, selector: "cds-icon" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe, "paginate": i1$5.PaginatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tag-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TagSelectorComponent,
-                            multi: true,
-                        },
-                    ], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}: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}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { placeholder: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], ctorParameters: function () { return [{ type: DataService }, { type: i0.ChangeDetectorRef }]; } });
 
-class HelpTooltipComponent {
+class ProductMultiSelectorFormInputComponent {
+    constructor(modalService, dataService, changeDetector) {
+        this.modalService = modalService;
+        this.dataService = dataService;
+        this.changeDetector = changeDetector;
+        this.mode = 'product';
+        this.isListInput = true;
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.mode = (_b = (_a = this.config.ui) === null || _a === void 0 ? void 0 : _a.selectionMode) !== null && _b !== void 0 ? _b : 'product';
+    }
+    select() {
+        this.modalService
+            .fromComponent(ProductMultiSelectorDialogComponent, {
+            size: 'xl',
+            locals: {
+                mode: this.mode,
+                initialSelectionIds: this.formControl.value,
+            },
+        })
+            .subscribe(selection => {
+            if (selection) {
+                this.formControl.setValue(selection.map(item => this.mode === 'product' ? item.productId : item.productVariantId));
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
 }
-HelpTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HelpTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HelpTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: { content: "content", position: "position" }, ngImport: i0, 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", styles: ["clr-tooltip{display:inline-flex}\n"], components: [{ type: i1$3.ClrTooltip, selector: "clr-tooltip" }, { type: i1$3.ClrTooltipContent, selector: "clr-tooltip-content", inputs: ["id", "clrPosition", "clrSize"] }], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$3.ClrTooltipTrigger, selector: "[clrTooltipTrigger]" }, { type: i1$3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HelpTooltipComponent, decorators: [{
+ProductMultiSelectorFormInputComponent.id = 'product-multi-form-input';
+ProductMultiSelectorFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductMultiSelectorFormInputComponent, deps: [{ token: ModalService }, { token: DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProductMultiSelectorFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductMultiSelectorFormInputComponent, selector: "vdr-product-multi-selector-form-input", inputs: { config: "config", formControl: "formControl", readonly: "readonly" }, ngImport: i0, 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", styles: [""], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductMultiSelectorFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-help-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: ["clr-tooltip{display:inline-flex}\n"] }]
-        }], propDecorators: { content: [{
+            args: [{ selector: 'vdr-product-multi-selector-form-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ModalService }, { type: DataService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
-            }], position: [{
+            }], formControl: [{
+                type: Input
+            }], readonly: [{
                 type: Input
             }] } });
 
 /**
- * A form field wrapper which handles the correct layout and validation error display for
- * a form control.
+ * @description
+ * A component for selecting product variants via an autocomplete-style select input.
+ *
+ * @example
+ * ```HTML
+ * <vdr-product-variant-selector
+ *   (productSelected)="selectResult($event)"></vdr-product-selector>
+ * ```
+ *
+ * @docsCategory components
  */
-class FormFieldComponent {
-    constructor() {
-        /**
-         * A map of error message codes (required, pattern etc.) to messages to display
-         * when those errors are present.
-         */
-        this.errors = {};
-        /**
-         * If set to true, the input will be initially set to "readOnly", and an "edit" button
-         * will be displayed which allows the field to be edited.
-         */
-        this.readOnlyToggle = false;
-        this.isReadOnly = false;
+class ProductVariantSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.searchInput$ = new Subject();
+        this.searchLoading = false;
+        this.productSelected = new EventEmitter();
     }
     ngOnInit() {
-        if (this.readOnlyToggle) {
-            this.isReadOnly = true;
-            this.setReadOnly(true);
-        }
-        this.isReadOnly = this.readOnlyToggle;
-    }
-    setReadOnly(value) {
-        this.formFieldControl.setReadOnly(value);
-        this.isReadOnly = value;
+        this.initSearchResults();
     }
-    getErrorMessage() {
-        if (!this.formFieldControl || !this.formFieldControl.formControlName) {
-            return;
-        }
-        const errors = this.formFieldControl.formControlName.errors;
-        if (errors) {
-            for (const errorKey of Object.keys(errors)) {
-                if (this.errors[errorKey]) {
-                    return this.errors[errorKey];
-                }
+    initSearchResults() {
+        const searchItems$ = this.searchInput$.pipe(debounceTime(200), distinctUntilChanged(), tap(() => (this.searchLoading = true)), switchMap(term => {
+            if (!term) {
+                return of([]);
             }
+            return this.dataService.product
+                .productSelectorSearch(term, 10)
+                .mapSingle(result => result.search.items);
+        }), tap(() => (this.searchLoading = false)));
+        const clear$ = this.productSelected.pipe(mapTo([]));
+        this.searchResults$ = concat(of([]), merge(searchItems$, clear$));
+    }
+    selectResult(product) {
+        if (product) {
+            this.productSelected.emit(product);
+            this.ngSelect.clearModel();
         }
     }
 }
-FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FormFieldComponent, selector: "vdr-form-field", inputs: { label: "label", for: "for", tooltip: "tooltip", errors: "errors", readOnlyToggle: "readOnlyToggle" }, queries: [{ propertyName: "formFieldControl", first: true, predicate: FormFieldControlDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"clr-control-label\">\r\n        {{ label }}\r\n        <vdr-help-tooltip *ngIf=\"tooltip\" [content]=\"tooltip\"></vdr-help-tooltip>\r\n    </label>\r\n    <label\r\n        [for]=\"for\"\r\n        aria-haspopup=\"true\"\r\n        role=\"tooltip\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n        class=\"tooltip tooltip-validation tooltip-sm tooltip-top-left\"\r\n    >\r\n        <div class=\"input-row\" [class.has-toggle]=\"readOnlyToggle\">\r\n            <ng-content></ng-content>\r\n            <button\r\n                *ngIf=\"readOnlyToggle\"\r\n                type=\"button\"\r\n                [disabled]=\"!isReadOnly\"\r\n                [title]=\"'common.edit-field' | translate\"\r\n                class=\"btn btn-icon edit-button\"\r\n                (click)=\"setReadOnly(false)\"\r\n            >\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"clr-subtext\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n        <span class=\"tooltip-content\">{{ label }} is required.</span>\r\n    </label>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>label:first-child{top:6px}:host .form-group>label:nth-of-type(2){flex:1;max-width:20rem}:host .form-group>label:nth-of-type(2) ::ng-deep>*:not(.tooltip-content){width:100%}:host .form-group .tooltip-validation{height:initial}:host .form-group.no-label{margin:-6px 0 0;padding:0;justify-content:center}:host .form-group.no-label>label{position:relative;justify-content:center}:host .form-group.no-label .input-row{justify-content:center}:host .input-row{display:flex}:host .input-row ::ng-deep input{flex:1}:host .input-row ::ng-deep input[disabled]{background-color:var(--color-component-bg-200)}:host .input-row button.edit-button{margin:0;border-radius:0 3px 3px 0}:host .input-row.has-toggle ::ng-deep input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none}:host .input-row ::ng-deep clr-toggle-wrapper{margin-top:8px}.tooltip.tooltip-validation.invalid:before{position:absolute;content:\"\";height:.666667rem;width:.666667rem;top:.125rem;right:.25rem;background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.tooltip.tooltip-sm>.tooltip-content,.tooltip .tooltip-content.tooltip-sm{width:5rem}.tooltip:hover>.tooltip-content{right:12px;margin-bottom:0}.tooltip:not(.invalid):hover>.tooltip-content{display:none}\n"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldComponent, decorators: [{
+ProductVariantSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
+ProductVariantSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-form-field', template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"clr-control-label\">\r\n        {{ label }}\r\n        <vdr-help-tooltip *ngIf=\"tooltip\" [content]=\"tooltip\"></vdr-help-tooltip>\r\n    </label>\r\n    <label\r\n        [for]=\"for\"\r\n        aria-haspopup=\"true\"\r\n        role=\"tooltip\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n        class=\"tooltip tooltip-validation tooltip-sm tooltip-top-left\"\r\n    >\r\n        <div class=\"input-row\" [class.has-toggle]=\"readOnlyToggle\">\r\n            <ng-content></ng-content>\r\n            <button\r\n                *ngIf=\"readOnlyToggle\"\r\n                type=\"button\"\r\n                [disabled]=\"!isReadOnly\"\r\n                [title]=\"'common.edit-field' | translate\"\r\n                class=\"btn btn-icon edit-button\"\r\n                (click)=\"setReadOnly(false)\"\r\n            >\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"clr-subtext\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n        <span class=\"tooltip-content\">{{ label }} is required.</span>\r\n    </label>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>label:first-child{top:6px}:host .form-group>label:nth-of-type(2){flex:1;max-width:20rem}:host .form-group>label:nth-of-type(2) ::ng-deep>*:not(.tooltip-content){width:100%}:host .form-group .tooltip-validation{height:initial}:host .form-group.no-label{margin:-6px 0 0;padding:0;justify-content:center}:host .form-group.no-label>label{position:relative;justify-content:center}:host .form-group.no-label .input-row{justify-content:center}:host .input-row{display:flex}:host .input-row ::ng-deep input{flex:1}:host .input-row ::ng-deep input[disabled]{background-color:var(--color-component-bg-200)}:host .input-row button.edit-button{margin:0;border-radius:0 3px 3px 0}:host .input-row.has-toggle ::ng-deep input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none}:host .input-row ::ng-deep clr-toggle-wrapper{margin-top:8px}.tooltip.tooltip-validation.invalid:before{position:absolute;content:\"\";height:.666667rem;width:.666667rem;top:.125rem;right:.25rem;background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.tooltip.tooltip-sm>.tooltip-content,.tooltip .tooltip-content.tooltip-sm{width:5rem}.tooltip:hover>.tooltip-content{right:12px;margin-bottom:0}.tooltip:not(.invalid):hover>.tooltip-content{display:none}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], for: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], readOnlyToggle: [{
-                type: Input
-            }], formFieldControl: [{
-                type: ContentChild,
-                args: [FormFieldControlDirective, { static: true }]
+            args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { productSelected: [{
+                type: Output
+            }], ngSelect: [{
+                type: ViewChild,
+                args: ['autoComplete', { static: true }]
             }] } });
 
 /**
- * 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.
+ * @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
  */
-function getConfigArgValue(value) {
-    try {
-        return value ? JSON.parse(value) : undefined;
+class ProductSelectorFormInputComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.isListInput = true;
     }
-    catch (e) {
-        return value;
+    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));
     }
 }
-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) });
-        }) });
-}
+ProductSelectorFormInputComponent.id = 'product-selector-form-input';
+ProductSelectorFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSelectorFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
+ProductSelectorFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSelectorFormInputComponent, selector: "vdr-product-selector-form-input", ngImport: i0, 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-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", 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"], components: [{ type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSelectorFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-selector-form-input', changeDetection: ChangeDetectionStrategy.OnPush, 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-variant-selector (productSelected)=\"addProductVariant($event)\"></vdr-product-variant-selector>\r\n", 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"] }]
+        }], ctorParameters: function () { return [{ type: DataService }]; } });
+
 /**
- * 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' }
- *     ]
- * }
- * ```
+ * A component for selecting files to upload as new Assets.
  */
-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;
+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,
+        };
     }
-    if (def.code !== value.code) {
-        return false;
+    ngOnInit() {
+        this.accept = this.serverConfig.serverConfig.permittedAssetTypes.join(',');
+        this.fitDropZoneToTarget();
     }
-    for (const argDef of def.args) {
-        const argVal = value.args[argDef.name];
-        if (argDef.required && (argVal == null || argVal === '' || argVal === '0')) {
-            return false;
+    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;
         }
     }
-    return true;
-}
-/**
- * Returns a default value based on the type of the config arg.
- */
-function getDefaultConfigArgValue(arg) {
-    if (arg.list) {
-        return [];
+    /**
+     * 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();
     }
-    if (arg.defaultValue) {
-        return arg.defaultValue;
+    // 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);
     }
-    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);
+    select(event) {
+        const files = event.target.files;
+        if (files) {
+            this.selectFiles.emit(Array.from(files));
+        }
     }
-}
+    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;
+        }
+    }
+}
+AssetFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetFileInputComponent, deps: [{ token: ServerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+AssetFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: { dropZoneTarget: "dropZoneTarget", uploading: "uploading" }, outputs: { selectFiles: "selectFiles" }, host: { listeners: { "document:dragenter": "onDragEnter()", "document:dragleave": "onDragLeave($event)" } }, ngImport: i0, 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", 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"], components: [{ type: i1$3.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-asset-file-input', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], ctorParameters: function () { return [{ type: ServerConfigService }]; }, propDecorators: { dropZoneTarget: [{
+                type: Input
+            }], uploading: [{
+                type: Input
+            }], selectFiles: [{
+                type: Output
+            }], onDragEnter: [{
+                type: HostListener,
+                args: ['document:dragenter']
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['document:dragleave', ['$event']]
+            }] } });
 
-/**
- * A host component which delegates to an instance or list of FormInputComponent components.
- */
-class DynamicFormInputComponent {
-    constructor(componentRegistryService, componentFactoryResolver, changeDetectorRef, injector) {
-        this.componentRegistryService = componentRegistryService;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.changeDetectorRef = changeDetectorRef;
-        this.injector = injector;
-        this.renderAsList = false;
-        this.listItems = [];
-        this.listId = 1;
-        this.listFormArray = new FormArray([]);
-        this.renderList$ = new Subject();
-        this.destroy$ = new Subject();
+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');
+        };
     }
-    ngOnInit() {
-        const componentId = this.getInputComponentConfig(this.def).component;
-        const componentType = this.componentRegistryService.getInputComponent(componentId);
-        if (componentType) {
-            this.componentType = componentType;
+    setSearchTerm(term) {
+        if (term) {
+            this.selectComponent.select({ label: term, value: { label: term } });
         }
         else {
-            // tslint:disable-next-line:no-console
-            console.error(`No form input component registered with the id "${componentId}". Using the default input instead.`);
-            const defaultComponentType = this.componentRegistryService.getInputComponent(this.getInputComponentConfig(Object.assign(Object.assign({}, this.def), { ui: undefined })).component);
-            if (defaultComponentType) {
-                this.componentType = defaultComponentType;
+            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isTag(i.value));
+            if (currentTerm) {
+                this.selectComponent.unselect(currentTerm);
             }
         }
     }
-    ngAfterViewInit() {
-        var _a;
-        if (this.componentType) {
-            const factory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);
-            // create a temp instance to check the value of `isListInput`
-            const cmpRef = factory.create(this.injector);
-            const isListInputComponent = (_a = cmpRef.instance.isListInput) !== null && _a !== void 0 ? _a : false;
-            cmpRef.destroy();
-            if (this.def.list === false && isListInputComponent) {
-                throw new Error(`The ${this.componentType.name} component is a list input, but the definition for ${this.def.name} does not expect a list`);
-            }
-            this.renderAsList = this.def.list && !isListInputComponent;
-            if (!this.renderAsList) {
-                this.singleComponentRef = this.renderInputComponent(factory, this.singleViewContainer, this.control);
+    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);
             }
-            else {
-                let formArraySub;
-                const renderListInputs = (viewContainerRefs) => {
-                    if (viewContainerRefs.length) {
-                        if (formArraySub) {
-                            formArraySub.unsubscribe();
-                        }
-                        this.listFormArray = new FormArray([]);
-                        this.listItems.forEach(i => { var _a; return (_a = i.componentRef) === null || _a === void 0 ? void 0 : _a.destroy(); });
-                        viewContainerRefs.forEach((ref, i) => {
-                            var _a;
-                            const listItem = (_a = this.listItems) === null || _a === void 0 ? void 0 : _a[i];
-                            if (listItem) {
-                                this.listFormArray.push(listItem.control);
-                                listItem.componentRef = this.renderInputComponent(factory, ref, listItem.control);
-                            }
-                        });
-                        formArraySub = this.listFormArray.valueChanges
-                            .pipe(takeUntil(this.destroy$))
-                            .subscribe(val => {
-                            this.control.markAsTouched();
-                            this.control.markAsDirty();
-                            this.onChange(val);
-                            this.control.patchValue(val, { emitEvent: false });
-                        });
-                        setTimeout(() => this.changeDetectorRef.markForCheck());
-                    }
-                };
-                // initial render
-                this.listItemContainers.changes
-                    .pipe(take(1))
-                    .subscribe(val => renderListInputs(this.listItemContainers));
-                // render on changes to the list
-                this.renderList$
-                    .pipe(switchMap(() => this.listItemContainers.changes.pipe(take(1))), takeUntil(this.destroy$))
-                    .subscribe(() => {
-                    renderListInputs(this.listItemContainers);
-                });
+        });
+        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 });
             }
-        }
-        setTimeout(() => this.changeDetectorRef.markForCheck());
+        });
     }
-    ngOnChanges(changes) {
-        if (this.listItems) {
-            for (const item of this.listItems) {
-                if (item.componentRef) {
-                    this.updateBindings(changes, item.componentRef);
-                }
+    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);
             }
         }
-        if (this.singleComponentRef) {
-            this.updateBindings(changes, this.singleComponentRef);
+        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);
         }
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    isSearchHeaderSelected() {
+        return this.selectComponent.itemsList.markedIndex === -1;
     }
-    updateBindings(changes, componentRef) {
-        if ('def' in changes) {
-            componentRef.instance.config = simpleDeepClone(this.def);
+    addTagFn(item) {
+        return { label: item };
+    }
+}
+AssetSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AssetSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: { tags: "tags" }, outputs: { searchTermChange: "searchTermChange", tagsChange: "tagsChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, 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", 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"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-asset-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], 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", 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"] }]
+        }], propDecorators: { tags: [{
+                type: Input
+            }], searchTermChange: [{
+                type: Output
+            }], tagsChange: [{
+                type: Output
+            }], selectComponent: [{
+                type: ViewChild,
+                args: ['selectComponent', { static: true }]
+            }] } });
+
+class ManageTagsDialogComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.toDelete = [];
+        this.toUpdate = [];
+    }
+    ngOnInit() {
+        this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
+    }
+    toggleDelete(id) {
+        const marked = this.markedAsDeleted(id);
+        if (marked) {
+            this.toDelete = this.toDelete.filter(_id => _id !== id);
         }
-        if ('readonly' in changes) {
-            componentRef.instance.readonly = this.readonly;
+        else {
+            this.toDelete.push(id);
         }
-        componentRef.injector.get(ChangeDetectorRef).markForCheck();
     }
-    trackById(index, item) {
-        return item.id;
+    markedAsDeleted(id) {
+        return this.toDelete.includes(id);
     }
-    addListItem() {
-        var _a;
-        if (!this.listItems) {
-            this.listItems = [];
+    updateTagValue(id, value) {
+        const exists = this.toUpdate.find(i => i.id === id);
+        if (exists) {
+            exists.value = value;
+        }
+        else {
+            this.toUpdate.push({ id, value });
         }
-        this.listItems.push({
-            id: this.listId++,
-            control: new FormControl((_a = this.def.defaultValue) !== null && _a !== void 0 ? _a : null),
-        });
-        this.renderList$.next();
     }
-    moveListItem(event) {
-        if (this.listItems) {
-            moveItemInArray(this.listItems, event.previousIndex, event.currentIndex);
-            this.listFormArray.removeAt(event.previousIndex);
-            this.listFormArray.insert(event.currentIndex, event.item.data.control);
-            this.renderList$.next();
+    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));
+            }
         }
+        return forkJoin(operations).subscribe(() => this.resolveWith(true));
+    }
+}
+ManageTagsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ManageTagsDialogComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
+ManageTagsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ManageTagsDialogComponent, selector: "vdr-manage-tags-dialog", ngImport: i0, 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", 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"], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe, "stringToColor": StringToColorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ManageTagsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-manage-tags-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+        }], ctorParameters: function () { return [{ type: DataService }]; } });
+
+class FocalPointControlComponent {
+    constructor() {
+        this.visible = false;
+        this.editable = false;
+        this.fpx = 0.5;
+        this.fpy = 0.5;
+        this.focalPointChange = new EventEmitter();
+    }
+    get initialPosition() {
+        return this.focalPointToOffset(this.fpx == null ? 0.5 : this.fpx, this.fpy == null ? 0.5 : this.fpy);
+    }
+    onDragEnded(event) {
+        const { x, y } = this.getCurrentFocalPoint();
+        this.fpx = x;
+        this.fpy = y;
+        this.focalPointChange.emit({ x, y });
+    }
+    getCurrentFocalPoint() {
+        const { left: dotLeft, top: dotTop, width, height } = this.dot.nativeElement.getBoundingClientRect();
+        const { left: frameLeft, top: frameTop } = this.frame.nativeElement.getBoundingClientRect();
+        const xInPx = dotLeft - frameLeft + width / 2;
+        const yInPx = dotTop - frameTop + height / 2;
+        return {
+            x: xInPx / this.width,
+            y: yInPx / this.height,
+        };
+    }
+    focalPointToOffset(x, y) {
+        const { width, height } = this.dot.nativeElement.getBoundingClientRect();
+        return {
+            x: x * this.width - width / 2,
+            y: y * this.height - height / 2,
+        };
+    }
+}
+FocalPointControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FocalPointControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], directives: [{ type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocalPointControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-focal-point-control', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"] }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }, {
+                type: Input
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }, {
+                type: Input
+            }], fpx: [{
+                type: Input
+            }], fpy: [{
+                type: Input
+            }], focalPointChange: [{
+                type: Output
+            }], frame: [{
+                type: ViewChild,
+                args: ['frame', { static: true }]
+            }], dot: [{
+                type: ViewChild,
+                args: ['dot', { static: true }]
+            }] } });
+
+class TagSelectorComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
     }
-    removeListItem(item) {
-        var _a;
-        if (this.listItems) {
-            const index = this.listItems.findIndex(i => i === item);
-            (_a = item.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.listFormArray.removeAt(index);
-            this.listItems = this.listItems.filter(i => i !== item);
-            this.renderList$.next();
-        }
+    ngOnInit() {
+        this.allTags$ = this.dataService.product
+            .getTagList()
+            .mapStream(data => data.tags.items.map(i => i.value));
     }
-    renderInputComponent(factory, viewContainerRef, formControl) {
-        const componentRef = viewContainerRef.createComponent(factory);
-        const { instance } = componentRef;
-        instance.config = simpleDeepClone(this.def);
-        instance.formControl = formControl;
-        instance.readonly = this.readonly;
-        componentRef.injector.get(ChangeDetectorRef).markForCheck();
-        return componentRef;
+    addTagFn(val) {
+        return val;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -11339,102 +11979,100 @@ class DynamicFormInputComponent {
     registerOnTouched(fn) {
         this.onTouch = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
     writeValue(obj) {
         if (Array.isArray(obj)) {
-            if (obj.length === this.listItems.length) {
-                obj.forEach((value, index) => {
-                    var _a;
-                    const control = (_a = this.listItems[index]) === null || _a === void 0 ? void 0 : _a.control;
-                    control.patchValue(getConfigArgValue(value), { emitEvent: false });
-                });
-            }
-            else {
-                this.listItems = obj.map(value => ({
-                    id: this.listId++,
-                    control: new FormControl(getConfigArgValue(value)),
-                }));
-                this.renderList$.next();
-            }
-        }
-        else {
-            this.listItems = [];
-            this.renderList$.next();
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    getInputComponentConfig(argDef) {
-        var _a;
-        if (this.hasUiConfig(argDef) && argDef.ui.component) {
-            return argDef.ui;
-        }
-        const type = argDef === null || argDef === void 0 ? void 0 : argDef.type;
-        switch (type) {
-            case 'string':
-            case 'localeString': {
-                const hasOptions = !!(this.isConfigArgDef(argDef) && ((_a = argDef.ui) === null || _a === void 0 ? void 0 : _a.options)) ||
-                    !!argDef.options;
-                if (hasOptions) {
-                    return { component: 'select-form-input' };
-                }
-                else {
-                    return { component: 'text-form-input' };
-                }
-            }
-            case 'text': {
-                return { component: 'textarea-form-input' };
-            }
-            case 'int':
-            case 'float':
-                return { component: 'number-form-input' };
-            case 'boolean':
-                return { component: 'boolean-form-input' };
-            case 'datetime':
-                return { component: 'date-form-input' };
-            case 'ID':
-                return { component: 'text-form-input' };
-            case 'relation':
-                return { component: 'relation-form-input' };
-            default:
-                assertNever(type);
+            this._value = obj;
         }
     }
-    isConfigArgDef(def) {
-        return (def === null || def === void 0 ? void 0 : def.__typename) === 'ConfigArgDefinition';
-    }
-    hasUiConfig(def) {
-        var _a;
-        return typeof def === 'object' && typeof ((_a = def === null || def === void 0 ? void 0 : def.ui) === null || _a === void 0 ? void 0 : _a.component) === 'string';
+    valueChanged(event) {
+        this.onChange(event);
     }
 }
-DynamicFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DynamicFormInputComponent, deps: [{ token: ComponentRegistryService }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: { def: "def", readonly: "readonly", control: "control" }, providers: [
+TagSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TagSelectorComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component });
+TagSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: { placeholder: "placeholder" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
-            useExisting: DynamicFormInputComponent,
+            useExisting: TagSelectorComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "singleViewContainer", first: true, predicate: ["single"], descendants: true, read: ViewContainerRef }, { propertyName: "listItemContainers", predicate: ["listItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
+    ], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}: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}\n"], components: [{ type: i2$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i2$1.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }], directives: [{ type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TagSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dynamic-form-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'vdr-tag-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: DynamicFormInputComponent,
+                            useExisting: TagSelectorComponent,
                             multi: true,
                         },
-                    ], template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div class=\"list-item-row\" *ngFor=\"let item of listItems; trackBy: trackById\" cdkDrag [cdkDragData]=\"item\">\r\n            <ng-container #listItem></ng-container>\r\n            <button class=\"btn btn-link btn-sm btn-warning\" (click)=\"removeListItem(item)\" [title]=\"'common.remove-item-from-list' | translate\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <div class=\"flex-spacer\"></div>\r\n            <div class=\"drag-handle\" cdkDragHandle *ngIf=\"!readonly\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\">\r\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{flex:1}.list-container{border:1px solid var(--color-component-border-200);border-radius:3px;padding:12px}.list-item-row{font-size:13px;display:flex;align-items:center;margin:3px 0}.drag-placeholder{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{font-size:13px;background-color:var(--color-component-bg-100);opacity:.8;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: function () { return [{ type: ComponentRegistryService }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { def: [{
+                    ], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [multiple]=\"true\"\r\n    [ngModel]=\"_value\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"true\"\r\n    [disabled]=\"disabled\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-tag=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"tag\" icon=\"close\" (iconClick)=\"clear(tag)\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let tag of allTags$ | async\" [value]=\"tag\">\r\n        <vdr-chip [colorFrom]=\"tag\"><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag }}</vdr-chip>\r\n    </ng-option>\r\n</ng-select>\r\n", styles: [":host{display:block;margin-top:12px;position:relative}: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}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { placeholder: [{
                 type: Input
-            }], readonly: [{
+            }] } });
+
+/**
+ * A form field wrapper which handles the correct layout and validation error display for
+ * a form control.
+ */
+class FormFieldComponent {
+    constructor() {
+        /**
+         * A map of error message codes (required, pattern etc.) to messages to display
+         * when those errors are present.
+         */
+        this.errors = {};
+        /**
+         * If set to true, the input will be initially set to "readOnly", and an "edit" button
+         * will be displayed which allows the field to be edited.
+         */
+        this.readOnlyToggle = false;
+        this.isReadOnly = false;
+    }
+    ngOnInit() {
+        if (this.readOnlyToggle) {
+            this.isReadOnly = true;
+            this.setReadOnly(true);
+        }
+        this.isReadOnly = this.readOnlyToggle;
+    }
+    setReadOnly(value) {
+        this.formFieldControl.setReadOnly(value);
+        this.isReadOnly = value;
+    }
+    getErrorMessage() {
+        if (!this.formFieldControl || !this.formFieldControl.formControlName) {
+            return;
+        }
+        const errors = this.formFieldControl.formControlName.errors;
+        if (errors) {
+            for (const errorKey of Object.keys(errors)) {
+                if (this.errors[errorKey]) {
+                    return this.errors[errorKey];
+                }
+            }
+        }
+    }
+}
+FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FormFieldComponent, selector: "vdr-form-field", inputs: { label: "label", for: "for", tooltip: "tooltip", errors: "errors", readOnlyToggle: "readOnlyToggle" }, queries: [{ propertyName: "formFieldControl", first: true, predicate: FormFieldControlDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"clr-control-label\">\r\n        {{ label }}\r\n        <vdr-help-tooltip *ngIf=\"tooltip\" [content]=\"tooltip\"></vdr-help-tooltip>\r\n    </label>\r\n    <label\r\n        [for]=\"for\"\r\n        aria-haspopup=\"true\"\r\n        role=\"tooltip\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n        class=\"tooltip tooltip-validation tooltip-sm tooltip-top-left\"\r\n    >\r\n        <div class=\"input-row\" [class.has-toggle]=\"readOnlyToggle\">\r\n            <ng-content></ng-content>\r\n            <button\r\n                *ngIf=\"readOnlyToggle\"\r\n                type=\"button\"\r\n                [disabled]=\"!isReadOnly\"\r\n                [title]=\"'common.edit-field' | translate\"\r\n                class=\"btn btn-icon edit-button\"\r\n                (click)=\"setReadOnly(false)\"\r\n            >\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"clr-subtext\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n        <span class=\"tooltip-content\">{{ label }} is required.</span>\r\n    </label>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>label:first-child{top:6px}:host .form-group>label:nth-of-type(2){flex:1;max-width:20rem}:host .form-group>label:nth-of-type(2) ::ng-deep>*:not(.tooltip-content){width:100%}:host .form-group .tooltip-validation{height:initial}:host .form-group.no-label{margin:-6px 0 0;padding:0;justify-content:center}:host .form-group.no-label>label{position:relative;justify-content:center}:host .form-group.no-label .input-row{justify-content:center}:host .input-row{display:flex}:host .input-row ::ng-deep input{flex:1}:host .input-row ::ng-deep input[disabled]{background-color:var(--color-component-bg-200)}:host .input-row button.edit-button{margin:0;border-radius:0 3px 3px 0}:host .input-row.has-toggle ::ng-deep input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none}:host .input-row ::ng-deep clr-toggle-wrapper{margin-top:8px}.tooltip.tooltip-validation.invalid:before{position:absolute;content:\"\";height:.666667rem;width:.666667rem;top:.125rem;right:.25rem;background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.tooltip.tooltip-sm>.tooltip-content,.tooltip .tooltip-content.tooltip-sm{width:5rem}.tooltip:hover>.tooltip-content{right:12px;margin-bottom:0}.tooltip:not(.invalid):hover>.tooltip-content{display:none}\n"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-form-field', template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"clr-control-label\">\r\n        {{ label }}\r\n        <vdr-help-tooltip *ngIf=\"tooltip\" [content]=\"tooltip\"></vdr-help-tooltip>\r\n    </label>\r\n    <label\r\n        [for]=\"for\"\r\n        aria-haspopup=\"true\"\r\n        role=\"tooltip\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n        class=\"tooltip tooltip-validation tooltip-sm tooltip-top-left\"\r\n    >\r\n        <div class=\"input-row\" [class.has-toggle]=\"readOnlyToggle\">\r\n            <ng-content></ng-content>\r\n            <button\r\n                *ngIf=\"readOnlyToggle\"\r\n                type=\"button\"\r\n                [disabled]=\"!isReadOnly\"\r\n                [title]=\"'common.edit-field' | translate\"\r\n                class=\"btn btn-icon edit-button\"\r\n                (click)=\"setReadOnly(false)\"\r\n            >\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"clr-subtext\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n        <span class=\"tooltip-content\">{{ label }} is required.</span>\r\n    </label>\r\n</div>\r\n", styles: [":host{display:block}:host .form-group>label:first-child{top:6px}:host .form-group>label:nth-of-type(2){flex:1;max-width:20rem}:host .form-group>label:nth-of-type(2) ::ng-deep>*:not(.tooltip-content){width:100%}:host .form-group .tooltip-validation{height:initial}:host .form-group.no-label{margin:-6px 0 0;padding:0;justify-content:center}:host .form-group.no-label>label{position:relative;justify-content:center}:host .form-group.no-label .input-row{justify-content:center}:host .input-row{display:flex}:host .input-row ::ng-deep input{flex:1}:host .input-row ::ng-deep input[disabled]{background-color:var(--color-component-bg-200)}:host .input-row button.edit-button{margin:0;border-radius:0 3px 3px 0}:host .input-row.has-toggle ::ng-deep input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none}:host .input-row ::ng-deep clr-toggle-wrapper{margin-top:8px}.tooltip.tooltip-validation.invalid:before{position:absolute;content:\"\";height:.666667rem;width:.666667rem;top:.125rem;right:.25rem;background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.tooltip.tooltip-sm>.tooltip-content,.tooltip .tooltip-content.tooltip-sm{width:5rem}.tooltip:hover>.tooltip-content{right:12px;margin-bottom:0}.tooltip:not(.invalid):hover>.tooltip-content{display:none}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], control: [{
+            }], for: [{
                 type: Input
-            }], singleViewContainer: [{
-                type: ViewChild,
-                args: ['single', { read: ViewContainerRef }]
-            }], listItemContainers: [{
-                type: ViewChildren,
-                args: ['listItem', { read: ViewContainerRef }]
+            }], tooltip: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], readOnlyToggle: [{
+                type: Input
+            }], formFieldControl: [{
+                type: ContentChild,
+                args: [FormFieldControlDirective, { static: true }]
             }] } });
 
 /**
@@ -11924,11 +12562,15 @@ class AssetGalleryComponent {
         this.canDelete = false;
         this.selectionChange = new EventEmitter();
         this.deleteAssets = new EventEmitter();
-        this.selection = [];
+        this.selectionManager = new SelectionManager({
+            multiSelect: this.multiSelect,
+            itemsAreEqual: (a, b) => a.id === b.id,
+            additiveMode: false,
+        });
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         if (this.assets) {
-            for (const asset of this.selection) {
+            for (const asset of this.selectionManager.selection) {
                 // Update and selected assets with any changes
                 const match = this.assets.find(a => a.id === asset.id);
                 if (match) {
@@ -11936,49 +12578,26 @@ class AssetGalleryComponent {
                 }
             }
         }
-    }
-    toggleSelection(asset, event) {
-        const index = this.selection.findIndex(a => a.id === asset.id);
-        if (this.multiSelect && (event === null || event === void 0 ? void 0 : event.shiftKey) && 1 <= this.selection.length) {
-            const lastSelection = this.selection[this.selection.length - 1];
-            const lastSelectionIndex = this.assets.findIndex(a => a.id === lastSelection.id);
-            const currentIndex = this.assets.findIndex(a => a.id === asset.id);
-            const start = currentIndex < lastSelectionIndex ? currentIndex : lastSelectionIndex;
-            const end = currentIndex > lastSelectionIndex ? currentIndex + 1 : lastSelectionIndex;
-            this.selection.push(...this.assets.slice(start, end).filter(a => !this.selection.find(s => s.id === a.id)));
-        }
-        else if (index === -1) {
-            if (this.multiSelect && ((event === null || event === void 0 ? void 0 : event.ctrlKey) || (event === null || event === void 0 ? void 0 : event.shiftKey))) {
-                this.selection.push(asset);
-            }
-            else {
-                this.selection = [asset];
-            }
+        if (changes['assets']) {
+            this.selectionManager.setCurrentItems(this.assets);
         }
-        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);
-            }
+        if (changes['multiSelect']) {
+            this.selectionManager.setMultiSelect(this.multiSelect);
         }
-        // Make the selection mutable
-        this.selection = this.selection.map(x => (Object.assign({}, x)));
-        this.selectionChange.emit(this.selection);
+    }
+    toggleSelection(asset, event) {
+        this.selectionManager.toggleSelection(asset, event);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
     selectMultiple(assets) {
-        this.selection = assets;
-        this.selectionChange.emit(this.selection);
+        this.selectionManager.selectMultiple(assets);
+        this.selectionChange.emit(this.selectionManager.selection);
     }
     isSelected(asset) {
-        return !!this.selection.find(a => a.id === asset.id);
+        return this.selectionManager.isSelected(asset);
     }
     lastSelected() {
-        return this.selection[this.selection.length - 1];
+        return this.selectionManager.lastSelected();
     }
     previewAsset(asset) {
         this.modalService
@@ -11987,69 +12606,27 @@ class AssetGalleryComponent {
             closable: true,
             locals: { asset },
         })
-            .subscribe();
-    }
-    entityInfoClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-}
-AssetGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-AssetGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, 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", 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:700}\n"], components: [{ type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe, "filesize": FileSizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetGalleryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { assets: [{
-                type: Input
-            }], multiSelect: [{
-                type: Input
-            }], canDelete: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], deleteAssets: [{
-                type: Output
-            }] } });
-
-/**
- * A control for setting the number of items per page in a paginated list.
- */
-class ItemsPerPageControlsComponent {
-    constructor() {
-        this.itemsPerPage = 10;
-        this.itemsPerPageChange = new EventEmitter();
+            .subscribe();
     }
-}
-ItemsPerPageControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ItemsPerPageControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: { itemsPerPage: "itemsPerPage" }, outputs: { itemsPerPageChange: "itemsPerPageChange" }, ngImport: i0, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""], directives: [{ type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ItemsPerPageControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-items-per-page-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"select\">\r\n    <select [ngModel]=\"itemsPerPage\" (change)=\"itemsPerPageChange.emit($event.target.value)\">\r\n        <option [value]=\"10\">{{ 'common.items-per-page-option' | translate: { count: 10 } }}</option>\r\n        <option [value]=\"25\">{{ 'common.items-per-page-option' | translate: { count: 25 } }}</option>\r\n        <option [value]=\"50\">{{ 'common.items-per-page-option' | translate: { count: 50 } }}</option>\r\n        <option [value]=\"100\">{{ 'common.items-per-page-option' | translate: { count: 100 } }}</option>\r\n    </select>\r\n</div>\r\n", styles: [""] }]
-        }], propDecorators: { itemsPerPage: [{
-                type: Input
-            }], itemsPerPageChange: [{
-                type: Output
-            }] } });
-
-class PaginationControlsComponent {
-    constructor() {
-        this.pageChange = new EventEmitter();
+    entityInfoClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
     }
 }
-PaginationControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginationControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: { id: "id", currentPage: "currentPage", itemsPerPage: "itemsPerPage", totalItems: "totalItems" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"], directives: [{ type: i1$5.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["maxSize", "id"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginationControlsComponent, decorators: [{
+AssetGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+AssetGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, 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", 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:700}\n"], components: [{ type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "assetPreview": AssetPreviewPipe, "translate": i7.TranslatePipe, "filesize": FileSizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-pagination-controls', changeDetection: ChangeDetectionStrategy.OnPush, template: "<pagination-template #p=\"paginationApi\" (pageChange)=\"pageChange.emit($event)\" [id]=\"id\">\r\n    <ul>\r\n        <li class=\"pagination-previous\">\r\n            <a *ngIf=\"!p.isFirstPage()\" (click)=\"p.previous()\" (keyup.enter)=\"p.previous()\" tabindex=\"0\">\u00AB</a>\r\n            <div *ngIf=\"p.isFirstPage()\">\u00AB</div>\r\n        </li>\r\n\r\n        <li *ngFor=\"let page of p.pages\">\r\n            <a\r\n                (click)=\"p.setCurrent(page.value)\"\r\n                (keyup.enter)=\"p.setCurrent(page.value)\"\r\n                *ngIf=\"p.getCurrent() !== page.value\"\r\n                tabindex=\"0\"\r\n            >\r\n                {{ page.label }}\r\n            </a>\r\n\r\n            <div class=\"current\" *ngIf=\"p.getCurrent() === page.value\">{{ page.label }}</div>\r\n        </li>\r\n\r\n        <li class=\"pagination-next\">\r\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" (keyup.enter)=\"p.next()\" tabindex=\"0\">\u00BB</a>\r\n            <div *ngIf=\"p.isLastPage()\">\u00BB</div>\r\n        </li>\r\n    </ul>\r\n</pagination-template>\r\n", styles: ["pagination-template{display:block}pagination-template ul{list-style-type:none;display:flex;justify-content:center}pagination-template li{transition:border-bottom-color .2s}pagination-template li>a{cursor:pointer}pagination-template li>a:hover,pagination-template li>a:focus{border-bottom-color:var(--color-grey-300);text-decoration:none}pagination-template li>a,pagination-template li>div{padding:3px 12px;display:block;border-bottom:3px solid transparent;-webkit-user-select:none;user-select:none}pagination-template li>div.current{border-bottom-color:var(--color-primary-500)}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], currentPage: [{
+            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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:700}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { assets: [{
                 type: Input
-            }], itemsPerPage: [{
+            }], multiSelect: [{
                 type: Input
-            }], totalItems: [{
+            }], canDelete: [{
                 type: Input
-            }], pageChange: [{
+            }], selectionChange: [{
+                type: Output
+            }], deleteAssets: [{
                 type: Output
             }] } });
 
@@ -12240,7 +12817,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);
             }
@@ -12259,14 +12836,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
@@ -12278,15 +12855,17 @@ class RelationAssetInputComponent {
             .subscribe();
     }
 }
+RelationAssetInputComponent.id = 'asset-form-input';
 RelationAssetInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationAssetInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationAssetInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectAsset()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"image\"\r\n    [entity]=\"asset$ | async\"\r\n    [selectLabel]=\"'asset.select-asset' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-asset=\"entity\">\r\n        <img\r\n            class=\"preview\"\r\n            [title]=\"'asset.preview' | translate\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n            (click)=\"previewAsset(asset)\"\r\n        />\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-asset=\"entity\">\r\n        <div class=\"name\" [title]=\"asset.name\">\r\n            {{ asset.name }}\r\n        </div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n", styles: [".preview{cursor:pointer}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationAssetInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: { readonly: "readonly", formControl: ["parentFormControl", "formControl"], config: "config" }, ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectAsset()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"image\"\r\n    [entity]=\"asset$ | async\"\r\n    [selectLabel]=\"'asset.select-asset' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-asset=\"entity\">\r\n        <img\r\n            class=\"preview\"\r\n            [title]=\"'asset.preview' | translate\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n            (click)=\"previewAsset(asset)\"\r\n        />\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-asset=\"entity\">\r\n        <div class=\"name\" [title]=\"asset.name\">\r\n            {{ asset.name }}\r\n        </div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n", styles: [".preview{cursor:pointer}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationAssetInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-asset-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectAsset()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"image\"\r\n    [entity]=\"asset$ | async\"\r\n    [selectLabel]=\"'asset.select-asset' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-asset=\"entity\">\r\n        <img\r\n            class=\"preview\"\r\n            [title]=\"'asset.preview' | translate\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n            (click)=\"previewAsset(asset)\"\r\n        />\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-asset=\"entity\">\r\n        <div class=\"name\" [title]=\"asset.name\">\r\n            {{ asset.name }}\r\n        </div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n", styles: [".preview{cursor:pointer}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }, { type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
-            }], parentFormControl: [{
-                type: Input
+            }], formControl: [{
+                type: Input,
+                args: ['parentFormControl']
             }], config: [{
                 type: Input
             }] } });
@@ -13344,7 +13923,7 @@ RichTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             multi: true,
         },
         ProsemirrorService,
-    ], viewQueries: [{ propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"clr-control-label\">{{ label }}</label>\r\n<div #editor></div>\r\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:-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:400;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"], directives: [{ type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "editorEl", first: true, predicate: ["editor"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"clr-control-label\">{{ label }}</label>\r\n<div #editor></div>\r\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:-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:400;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"], directives: [{ type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-rich-text-editor', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -13354,7 +13933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                             multi: true,
                         },
                         ProsemirrorService,
-                    ], template: "<label class=\"clr-control-label\">{{ label }}</label>\r\n<div #editor></div>\r\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:-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:400;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"] }]
+                    ], template: "<label class=\"clr-control-label\">{{ label }}</label>\r\n<div #editor></div>\r\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:-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:400;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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ProsemirrorService }]; }, propDecorators: { label: [{
                 type: Input
             }], readonly: [{
@@ -13468,6 +14047,8 @@ const defaultFormInputs = [
     TextareaFormInputComponent,
     RichTextFormInputComponent,
     JsonEditorFormInputComponent,
+    ProductMultiSelectorFormInputComponent,
+    CombinationModeFormInputComponent,
 ];
 /**
  * @description
@@ -13966,196 +14547,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-/**
- * Interpolates the description of an ConfigurableOperation with the given values.
- */
-function interpolateDescription(operation, values) {
-    if (!operation) {
-        return '';
-    }
-    const templateString = operation.description;
-    const interpolated = templateString.replace(/{\s*([a-zA-Z0-9]+)\s*}/gi, (substring, argName) => {
-        const normalizedArgName = argName.toLowerCase();
-        const value = values[normalizedArgName];
-        if (value == null) {
-            return '_';
-        }
-        let formatted = value;
-        const argDef = operation.args.find(arg => arg.name === normalizedArgName);
-        if (argDef && argDef.type === 'int' && argDef.ui && argDef.ui.component === 'currency-form-input') {
-            formatted = value / 100;
-        }
-        if (argDef && argDef.type === 'datetime' && value instanceof Date) {
-            formatted = value.toLocaleDateString();
-        }
-        return formatted;
-    });
-    return interpolated;
-}
-
-/**
- * Formats a string into sentence case (first letter of first word uppercase).
- */
-class SentenceCasePipe {
-    transform(value) {
-        if (typeof value === 'string') {
-            let lower;
-            if (isCamelCase(value)) {
-                lower = value.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
-            }
-            else {
-                lower = value.toLowerCase();
-            }
-            return lower.charAt(0).toUpperCase() + lower.slice(1);
-        }
-        return value;
-    }
-}
-SentenceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SentenceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, name: "sentenceCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SentenceCasePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'sentenceCase' }]
-        }] });
-function isCamelCase(value) {
-    return /^[a-zA-Z]+[A-Z][a-zA-Z]+$/.test(value);
-}
-
-/**
- * A form input which renders a card with the internal form fields of the given ConfigurableOperation.
- */
-class ConfigurableInputComponent {
-    constructor() {
-        this.readonly = false;
-        this.removable = true;
-        this.remove = new EventEmitter();
-        this.argValues = {};
-        this.form = new FormGroup({});
-    }
-    interpolateDescription() {
-        if (this.operationDefinition) {
-            return interpolateDescription(this.operationDefinition, this.form.value);
-        }
-        else {
-            return '';
-        }
-    }
-    ngOnChanges(changes) {
-        if ('operation' in changes || 'operationDefinition' in changes) {
-            this.createForm();
-        }
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        if (isDisabled) {
-            this.form.disable();
-        }
-        else {
-            this.form.enable();
-        }
-    }
-    writeValue(value) {
-        if (value) {
-            this.form.patchValue(value);
-        }
-    }
-    trackByName(index, arg) {
-        return arg.name;
-    }
-    getArgDef(arg) {
-        var _a;
-        return (_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args.find(a => a.name === arg.name);
-    }
-    createForm() {
-        var _a, _b;
-        if (!this.operation) {
-            return;
-        }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-        this.form = new FormGroup({});
-        this.form.__id = Math.random().toString(36).substr(10);
-        if (this.operation.args) {
-            for (const arg of ((_a = this.operationDefinition) === null || _a === void 0 ? void 0 : _a.args) || []) {
-                let value = (_b = this.operation.args.find(a => a.name === arg.name)) === null || _b === void 0 ? void 0 : _b.value;
-                if (value === undefined) {
-                    value = getDefaultConfigArgValue(arg);
-                }
-                const validators = arg.list ? undefined : arg.required ? Validators.required : undefined;
-                this.form.addControl(arg.name, new FormControl(value, validators));
-            }
-        }
-        this.subscription = this.form.valueChanges.subscribe(value => {
-            if (this.onChange) {
-                this.onChange({
-                    code: this.operation && this.operation.code,
-                    args: value,
-                });
-            }
-            if (this.onTouch) {
-                this.onTouch();
-            }
-        });
-    }
-    validate(c) {
-        if (this.form.invalid) {
-            return {
-                required: true,
-            };
-        }
-        return null;
-    }
-}
-ConfigurableInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfigurableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfigurableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: { operation: "operation", operationDefinition: "operationDefinition", readonly: "readonly", removable: "removable" }, outputs: { remove: "remove" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: ConfigurableInputComponent,
-            multi: true,
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => ConfigurableInputComponent),
-            multi: true,
-        },
-    ], usesOnChanges: true, ngImport: i0, 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", 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}\n"], components: [{ type: HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "sentenceCase": SentenceCasePipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfigurableInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-configurable-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: ConfigurableInputComponent,
-                            multi: true,
-                        },
-                        {
-                            provide: NG_VALIDATORS,
-                            useExisting: forwardRef(() => ConfigurableInputComponent),
-                            multi: true,
-                        },
-                    ], 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", 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}\n"] }]
-        }], propDecorators: { operation: [{
-                type: Input
-            }], operationDefinition: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], removable: [{
-                type: Input
-            }], remove: [{
-                type: Output
-            }] } });
-
 /**
  * @description
  * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
@@ -14747,34 +15138,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
-/**
- * A simple, stateless toggle button for indicating selection.
- */
-class SelectToggleComponent {
-    constructor() {
-        this.size = 'large';
-        this.selected = false;
-        this.disabled = false;
-        this.selectedChange = new EventEmitter();
-    }
-}
-SelectToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, 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", 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"], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-select-toggle', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }] } });
-
 /**
  * A button link to be used as actions in rows of a table.
  */
@@ -15117,6 +15480,8 @@ const DECLARATIONS = [
     UiExtensionPointComponent,
     CustomDetailComponentHostComponent,
     AssetPreviewLinksComponent,
+    ProductMultiSelectorDialogComponent,
+    ProductSearchInputComponent,
 ];
 const DYNAMIC_FORM_INPUTS = [
     TextFormInputComponent,
@@ -15140,6 +15505,8 @@ const DYNAMIC_FORM_INPUTS = [
     TextareaFormInputComponent,
     RichTextFormInputComponent,
     JsonEditorFormInputComponent,
+    ProductMultiSelectorFormInputComponent,
+    CombinationModeFormInputComponent,
 ];
 class SharedModule {
 }
@@ -15233,7 +15600,9 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TabbedCustomFieldsComponent,
         UiExtensionPointComponent,
         CustomDetailComponentHostComponent,
-        AssetPreviewLinksComponent, TextFormInputComponent,
+        AssetPreviewLinksComponent,
+        ProductMultiSelectorDialogComponent,
+        ProductSearchInputComponent, TextFormInputComponent,
         PasswordFormInputComponent,
         NumberFormInputComponent,
         DateFormInputComponent,
@@ -15253,7 +15622,9 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RelationGenericInputComponent,
         TextareaFormInputComponent,
         RichTextFormInputComponent,
-        JsonEditorFormInputComponent], imports: [ClarityModule,
+        JsonEditorFormInputComponent,
+        ProductMultiSelectorFormInputComponent,
+        CombinationModeFormInputComponent], imports: [ClarityModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -15360,7 +15731,9 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TabbedCustomFieldsComponent,
         UiExtensionPointComponent,
         CustomDetailComponentHostComponent,
-        AssetPreviewLinksComponent, TextFormInputComponent,
+        AssetPreviewLinksComponent,
+        ProductMultiSelectorDialogComponent,
+        ProductSearchInputComponent, TextFormInputComponent,
         PasswordFormInputComponent,
         NumberFormInputComponent,
         DateFormInputComponent,
@@ -15380,7 +15753,9 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RelationGenericInputComponent,
         TextareaFormInputComponent,
         RichTextFormInputComponent,
-        JsonEditorFormInputComponent] });
+        JsonEditorFormInputComponent,
+        ProductMultiSelectorFormInputComponent,
+        CombinationModeFormInputComponent] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SharedModule, providers: [
         // This needs to be shared, since lazy-loaded
         // modules have their own entryComponents which
@@ -15962,7 +16337,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.0-next.3';
+const ADMIN_UI_VERSION = '2.0.0-next.7';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.
@@ -16182,5 +16557,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, 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, ProductSelectorFormInputComponent, ProductVariantSelectorComponent, 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 };
+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, ProductSelectorFormInputComponent, ProductVariantSelectorComponent, 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 };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map