@vendure/admin-ui 2.0.0-next.1 → 2.0.0-next.4

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, forwardRef, ContentChildren, SkipSelf, CUSTOM_ELEMENTS_SCHEMA } 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 * 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';
@@ -18,7 +18,7 @@ import { NavigationEnd, PRIMARY_OUTLET, RouterModule, ActivationStart } from '@a
 import * as i2$2 from '@angular/platform-browser';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i4 from '@ngx-translate/core';
+import * as i7 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
 import { TranslateMessageFormatCompiler, MESSAGE_FORMAT_CONFIG } from 'ngx-translate-messageformat-compiler';
 import * as i1$3 from '@clr/angular';
@@ -268,35 +268,36 @@ class AdministratorDataService {
     }
 }
 
-const CONFIGURABLE_OPERATION_FRAGMENT = gql `
-    fragment ConfigurableOperation on ConfigurableOperation {
-        args {
-            name
-            value
-        }
-        code
-    }
-`;
-const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql `
-    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
-        args {
-            name
-            type
-            required
-            defaultValue
-            list
-            ui
-            label
-        }
-        code
-        description
-    }
-`;
-const ERROR_RESULT_FRAGMENT = gql `
-    fragment ErrorResult on ErrorResult {
-        errorCode
-        message
-    }
+const CONFIGURABLE_OPERATION_FRAGMENT = gql `
+    fragment ConfigurableOperation on ConfigurableOperation {
+        args {
+            name
+            value
+        }
+        code
+    }
+`;
+const CONFIGURABLE_OPERATION_DEF_FRAGMENT = gql `
+    fragment ConfigurableOperationDef on ConfigurableOperationDefinition {
+        args {
+            name
+            type
+            required
+            defaultValue
+            list
+            ui
+            label
+            description
+        }
+        code
+        description
+    }
+`;
+const ERROR_RESULT_FRAGMENT = gql `
+    fragment ErrorResult on ErrorResult {
+        errorCode
+        message
+    }
 `;
 
 const CURRENT_USER_FRAGMENT = gql `
@@ -1411,11 +1412,28 @@ const GET_COLLECTION_CONTENTS = gql `
                     id
                     productId
                     name
+                    sku
                 }
                 totalItems
             }
         }
     }
+`;
+const PREVIEW_COLLECTION_CONTENTS = gql `
+    query PreviewCollectionContents(
+        $input: PreviewCollectionVariantsInput!
+        $options: ProductVariantListOptions
+    ) {
+        previewCollectionVariants(input: $input, options: $options) {
+            items {
+                id
+                productId
+                name
+                sku
+            }
+            totalItems
+        }
+    }
 `;
 
 class CollectionDataService {
@@ -1473,6 +1491,9 @@ class CollectionDataService {
             id,
         });
     }
+    previewCollectionVariants(input, options) {
+        return this.baseDataService.query(PREVIEW_COLLECTION_CONTENTS, { input, options });
+    }
     getCollectionContents(id, take = 10, skip = 0, filterTerm) {
         const filter = filterTerm
             ? { name: { contains: filterTerm } }
@@ -2153,6 +2174,7 @@ const ORDER_DETAIL_FRAGMENT = gql `
         state
         nextStates
         active
+        couponCodes
         customer {
             id
             firstName
@@ -2934,6 +2956,9 @@ var ErrorCode;
     ErrorCode["ALREADY_REFUNDED_ERROR"] = "ALREADY_REFUNDED_ERROR";
     ErrorCode["CANCEL_ACTIVE_ORDER_ERROR"] = "CANCEL_ACTIVE_ORDER_ERROR";
     ErrorCode["CHANNEL_DEFAULT_LANGUAGE_ERROR"] = "CHANNEL_DEFAULT_LANGUAGE_ERROR";
+    ErrorCode["COUPON_CODE_EXPIRED_ERROR"] = "COUPON_CODE_EXPIRED_ERROR";
+    ErrorCode["COUPON_CODE_INVALID_ERROR"] = "COUPON_CODE_INVALID_ERROR";
+    ErrorCode["COUPON_CODE_LIMIT_ERROR"] = "COUPON_CODE_LIMIT_ERROR";
     ErrorCode["CREATE_FULFILLMENT_ERROR"] = "CREATE_FULFILLMENT_ERROR";
     ErrorCode["EMAIL_ADDRESS_CONFLICT_ERROR"] = "EMAIL_ADDRESS_CONFLICT_ERROR";
     ErrorCode["EMPTY_ORDER_LINE_SELECTION_ERROR"] = "EMPTY_ORDER_LINE_SELECTION_ERROR";
@@ -3350,6 +3375,31 @@ var LogicalOperator;
  * Permissions for administrators and customers. Used to control access to
  * GraphQL resolvers via the {@link Allow} decorator.
  *
+ * ## Understanding Permission.Owner
+ *
+ * `Permission.Owner` is a special permission which is used in some of the Vendure resolvers to indicate that that resolver should only
+ * be accessible to the "owner" of that resource.
+ *
+ * For example, the Shop API `activeCustomer` query resolver should only return the Customer object for the "owner" of that Customer, i.e.
+ * based on the activeUserId of the current session. As a result, the resolver code looks like this:
+ *
+ * @example
+ * ```TypeScript
+ * \@Query()
+ * \@Allow(Permission.Owner)
+ * async activeCustomer(\@Ctx() ctx: RequestContext): Promise<Customer | undefined> {
+ *   const userId = ctx.activeUserId;
+ *   if (userId) {
+ *     return this.customerService.findOneByUserId(ctx, userId);
+ *   }
+ * }
+ * ```
+ *
+ * Here we can see that the "ownership" must be enforced by custom logic inside the resolver. Since "ownership" cannot be defined generally
+ * nor statically encoded at build-time, any resolvers using `Permission.Owner` **must** include logic to enforce that only the owner
+ * of the resource has access. If not, then it is the equivalent of using `Permission.Public`.
+ *
+ *
  * @docsCategory common
  */
 var Permission;
@@ -4624,11 +4674,12 @@ class PromotionDataService {
     constructor(baseDataService) {
         this.baseDataService = baseDataService;
     }
-    getPromotions(take = 10, skip = 0) {
+    getPromotions(take = 10, skip = 0, filter) {
         return this.baseDataService.query(GET_PROMOTION_LIST, {
             options: {
                 take,
                 skip,
+                filter,
             },
         });
     }
@@ -6599,7 +6650,7 @@ class UiLanguageSwitcherDialogComponent {
     }
 }
 UiLanguageSwitcherDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UiLanguageSwitcherDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], components: [{ type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$3.ClrDatalistContainer, selector: "clr-datalist-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrSelect, selector: "[clrSelect]" }, { 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: i1$3.ClrDatalistInput, selector: "[clrDatalistInput]" }, { type: i1$3.ClrDatalist, selector: "datalist", inputs: ["id"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "sort": SortPipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe, "localeRegionName": LocaleRegionNamePipe, "localeDate": LocaleDatePipe, "localeCurrencyName": LocaleCurrencyNamePipe, "localeCurrency": LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiLanguageSwitcherDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UiLanguageSwitcherDialogComponent, selector: "vdr-ui-language-switcher", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"], components: [{ type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$3.ClrDatalistContainer, selector: "clr-datalist-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrSelect, selector: "[clrSelect]" }, { 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: i1$3.ClrDatalistInput, selector: "[clrDatalistInput]" }, { type: i1$3.ClrDatalist, selector: "datalist", inputs: ["id"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "sort": SortPipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe, "localeRegionName": LocaleRegionNamePipe, "localeDate": LocaleDatePipe, "localeCurrencyName": LocaleCurrencyNamePipe, "localeCurrency": LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UiLanguageSwitcherDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-ui-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'common.select-display-language' | translate }}</ng-template>\r\n<div class=\"clr-row\">\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-select-container>\r\n            <label>{{ 'common.language' | translate }}</label>\r\n            <select\r\n                clrSelect\r\n                name=\"options\"\r\n                [(ngModel)]=\"currentLanguage\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n            >\r\n                <option *ngFor=\"let code of availableLanguages | sort\" [value]=\"code\">\r\n                    {{ code | uppercase }} ({{ code | localeLanguageName }})\r\n                </option>\r\n            </select>\r\n        </clr-select-container>\r\n    </div>\r\n    <div class=\"clr-col-md-6\">\r\n        <clr-datalist-container>\r\n            <label>{{ 'common.locale' | translate }}</label>\r\n            <input\r\n                clrDatalistInput\r\n                [(ngModel)]=\"currentLocale\"\r\n                (ngModelChange)=\"updatePreviewLocale()\"\r\n                [placeholder]=\"'common.browser-default' | translate\"\r\n                class=\"locale\"\r\n                name=\"Locale\"\r\n            />\r\n            <datalist>\r\n                <option *ngFor=\"let locale of availableLocales\" [value]=\"locale\">\r\n                    {{ locale }} ({{ locale | localeRegionName }})\r\n                </option>\r\n            </datalist>\r\n        </clr-datalist-container>\r\n    </div>\r\n</div>\r\n<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <span class=\"p2\">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>\r\n    </div>\r\n    <div class=\"card-block\">\r\n        <div class=\"clr-row\">\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.medium-date' | translate\">\r\n                    {{ now | localeDate: 'medium':previewLocale }}\r\n                </vdr-labeled-data>\r\n                <vdr-labeled-data [label]=\"'common.short-date' | translate\">\r\n                    {{ now | localeDate: 'short':previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <select clrSelect name=\"currency\" class=\"currency\" [(ngModel)]=\"selectedCurrencyCode\">\r\n                    <option *ngFor=\"let code of availableCurrencyCodes | sort\" [value]=\"code\">\r\n                        {{ code | uppercase }} ({{ code | localeCurrencyName: 'full':previewLocale }})\r\n                    </option>\r\n                </select>\r\n            </div>\r\n            <div class=\"clr-col-sm-4\">\r\n                <vdr-labeled-data [label]=\"'common.price' | translate\">\r\n                    {{ 12345 | localeCurrency: selectedCurrencyCode:previewLocale }}\r\n                </vdr-labeled-data>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"setLanguage()\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.set-language' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: ["select.currency{max-width:200px}input.locale{text-transform:uppercase}\n"] }]
@@ -6740,7 +6791,7 @@ class I18nService {
         return this.ngxTranslate.instant(key, params);
     }
 }
-I18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: I18nService, deps: [{ token: i4.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+I18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: I18nService, deps: [{ token: i7.TranslateService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
 I18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: I18nService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: I18nService, decorators: [{
             type: Injectable,
@@ -6748,7 +6799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                     providedIn: 'root',
                 }]
         }], ctorParameters: function () {
-        return [{ type: i4.TranslateService }, { type: Document, decorators: [{
+        return [{ type: i7.TranslateService }, { type: Document, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
@@ -6766,7 +6817,7 @@ class SimpleDialogComponent {
     }
 }
 SimpleDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SimpleDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SimpleDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SimpleDialogComponent, selector: "vdr-simple-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n{{ body | translate:translationVars }}\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"btn\"\r\n            [class.btn-primary]=\"button.type === 'primary'\"\r\n            [class.btn-danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate:translationVars }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SimpleDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SimpleDialogComponent, selector: "vdr-simple-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n{{ body | translate:translationVars }}\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"btn\"\r\n            [class.btn-primary]=\"button.type === 'primary'\"\r\n            [class.btn-danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate:translationVars }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SimpleDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-simple-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate:translationVars }}</ng-template>\r\n{{ body | translate:translationVars }}\r\n<ng-template vdrDialogButtons>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n        <button\r\n            class=\"btn\"\r\n            [class.btn-primary]=\"button.type === 'primary'\"\r\n            [class.btn-danger]=\"button.type === 'danger'\"\r\n            (click)=\"resolveWith(button.returnValue)\"\r\n        >\r\n            {{ button.label | translate:translationVars }}\r\n        </button>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""] }]
@@ -7201,7 +7252,7 @@ class ChannelSwitcherComponent {
     }
 }
 ChannelSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChannelSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"btn btn-link active-channel\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"active-channel\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"caret down\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.active-channel{color:var(--color-grey-200)}.active-channel clr-icon{color:#fff}\n"] }]
@@ -7223,7 +7274,7 @@ class ThemeSwitcherComponent {
     }
 }
 ThemeSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-ThemeSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\" (click)=\"toggleTheme(activeTheme)\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}button.theme-toggle{position:relative;padding-left:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0px;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0px;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ThemeSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\" (click)=\"toggleTheme(activeTheme)\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}button.theme-toggle{position:relative;padding-left:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0px;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0px;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\" (click)=\"toggleTheme(activeTheme)\">\r\n    <span>{{ 'common.theme' | translate }}</span>\r\n    <div class=\"theme-icon default\" [class.active]=\"activeTheme === 'default'\">\r\n        <clr-icon shape=\"sun\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n    <div class=\"theme-icon dark\" [class.active]=\"activeTheme === 'dark'\">\r\n        <clr-icon shape=\"moon\" class=\"is-solid\"></clr-icon>\r\n    </div>\r\n</button>\r\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}button.theme-toggle{position:relative;padding-left:20px;border:none;background:transparent;color:var(--clr-dropdown-item-color);cursor:pointer}.theme-icon{position:absolute;top:0px;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0px;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"] }]
@@ -7238,7 +7289,7 @@ class UserMenuComponent {
     }
 }
 UserMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link trigger\" vdrDropdownTrigger>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon shape=\"user\" size=\"24\"></clr-icon>\r\n        <clr-icon shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem>\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <div class=\"dropdown-item\">\r\n            <vdr-theme-switcher></vdr-theme-switcher>\r\n        </div>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.user-name{color:var(--color-grey-200);margin-right:12px}@media screen and (max-width: 768px){.user-name{display:none}}.trigger clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { 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"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe, "localeLanguageName": LocaleLanguageNamePipe } });
+UserMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link trigger\" vdrDropdownTrigger>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon shape=\"user\" size=\"24\"></clr-icon>\r\n        <clr-icon shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem>\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <div class=\"dropdown-item\">\r\n            <vdr-theme-switcher></vdr-theme-switcher>\r\n        </div>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.user-name{color:var(--color-grey-200);margin-right:12px}@media screen and (max-width: 768px){.user-name{display:none}}.trigger clr-icon{color:#fff}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { 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"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i7.TranslatePipe, "localeLanguageName": LocaleLanguageNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-user-menu', template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link trigger\" vdrDropdownTrigger>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon shape=\"user\" size=\"24\"></clr-icon>\r\n        <clr-icon shape=\"caret down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem>\r\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\r\n        </a>\r\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\r\n            <button\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"selectUiLanguage.emit()\"\r\n                [title]=\"'common.select-display-language' | translate\"\r\n            >\r\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\r\n            </button>\r\n        </ng-container>\r\n        <div class=\"dropdown-item\">\r\n            <vdr-theme-switcher></vdr-theme-switcher>\r\n        </div>\r\n        <div class=\"dropdown-divider\"></div>\r\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\r\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\r\n        </button>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;align-items:center;margin:0 .5rem;height:2.5rem}.user-name{color:var(--color-grey-200);margin-right:12px}@media screen and (max-width: 768px){.user-name{display:none}}.trigger clr-icon{color:#fff}\n"] }]
@@ -7350,7 +7401,7 @@ class BreadcrumbComponent {
     }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of (breadcrumbs$ | async); let isLast = last\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:0 1rem}.breadcrumbs{list-style-type:none}.breadcrumbs li{font-size:16px;display:inline-block;margin-right:10px}.breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-left:10px}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe } });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BreadcrumbComponent, selector: "vdr-breadcrumb", ngImport: i0, template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of (breadcrumbs$ | async); let isLast = last\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:0 1rem}.breadcrumbs{list-style-type:none}.breadcrumbs li{font-size:16px;display:inline-block;margin-right:10px}.breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-left:10px}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-breadcrumb', template: "<nav role=\"navigation\">\r\n    <ul class=\"breadcrumbs\">\r\n        <li *ngFor=\"let breadcrumb of (breadcrumbs$ | async); let isLast = last\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;padding:0 1rem}.breadcrumbs{list-style-type:none}.breadcrumbs li{font-size:16px;display:inline-block;margin-right:10px}.breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-left:10px}\n"] }]
@@ -8046,7 +8097,7 @@ class MainNavComponent {
     }
 }
 MainNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MainNavComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: NavBuilderService }, { token: HealthCheckService }, { token: JobQueueService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-MainNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MainNavComponent, selector: "vdr-main-nav", ngImport: i0, template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }, { type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }], directives: [{ type: i1$3.ClrNavLevel, selector: "[clr-nav-level]", inputs: ["clr-nav-level"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe } });
+MainNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MainNavComponent, selector: "vdr-main-nav", ngImport: i0, template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }, { type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }], directives: [{ type: i1$3.ClrNavLevel, selector: "[clr-nav-level]", inputs: ["clr-nav-level"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FormFieldControlDirective, selector: "input, textarea, select" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-main-nav', template: "<nav class=\"sidenav\" [clr-nav-level]=\"2\">\r\n    <section class=\"sidenav-content\">\r\n        <ng-container *ngFor=\"let section of navBuilderService.navMenuConfig$ | async\">\r\n            <section\r\n                class=\"nav-group\"\r\n                [attr.data-section-id]=\"section.id\"\r\n                [class.collapsible]=\"section.collapsible\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point [locationId]=\"section.id\" api=\"navMenu\" [topPx]=\"-6\" [leftPx]=\"8\">\r\n                    <ng-container *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\">\r\n                        <vdr-status-badge\r\n                            *ngIf=\"sectionBadge !== 'none'\"\r\n                            [type]=\"sectionBadge\"\r\n                        ></vdr-status-badge>\r\n                    </ng-container>\r\n                    <input [id]=\"section.id\" type=\"checkbox\" [checked]=\"section.collapsedByDefault\" />\r\n                    <label class=\"nav-group-header\" [for]=\"section.id\">{{ section.label | translate }}</label>\r\n                    <ul class=\"nav-list\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <li *ngIf=\"shouldDisplayLink(item)\">\r\n                                <a\r\n                                    class=\"nav-link\"\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    routerLinkActive=\"active\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon [attr.shape]=\"item.icon || 'block'\" size=\"20\"></clr-icon>\r\n                                    {{ item.label | translate }}\r\n                                </a>\r\n                            </li>\r\n                        </ng-container>\r\n                    </ul>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{order:-1;background-color:var(--clr-nav-background-color)}nav.sidenav{height:100%;width:10.8rem;border-right-color:var(--clr-sidenav-border-color)}.sidenav .nav-group .nav-list{margin:0}.sidenav .nav-group .nav-group-header{margin:0;line-height:1.2}.sidenav .nav-group .nav-link{display:inline-flex;line-height:1rem;padding-right:.6rem}.nav-list clr-icon{flex-shrink:0;margin-right:12px}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:10px;top:6px}.nav-link vdr-status-badge{left:25px;top:3px}\n"] }]
@@ -8279,7 +8330,7 @@ class NotificationComponent {
     }
 }
 NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-500)}:host>.notification-wrapper.error{background-color:var(--color-error-500)}:host>.notification-wrapper.warning{background-color:var(--color-warning-500)}:host>.notification-wrapper.info{background-color:var(--color-secondary-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe } });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NotificationComponent, selector: "vdr-notification", host: { listeners: { "click": "onClick()" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-500)}:host>.notification-wrapper.error{background-color:var(--color-error-500)}:host>.notification-wrapper.warning{background-color:var(--color-warning-500)}:host>.notification-wrapper.info{background-color:var(--color-secondary-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-notification', template: "<div\r\n    class=\"notification-wrapper\"\r\n    #wrapper\r\n    [style.top.px]=\"offsetTop\"\r\n    [ngClass]=\"{\r\n        visible: isVisible,\r\n        info: type === 'info',\r\n        success: type === 'success',\r\n        error: type === 'error',\r\n        warning: type === 'warning'\r\n    }\"\r\n>\r\n    <clr-icon [attr.shape]=\"getIcon()\" size=\"24\"></clr-icon>\r\n    {{ stringifyMessage(message) | translate: translationVars }}\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:.95}}:host{position:relative;z-index:1050}:host>.notification-wrapper{display:block;position:fixed;z-index:1001;top:0;right:10px;border-radius:3px;max-width:98vw;word-wrap:break-word;padding:10px;background-color:var(--color-grey-500);color:#fff;transition:opacity 1s,top .3s;opacity:0;white-space:pre-line}:host>.notification-wrapper.success{background-color:var(--color-success-500)}:host>.notification-wrapper.error{background-color:var(--color-error-500)}:host>.notification-wrapper.warning{background-color:var(--color-warning-500)}:host>.notification-wrapper.info{background-color:var(--color-secondary-500)}:host>.notification-wrapper.visible{opacity:.95;animation:fadeIn .3s .3s backwards}\n"] }]
@@ -8293,188 +8344,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 
 // tslint:disable
 const result = {
-    possibleTypes: {
-        AddFulfillmentToOrderResult: [
-            'CreateFulfillmentError',
-            'EmptyOrderLineSelectionError',
-            'Fulfillment',
-            'FulfillmentStateTransitionError',
-            'InsufficientStockOnHandError',
-            'InvalidFulfillmentHandlerError',
-            'ItemsAlreadyFulfilledError',
+    "possibleTypes": {
+        "AddFulfillmentToOrderResult": [
+            "CreateFulfillmentError",
+            "EmptyOrderLineSelectionError",
+            "Fulfillment",
+            "FulfillmentStateTransitionError",
+            "InsufficientStockOnHandError",
+            "InvalidFulfillmentHandlerError",
+            "ItemsAlreadyFulfilledError"
         ],
-        AddManualPaymentToOrderResult: ['ManualPaymentStateError', 'Order'],
-        AuthenticationResult: ['CurrentUser', 'InvalidCredentialsError'],
-        CancelOrderResult: [
-            'CancelActiveOrderError',
-            'EmptyOrderLineSelectionError',
-            'MultipleOrderError',
-            'Order',
-            'OrderStateTransitionError',
-            'QuantityTooGreatError',
+        "AddManualPaymentToOrderResult": [
+            "ManualPaymentStateError",
+            "Order"
         ],
-        CreateAssetResult: ['Asset', 'MimeTypeError'],
-        CreateChannelResult: ['Channel', 'LanguageNotAvailableError'],
-        CreateCustomerResult: ['Customer', 'EmailAddressConflictError'],
-        CreatePromotionResult: ['MissingConditionsError', 'Promotion'],
-        CustomField: [
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'StringCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "AuthenticationResult": [
+            "CurrentUser",
+            "InvalidCredentialsError"
         ],
-        CustomFieldConfig: [
-            'BooleanCustomFieldConfig',
-            'DateTimeCustomFieldConfig',
-            'FloatCustomFieldConfig',
-            'IntCustomFieldConfig',
-            'LocaleStringCustomFieldConfig',
-            'RelationCustomFieldConfig',
-            'StringCustomFieldConfig',
-            'TextCustomFieldConfig',
+        "CancelOrderResult": [
+            "CancelActiveOrderError",
+            "EmptyOrderLineSelectionError",
+            "MultipleOrderError",
+            "Order",
+            "OrderStateTransitionError",
+            "QuantityTooGreatError"
         ],
-        ErrorResult: [
-            'AlreadyRefundedError',
-            'CancelActiveOrderError',
-            'ChannelDefaultLanguageError',
-            'CreateFulfillmentError',
-            'EmailAddressConflictError',
-            'EmptyOrderLineSelectionError',
-            'FulfillmentStateTransitionError',
-            'InsufficientStockError',
-            'InsufficientStockOnHandError',
-            'InvalidCredentialsError',
-            'InvalidFulfillmentHandlerError',
-            'ItemsAlreadyFulfilledError',
-            'LanguageNotAvailableError',
-            'ManualPaymentStateError',
-            'MimeTypeError',
-            'MissingConditionsError',
-            'MultipleOrderError',
-            'NativeAuthStrategyError',
-            'NegativeQuantityError',
-            'NoChangesSpecifiedError',
-            'NothingToRefundError',
-            'OrderLimitError',
-            'OrderModificationStateError',
-            'OrderStateTransitionError',
-            'PaymentMethodMissingError',
-            'PaymentOrderMismatchError',
-            'PaymentStateTransitionError',
-            'ProductOptionInUseError',
-            'QuantityTooGreatError',
-            'RefundOrderStateError',
-            'RefundPaymentIdMissingError',
-            'RefundStateTransitionError',
-            'SettlePaymentError',
+        "CreateAssetResult": [
+            "Asset",
+            "MimeTypeError"
         ],
-        ModifyOrderResult: [
-            'InsufficientStockError',
-            'NegativeQuantityError',
-            'NoChangesSpecifiedError',
-            'Order',
-            'OrderLimitError',
-            'OrderModificationStateError',
-            'PaymentMethodMissingError',
-            'RefundPaymentIdMissingError',
+        "CreateChannelResult": [
+            "Channel",
+            "LanguageNotAvailableError"
         ],
-        NativeAuthenticationResult: ['CurrentUser', 'InvalidCredentialsError', 'NativeAuthStrategyError'],
-        Node: [
-            'Address',
-            'Administrator',
-            'Allocation',
-            'Asset',
-            'AuthenticationMethod',
-            'Cancellation',
-            'Channel',
-            'Collection',
-            'Country',
-            'Customer',
-            'CustomerGroup',
-            'Facet',
-            'FacetValue',
-            'Fulfillment',
-            'HistoryEntry',
-            'Job',
-            'Order',
-            'OrderItem',
-            'OrderLine',
-            'OrderModification',
-            'Payment',
-            'PaymentMethod',
-            'Product',
-            'ProductOption',
-            'ProductOptionGroup',
-            'ProductVariant',
-            'Promotion',
-            'Refund',
-            'Release',
-            'Return',
-            'Role',
-            'Sale',
-            'ShippingMethod',
-            'StockAdjustment',
-            'Surcharge',
-            'Tag',
-            'TaxCategory',
-            'TaxRate',
-            'User',
-            'Zone',
+        "CreateCustomerResult": [
+            "Customer",
+            "EmailAddressConflictError"
         ],
-        PaginatedList: [
-            'AdministratorList',
-            'AssetList',
-            'CollectionList',
-            'CountryList',
-            'CustomerGroupList',
-            'CustomerList',
-            'FacetList',
-            'HistoryEntryList',
-            'JobList',
-            'OrderList',
-            'PaymentMethodList',
-            'ProductList',
-            'ProductVariantList',
-            'PromotionList',
-            'RoleList',
-            'ShippingMethodList',
-            'TagList',
-            'TaxRateList',
+        "CreatePromotionResult": [
+            "MissingConditionsError",
+            "Promotion"
         ],
-        RefundOrderResult: [
-            'AlreadyRefundedError',
-            'MultipleOrderError',
-            'NothingToRefundError',
-            'OrderStateTransitionError',
-            'PaymentOrderMismatchError',
-            'QuantityTooGreatError',
-            'Refund',
-            'RefundOrderStateError',
-            'RefundStateTransitionError',
+        "CustomField": [
+            "BooleanCustomFieldConfig",
+            "DateTimeCustomFieldConfig",
+            "FloatCustomFieldConfig",
+            "IntCustomFieldConfig",
+            "LocaleStringCustomFieldConfig",
+            "RelationCustomFieldConfig",
+            "StringCustomFieldConfig",
+            "TextCustomFieldConfig"
         ],
-        RemoveOptionGroupFromProductResult: ['Product', 'ProductOptionInUseError'],
-        SearchResultPrice: ['PriceRange', 'SinglePrice'],
-        SettlePaymentResult: [
-            'OrderStateTransitionError',
-            'Payment',
-            'PaymentStateTransitionError',
-            'SettlePaymentError',
+        "CustomFieldConfig": [
+            "BooleanCustomFieldConfig",
+            "DateTimeCustomFieldConfig",
+            "FloatCustomFieldConfig",
+            "IntCustomFieldConfig",
+            "LocaleStringCustomFieldConfig",
+            "RelationCustomFieldConfig",
+            "StringCustomFieldConfig",
+            "TextCustomFieldConfig"
         ],
-        SettleRefundResult: ['Refund', 'RefundStateTransitionError'],
-        StockMovement: ['Allocation', 'Cancellation', 'Release', 'Return', 'Sale', 'StockAdjustment'],
-        StockMovementItem: ['Allocation', 'Cancellation', 'Release', 'Return', 'Sale', 'StockAdjustment'],
-        TransitionFulfillmentToStateResult: ['Fulfillment', 'FulfillmentStateTransitionError'],
-        TransitionOrderToStateResult: ['Order', 'OrderStateTransitionError'],
-        TransitionPaymentToStateResult: ['Payment', 'PaymentStateTransitionError'],
-        UpdateChannelResult: ['Channel', 'LanguageNotAvailableError'],
-        UpdateCustomerResult: ['Customer', 'EmailAddressConflictError'],
-        UpdateGlobalSettingsResult: ['ChannelDefaultLanguageError', 'GlobalSettings'],
-        UpdatePromotionResult: ['MissingConditionsError', 'Promotion'],
-    },
+        "ErrorResult": [
+            "AlreadyRefundedError",
+            "CancelActiveOrderError",
+            "ChannelDefaultLanguageError",
+            "CouponCodeExpiredError",
+            "CouponCodeInvalidError",
+            "CouponCodeLimitError",
+            "CreateFulfillmentError",
+            "EmailAddressConflictError",
+            "EmptyOrderLineSelectionError",
+            "FulfillmentStateTransitionError",
+            "InsufficientStockError",
+            "InsufficientStockOnHandError",
+            "InvalidCredentialsError",
+            "InvalidFulfillmentHandlerError",
+            "ItemsAlreadyFulfilledError",
+            "LanguageNotAvailableError",
+            "ManualPaymentStateError",
+            "MimeTypeError",
+            "MissingConditionsError",
+            "MultipleOrderError",
+            "NativeAuthStrategyError",
+            "NegativeQuantityError",
+            "NoChangesSpecifiedError",
+            "NothingToRefundError",
+            "OrderLimitError",
+            "OrderModificationStateError",
+            "OrderStateTransitionError",
+            "PaymentMethodMissingError",
+            "PaymentOrderMismatchError",
+            "PaymentStateTransitionError",
+            "ProductOptionInUseError",
+            "QuantityTooGreatError",
+            "RefundOrderStateError",
+            "RefundPaymentIdMissingError",
+            "RefundStateTransitionError",
+            "SettlePaymentError"
+        ],
+        "ModifyOrderResult": [
+            "CouponCodeExpiredError",
+            "CouponCodeInvalidError",
+            "CouponCodeLimitError",
+            "InsufficientStockError",
+            "NegativeQuantityError",
+            "NoChangesSpecifiedError",
+            "Order",
+            "OrderLimitError",
+            "OrderModificationStateError",
+            "PaymentMethodMissingError",
+            "RefundPaymentIdMissingError"
+        ],
+        "NativeAuthenticationResult": [
+            "CurrentUser",
+            "InvalidCredentialsError",
+            "NativeAuthStrategyError"
+        ],
+        "Node": [
+            "Address",
+            "Administrator",
+            "Allocation",
+            "Asset",
+            "AuthenticationMethod",
+            "Cancellation",
+            "Channel",
+            "Collection",
+            "Country",
+            "Customer",
+            "CustomerGroup",
+            "Facet",
+            "FacetValue",
+            "Fulfillment",
+            "HistoryEntry",
+            "Job",
+            "Order",
+            "OrderItem",
+            "OrderLine",
+            "OrderModification",
+            "Payment",
+            "PaymentMethod",
+            "Product",
+            "ProductOption",
+            "ProductOptionGroup",
+            "ProductVariant",
+            "Promotion",
+            "Refund",
+            "Release",
+            "Return",
+            "Role",
+            "Sale",
+            "ShippingMethod",
+            "StockAdjustment",
+            "Surcharge",
+            "Tag",
+            "TaxCategory",
+            "TaxRate",
+            "User",
+            "Zone"
+        ],
+        "PaginatedList": [
+            "AdministratorList",
+            "AssetList",
+            "CollectionList",
+            "CountryList",
+            "CustomerGroupList",
+            "CustomerList",
+            "FacetList",
+            "HistoryEntryList",
+            "JobList",
+            "OrderList",
+            "PaymentMethodList",
+            "ProductList",
+            "ProductVariantList",
+            "PromotionList",
+            "RoleList",
+            "ShippingMethodList",
+            "TagList",
+            "TaxRateList"
+        ],
+        "RefundOrderResult": [
+            "AlreadyRefundedError",
+            "MultipleOrderError",
+            "NothingToRefundError",
+            "OrderStateTransitionError",
+            "PaymentOrderMismatchError",
+            "QuantityTooGreatError",
+            "Refund",
+            "RefundOrderStateError",
+            "RefundStateTransitionError"
+        ],
+        "RemoveOptionGroupFromProductResult": [
+            "Product",
+            "ProductOptionInUseError"
+        ],
+        "SearchResultPrice": [
+            "PriceRange",
+            "SinglePrice"
+        ],
+        "SettlePaymentResult": [
+            "OrderStateTransitionError",
+            "Payment",
+            "PaymentStateTransitionError",
+            "SettlePaymentError"
+        ],
+        "SettleRefundResult": [
+            "Refund",
+            "RefundStateTransitionError"
+        ],
+        "StockMovement": [
+            "Allocation",
+            "Cancellation",
+            "Release",
+            "Return",
+            "Sale",
+            "StockAdjustment"
+        ],
+        "StockMovementItem": [
+            "Allocation",
+            "Cancellation",
+            "Release",
+            "Return",
+            "Sale",
+            "StockAdjustment"
+        ],
+        "TransitionFulfillmentToStateResult": [
+            "Fulfillment",
+            "FulfillmentStateTransitionError"
+        ],
+        "TransitionOrderToStateResult": [
+            "Order",
+            "OrderStateTransitionError"
+        ],
+        "TransitionPaymentToStateResult": [
+            "Payment",
+            "PaymentStateTransitionError"
+        ],
+        "UpdateChannelResult": [
+            "Channel",
+            "LanguageNotAvailableError"
+        ],
+        "UpdateCustomerResult": [
+            "Customer",
+            "EmailAddressConflictError"
+        ],
+        "UpdateGlobalSettingsResult": [
+            "ChannelDefaultLanguageError",
+            "GlobalSettings"
+        ],
+        "UpdatePromotionResult": [
+            "MissingConditionsError",
+            "Promotion"
+        ]
+    }
 };
 
 // Allows the introspectionResult to be imported as a named symbol
@@ -10050,7 +10173,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: DatetimePickerComponent,
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    <input\r\n        readonly\r\n        [ngModel]=\"selected$ | async | localeDate: 'medium'\"\r\n        class=\"selected-datetime\"\r\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\r\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\r\n        #datetimeInput\r\n    />\r\n    <button class=\"clear-value-button btn\" [class.visible]=\"!disabled && !readonly && (selected$ | async)\" (click)=\"clearValue()\">\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"btn btn-outline calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\r\n        <clr-icon shape=\"calendar\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"datetime-picker\" *ngIf=\"current$ | async as currentView\" (keydown.escape)=\"closeDatepicker()\">\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.month\"\r\n                            (change)=\"setMonth($event)\"\r\n                        >\r\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\r\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\r\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\r\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\r\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\r\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\r\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\r\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\r\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\r\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\r\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\r\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\r\n                        </select>\r\n                    </div>\r\n                    <div class=\"year-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.year\"\r\n                            (change)=\"setYear($event)\"\r\n                        >\r\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-buttons\">\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"prevMonth()\"\r\n                        [title]=\"'common.view-previous-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\r\n                    </button>\r\n                    <button class=\"btn btn-link btn-sm\" (click)=\"selectToday()\" [title]=\"'common.select-today' | translate\">\r\n                        <clr-icon shape=\"event\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"nextMonth()\"\r\n                        [title]=\"'common.view-next-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <table class=\"calendar-table\" #calendarTable tabindex=\"0\" (keydown)=\"handleCalendarKeydown($event)\">\r\n                <thead>\r\n                <tr>\r\n                    <td *ngFor=\"let weekdayName of weekdays\">\r\n                        {{ weekdayName | translate }}\r\n                    </td>\r\n                </tr>\r\n                </thead>\r\n                <tbody>\r\n                <tr *ngFor=\"let week of calendarView$ | async\">\r\n                    <td\r\n                        *ngFor=\"let day of week\"\r\n                        class=\"day-cell\"\r\n                        [class.selected]=\"day.selected\"\r\n                        [class.today]=\"day.isToday\"\r\n                        [class.viewing]=\"day.isViewing\"\r\n                        [class.current-month]=\"day.inCurrentMonth\"\r\n                        [class.disabled]=\"day.disabled\"\r\n                        (keydown.enter)=\"selectDay(day)\"\r\n                        (click)=\"selectDay(day)\"\r\n                    >\r\n                        {{ day.dayOfMonth }}\r\n                    </td>\r\n                </tr>\r\n                </tbody>\r\n            </table>\r\n            <div class=\"time-picker\">\r\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\r\n                <select clrSelect name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\r\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n                </select>\r\n                <span>:</span>\r\n                <select\r\n                    clrSelect\r\n                    name=\"hour\"\r\n                    [ngModel]=\"selectedMinutes$ | async\"\r\n                    (change)=\"setMinute($event)\"\r\n                >\r\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{\r\n                        minute | number: '2.0-0'\r\n                        }}</option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important}.clear-value-button{margin:0;border-radius:0;border-left:none;border-color:var(--color-component-border-200);background-color:#fff;color:var(--color-grey-500);display:none}.clear-value-button.visible{display:block}.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-grey-500);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:#fff;color:var(--color-grey-800)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-grey-300)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "localeDate": LocaleDatePipe, "async": i3.AsyncPipe, "translate": i4.TranslatePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: ["dropdownComponent"], descendants: true, static: true }, { propertyName: "datetimeInput", first: true, predicate: ["datetimeInput"], descendants: true, static: true }, { propertyName: "calendarTable", first: true, predicate: ["calendarTable"], descendants: true }], ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    <input\r\n        readonly\r\n        [ngModel]=\"selected$ | async | localeDate: 'medium'\"\r\n        class=\"selected-datetime\"\r\n        (keydown.enter)=\"dropdownComponent.toggleOpen()\"\r\n        (keydown.space)=\"dropdownComponent.toggleOpen()\"\r\n        #datetimeInput\r\n    />\r\n    <button class=\"clear-value-button btn\" [class.visible]=\"!disabled && !readonly && (selected$ | async)\" (click)=\"clearValue()\">\r\n        <clr-icon shape=\"times\"></clr-icon>\r\n    </button>\r\n</div>\r\n<vdr-dropdown #dropdownComponent>\r\n    <button class=\"btn btn-outline calendar-button\" vdrDropdownTrigger [disabled]=\"readonly || disabled\">\r\n        <clr-icon shape=\"calendar\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"datetime-picker\" *ngIf=\"current$ | async as currentView\" (keydown.escape)=\"closeDatepicker()\">\r\n            <div class=\"controls\">\r\n                <div class=\"selects\">\r\n                    <div class=\"month-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.month\"\r\n                            (change)=\"setMonth($event)\"\r\n                        >\r\n                            <option [value]=\"1\">{{ 'datetime.month-jan' | translate }}</option>\r\n                            <option [value]=\"2\">{{ 'datetime.month-feb' | translate }}</option>\r\n                            <option [value]=\"3\">{{ 'datetime.month-mar' | translate }}</option>\r\n                            <option [value]=\"4\">{{ 'datetime.month-apr' | translate }}</option>\r\n                            <option [value]=\"5\">{{ 'datetime.month-may' | translate }}</option>\r\n                            <option [value]=\"6\">{{ 'datetime.month-jun' | translate }}</option>\r\n                            <option [value]=\"7\">{{ 'datetime.month-jul' | translate }}</option>\r\n                            <option [value]=\"8\">{{ 'datetime.month-aug' | translate }}</option>\r\n                            <option [value]=\"9\">{{ 'datetime.month-sep' | translate }}</option>\r\n                            <option [value]=\"10\">{{ 'datetime.month-oct' | translate }}</option>\r\n                            <option [value]=\"11\">{{ 'datetime.month-nov' | translate }}</option>\r\n                            <option [value]=\"12\">{{ 'datetime.month-dec' | translate }}</option>\r\n                        </select>\r\n                    </div>\r\n                    <div class=\"year-select\">\r\n                        <select\r\n                            clrSelect\r\n                            name=\"month\"\r\n                            [ngModel]=\"currentView.year\"\r\n                            (change)=\"setYear($event)\"\r\n                        >\r\n                            <option *ngFor=\"let year of years\" [value]=\"year\">{{ year }}</option>\r\n                        </select>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-buttons\">\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"prevMonth()\"\r\n                        [title]=\"'common.view-previous-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"left\"></clr-icon>\r\n                    </button>\r\n                    <button class=\"btn btn-link btn-sm\" (click)=\"selectToday()\" [title]=\"'common.select-today' | translate\">\r\n                        <clr-icon shape=\"event\"></clr-icon>\r\n                    </button>\r\n                    <button\r\n                        class=\"btn btn-link btn-sm\"\r\n                        (click)=\"nextMonth()\"\r\n                        [title]=\"'common.view-next-month' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"caret\" dir=\"right\"></clr-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <table class=\"calendar-table\" #calendarTable tabindex=\"0\" (keydown)=\"handleCalendarKeydown($event)\">\r\n                <thead>\r\n                <tr>\r\n                    <td *ngFor=\"let weekdayName of weekdays\">\r\n                        {{ weekdayName | translate }}\r\n                    </td>\r\n                </tr>\r\n                </thead>\r\n                <tbody>\r\n                <tr *ngFor=\"let week of calendarView$ | async\">\r\n                    <td\r\n                        *ngFor=\"let day of week\"\r\n                        class=\"day-cell\"\r\n                        [class.selected]=\"day.selected\"\r\n                        [class.today]=\"day.isToday\"\r\n                        [class.viewing]=\"day.isViewing\"\r\n                        [class.current-month]=\"day.inCurrentMonth\"\r\n                        [class.disabled]=\"day.disabled\"\r\n                        (keydown.enter)=\"selectDay(day)\"\r\n                        (click)=\"selectDay(day)\"\r\n                    >\r\n                        {{ day.dayOfMonth }}\r\n                    </td>\r\n                </tr>\r\n                </tbody>\r\n            </table>\r\n            <div class=\"time-picker\">\r\n                <span class=\"flex-spacer\"> {{ 'datetime.time' | translate }}: </span>\r\n                <select clrSelect name=\"hour\" [ngModel]=\"selectedHours$ | async\" (change)=\"setHour($event)\">\r\n                    <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour | number: '2.0-0' }}</option>\r\n                </select>\r\n                <span>:</span>\r\n                <select\r\n                    clrSelect\r\n                    name=\"hour\"\r\n                    [ngModel]=\"selectedMinutes$ | async\"\r\n                    (change)=\"setMinute($event)\"\r\n                >\r\n                    <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{\r\n                        minute | number: '2.0-0'\r\n                        }}</option>\r\n                </select>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:flex;width:100%}.input-wrapper{flex:1;display:flex}input.selected-datetime{flex:1;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important}.clear-value-button{margin:0;border-radius:0;border-left:none;border-color:var(--color-component-border-200);background-color:#fff;color:var(--color-grey-500);display:none}.clear-value-button.visible{display:block}.calendar-button{margin:0;border-top-left-radius:0;border-bottom-left-radius:0}.datetime-picker{margin:0 12px}table.calendar-table{padding:6px}table.calendar-table:focus{outline:1px solid var(--color-primary-500);box-shadow:0 0 1px 2px var(--color-primary-100)}table.calendar-table td{width:24px;text-align:center;border:1px solid transparent;-webkit-user-select:none;user-select:none}table.calendar-table .day-cell{background-color:var(--color-component-bg-200);color:var(--color-grey-500);cursor:pointer;transition:background-color .1s}table.calendar-table .day-cell.current-month{background-color:#fff;color:var(--color-grey-800)}table.calendar-table .day-cell.selected{background-color:var(--color-primary-500);color:#fff}table.calendar-table .day-cell.viewing:not(.selected){background-color:var(--color-primary-200)}table.calendar-table .day-cell.today{border:1px solid var(--color-component-border-300)}table.calendar-table .day-cell:hover:not(.selected):not(.disabled){background-color:var(--color-primary-100)}table.calendar-table .day-cell.disabled{cursor:default;color:var(--color-grey-300)}.selects{display:flex;justify-content:space-between;margin-bottom:12px}.control-buttons{display:flex}.time-picker{display:flex;align-items:baseline;margin-top:12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }], pipes: { "localeDate": LocaleDatePipe, "async": i3.AsyncPipe, "translate": i7.TranslatePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -10419,7 +10542,7 @@ class ProductVariantSelectorComponent {
     }
 }
 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": i4.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -10474,7 +10597,7 @@ class ProductSelectorFormInputComponent {
 }
 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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -10551,7 +10674,7 @@ class AssetFileInputComponent {
     }
 }
 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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -10701,7 +10824,7 @@ class AssetSearchInputComponent {
     }
 }
 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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -10760,7 +10883,7 @@ class ManageTagsDialogComponent {
     }
 }
 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": i4.TranslatePipe, "async": i3.AsyncPipe, "stringToColor": StringToColorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -10888,10 +11011,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 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: [""], 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 });
+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: [""] }]
+            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: [{
@@ -10942,7 +11065,7 @@ class FormFieldComponent {
     }
 }
 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": i4.TranslatePipe } });
+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"] }]
@@ -11035,8 +11158,25 @@ function configurableOperationValueIsValid(def, value) {
  * Returns a default value based on the type of the config arg.
  */
 function getDefaultConfigArgValue(arg) {
-    var _a;
-    return arg.list ? [] : (_a = arg.defaultValue) !== null && _a !== void 0 ? _a : null;
+    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);
+    }
 }
 
 /**
@@ -11273,7 +11413,7 @@ DynamicFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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: [
@@ -11427,7 +11567,7 @@ class TabbedCustomFieldsComponent {
     }
 }
 TabbedCustomFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TabbedCustomFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabbedCustomFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                group.tabName === defaultTabName\r\n                    ? ('common.general' | translate)\r\n                    : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt4\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n        <vdr-custom-field-control\r\n            *ngIf=\"customFieldIsSet(customField.name)\"\r\n            [entityName]=\"entityName\"\r\n            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            [customField]=\"customField\"\r\n            [readonly]=\"readonly\"\r\n            [compact]=\"compact\"\r\n            [showLabel]=\"showLabel\"\r\n        ></vdr-custom-field-control>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { type: i1$3.ClrTab, selector: "clr-tab" }, { type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TabbedCustomFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                group.tabName === defaultTabName\r\n                    ? ('common.general' | translate)\r\n                    : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt4\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n        <vdr-custom-field-control\r\n            *ngIf=\"customFieldIsSet(customField.name)\"\r\n            [entityName]=\"entityName\"\r\n            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            [customField]=\"customField\"\r\n            [readonly]=\"readonly\"\r\n            [compact]=\"compact\"\r\n            [showLabel]=\"showLabel\"\r\n        ></vdr-custom-field-control>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$3.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { type: i1$3.ClrTab, selector: "clr-tab" }, { type: i1$3.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { type: i1$3.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { type: i1$3.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TabbedCustomFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                group.tabName === defaultTabName\r\n                    ? ('common.general' | translate)\r\n                    : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt4\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n        <vdr-custom-field-control\r\n            *ngIf=\"customFieldIsSet(customField.name)\"\r\n            [entityName]=\"entityName\"\r\n            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n            [customField]=\"customField\"\r\n            [readonly]=\"readonly\"\r\n            [compact]=\"compact\"\r\n            [showLabel]=\"showLabel\"\r\n        ></vdr-custom-field-control>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [""] }]
@@ -11451,7 +11591,7 @@ class AssetPreviewLinksComponent {
     }
 }
 AssetPreviewLinksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AssetPreviewLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: { asset: "asset" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape=\"caret\" dir=\"down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview: size\"\r\n            [title]=\"asset | assetPreview: size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n", styles: [".asset-preview-link{font-size:12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetPreviewLinksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: { asset: "asset" }, ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape=\"caret\" dir=\"down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview: size\"\r\n            [title]=\"asset | assetPreview: size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n", styles: [".asset-preview-link{font-size:12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i7.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewLinksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-asset-preview-links', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"link\"></clr-icon> {{ 'catalog.asset-preview-links' | translate }}<clr-icon shape=\"caret\" dir=\"down\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <a\r\n            *ngFor=\"let size of sizes\"\r\n            [href]=\"asset | assetPreview: size\"\r\n            [title]=\"asset | assetPreview: size\"\r\n            target=\"_blank\"\r\n            class=\"asset-preview-link\"\r\n            vdrDropdownItem\r\n        >\r\n            <vdr-chip><clr-icon shape=\"link\"></clr-icon> {{ 'asset.preview' | translate }}: {{ size }}</vdr-chip>\r\n        </a>\r\n    </vdr-dropdown-menu></vdr-dropdown\r\n>\r\n", styles: [".asset-preview-link{font-size:12px}\n"] }]
@@ -11616,7 +11756,7 @@ class AssetPreviewComponent {
         }
     }
     getSourceFileName() {
-        const parts = this.asset.source.split('/');
+        const parts = this.asset.source.split(/[\\\/]/g);
         return parts[parts.length - 1];
     }
     onImageLoad() {
@@ -11708,10 +11848,10 @@ class AssetPreviewComponent {
     }
 }
 AssetPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i2.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
-AssetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"], components: [{ type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { 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"] }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "assetPreview": AssetPreviewPipe, "translate": i4.TranslatePipe, "hasPermission": HasPermissionPipe, "filesize": FileSizePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"], components: [{ type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$3.ClrSelectContainer, selector: "clr-select-container" }, { type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { 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"] }, { 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, "hasPermission": HasPermissionPipe, "filesize": FileSizePipe, "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"] }]
+            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n    <div class=\"image-wrapper\">\r\n        <vdr-focal-point-control\r\n            [width]=\"width\"\r\n            [height]=\"height\"\r\n            [fpx]=\"fpx\"\r\n            [fpy]=\"fpy\"\r\n            [editable]=\"settingFocalPoint\"\r\n            (focalPointChange)=\"onFocalPointChange($event)\"\r\n        >\r\n            <img\r\n                class=\"asset-image\"\r\n                [src]=\"asset | assetPreview: size\"\r\n                [ngClass]=\"size\"\r\n                #imageElement\r\n                (load)=\"onImageLoad()\"\r\n            />\r\n        </vdr-focal-point-control>\r\n        <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n            <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                <clr-icon shape=\"times\"></clr-icon>\r\n            </button>\r\n            <button class=\"btn btn-primary btn-sm\" (click)=\"setFocalPointEnd()\" [disabled]=\"!lastFocalPoint\">\r\n                <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                {{ 'asset.set-focal-point' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"controls\" [class.fade]=\"settingFocalPoint\">\r\n    <form [formGroup]=\"form\">\r\n        <clr-input-container class=\"name-input\" *ngIf=\"editable\">\r\n            <label>{{ 'common.name' | translate }}</label>\r\n            <input\r\n                clrInput\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n            />\r\n        </clr-input-container>\r\n\r\n        <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n            <span class=\"elide\">\r\n                {{ asset.name }}\r\n            </span>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n            <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                getSourceFileName()\r\n            }}</a>\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n            {{ asset.fileSize | filesize }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n            {{ asset.width }} x {{ asset.height }}\r\n        </vdr-labeled-data>\r\n\r\n        <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n            <span *ngIf=\"fpx\"\r\n                ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number: '1.2-2' }}, y:\r\n                {{ fpy | number: '1.2-2' }}</span\r\n            >\r\n            <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n            <br />\r\n            <button\r\n                class=\"btn btn-secondary-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                (click)=\"setFocalPointStart()\"\r\n            >\r\n                <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n            </button>\r\n            <button\r\n                class=\"btn btn-warning-outline btn-sm\"\r\n                [disabled]=\"settingFocalPoint\"\r\n                *ngIf=\"!!fpx\"\r\n                (click)=\"removeFocalPoint()\"\r\n            >\r\n                {{ 'asset.unset-focal-point' | translate }}\r\n            </button>\r\n        </vdr-labeled-data>\r\n        <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n            <ng-container *ngIf=\"editable\">\r\n                <vdr-tag-selector formControlName=\"tags\"></vdr-tag-selector>\r\n                <button class=\"btn btn-link btn-sm\" (click)=\"manageTags()\">\r\n                    <clr-icon shape=\"tags\"></clr-icon>\r\n                    {{ 'common.manage-tags' | translate }}\r\n                </button>\r\n            </ng-container>\r\n            <div *ngIf=\"!editable\">\r\n                <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                    <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                    {{ tag.value }}</vdr-chip\r\n                >\r\n            </div>\r\n        </vdr-labeled-data>\r\n    </form>\r\n    <section *ngIf=\"customFields.length\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Asset\"\r\n            [compact]=\"true\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsForm\"\r\n            [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n    <div class=\"flex-spacer\"></div>\r\n    <div class=\"preview-select\">\r\n        <clr-select-container>\r\n            <label>{{ 'asset.preview' | translate }}</label>\r\n            <select clrSelect name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                <option value=\"tiny\">tiny</option>\r\n                <option value=\"thumb\">thumb</option>\r\n                <option value=\"small\">small</option>\r\n                <option value=\"medium\">medium</option>\r\n                <option value=\"large\">large</option>\r\n                <option value=\"\">full size</option>\r\n            </select>\r\n        </clr-select-container>\r\n        <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n    </div>\r\n    <vdr-asset-preview-links class=\"mb4\" [asset]=\"asset\"></vdr-asset-preview-links>\r\n    <div *ngIf=\"!editable\" class=\"edit-button-wrapper\">\r\n        <a\r\n            class=\"btn btn-link btn-sm\"\r\n            [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n            (click)=\"editClick.emit()\"\r\n        >\r\n            <clr-icon shape=\"edit\"></clr-icon>\r\n            {{ 'common.edit' | translate }}\r\n        </a>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%}.preview-image{width:100%;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.edit-button-wrapper{padding-top:6px;border-top:1px solid var(--color-component-border-100);text-align:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
                 type: Input
             }], editable: [{
@@ -11764,7 +11904,7 @@ class EntityInfoComponent {
     }
 }
 EntityInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EntityInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EntityInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: { small: "small", entity: "entity" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"entity.id\">\r\n    <button class=\"btn btn-icon btn-link info-button\" [class.btn-sm]=\"small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"info-standard\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entity-info\">\r\n            <vdr-labeled-data [label]=\"'common.ID' | translate\">\r\n                {{ entity.id }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.createdAt\" [label]=\"'common.created-at' | translate\">\r\n                {{ entity.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.updatedAt\" [label]=\"'common.updated-at' | translate\">\r\n                {{ entity.updatedAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".info-button{color:var(--color-icon-button)}.entity-info{margin:0 12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe, "localeDate": LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EntityInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: { small: "small", entity: "entity" }, ngImport: i0, template: "<vdr-dropdown *ngIf=\"entity.id\">\r\n    <button class=\"btn btn-icon btn-link info-button\" [class.btn-sm]=\"small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"info-standard\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entity-info\">\r\n            <vdr-labeled-data [label]=\"'common.ID' | translate\">\r\n                {{ entity.id }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.createdAt\" [label]=\"'common.created-at' | translate\">\r\n                {{ entity.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.updatedAt\" [label]=\"'common.updated-at' | translate\">\r\n                {{ entity.updatedAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".info-button{color:var(--color-icon-button)}.entity-info{margin:0 12px}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe, "localeDate": LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EntityInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-entity-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown *ngIf=\"entity.id\">\r\n    <button class=\"btn btn-icon btn-link info-button\" [class.btn-sm]=\"small\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"info-standard\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entity-info\">\r\n            <vdr-labeled-data [label]=\"'common.ID' | translate\">\r\n                {{ entity.id }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.createdAt\" [label]=\"'common.created-at' | translate\">\r\n                {{ entity.createdAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data *ngIf=\"entity.updatedAt\" [label]=\"'common.updated-at' | translate\">\r\n                {{ entity.updatedAt | localeDate: 'medium' }}\r\n            </vdr-labeled-data>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".info-button{color:var(--color-icon-button)}.entity-info{margin:0 12px}\n"] }]
@@ -11855,7 +11995,7 @@ class AssetGalleryComponent {
     }
 }
 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": i4.TranslatePipe, "filesize": FileSizePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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"] }]
@@ -11881,7 +12021,7 @@ class ItemsPerPageControlsComponent {
     }
 }
 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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: [""] }]
@@ -12028,7 +12168,7 @@ class AssetPickerDialogComponent {
     }
 }
 AssetPickerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPickerDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-AssetPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], components: [{ type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { 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: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe, "async": i3.AsyncPipe, "paginate": i1$5.PaginatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], components: [{ type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { 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: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe, "paginate": i1$5.PaginatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
@@ -12068,7 +12208,7 @@ class RelationCardComponent {
     }
 }
 RelationCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RelationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCardComponent, selector: "vdr-relation-card", inputs: { entity: "entity", placeholderIcon: "placeholderIcon", selectLabel: "selectLabel", readonly: "readonly", removable: "removable" }, outputs: { select: "select", remove: "remove" }, queries: [{ propertyName: "previewTemplate", first: true, predicate: RelationCardPreviewDirective, descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: RelationCardDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"flex\">\r\n    <ng-container *ngIf=\"entity; else placeholder\">\r\n        <div class=\"preview\">\r\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\r\n            </button>\r\n            <button *ngIf=\"!readonly && removable\" class=\"btn btn-sm btn-link\" (click)=\"remove.emit()\">\r\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #placeholder>\r\n        <div class=\"preview\">\r\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\r\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCardComponent, selector: "vdr-relation-card", inputs: { entity: "entity", placeholderIcon: "placeholderIcon", selectLabel: "selectLabel", readonly: "readonly", removable: "removable" }, outputs: { select: "select", remove: "remove" }, queries: [{ propertyName: "previewTemplate", first: true, predicate: RelationCardPreviewDirective, descendants: true, read: TemplateRef }, { propertyName: "detailTemplate", first: true, predicate: RelationCardDetailDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<div class=\"flex\">\r\n    <ng-container *ngIf=\"entity; else placeholder\">\r\n        <div class=\"preview\">\r\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\r\n            </button>\r\n            <button *ngIf=\"!readonly && removable\" class=\"btn btn-sm btn-link\" (click)=\"remove.emit()\">\r\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #placeholder>\r\n        <div class=\"preview\">\r\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\r\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <ng-container *ngIf=\"entity; else placeholder\">\r\n        <div class=\"preview\">\r\n            <ng-container *ngTemplateOutlet=\"previewTemplate; context: { entity: entity }\"></ng-container>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ 'common.change-selection' | translate }}\r\n            </button>\r\n            <button *ngIf=\"!readonly && removable\" class=\"btn btn-sm btn-link\" (click)=\"remove.emit()\">\r\n                <clr-icon shape=\"times\"></clr-icon> {{ 'common.remove' | translate }}\r\n            </button>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #placeholder>\r\n        <div class=\"preview\">\r\n            <div class=\"placeholder\" (click)=\"!readonly && select.emit()\">\r\n                <clr-icon [attr.shape]=\"placeholderIcon\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </div>\r\n        <div class=\"detail\">\r\n            <div class=\"pl3 not-set\">{{ 'common.not-set' | translate }}</div>\r\n            <button *ngIf=\"!readonly\" class=\"btn btn-sm btn-link\" (click)=\"select.emit()\">\r\n                <clr-icon shape=\"link\"></clr-icon> {{ selectLabel }}\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;min-width:300px}.placeholder,.not-set{color:var(--color-grey-300)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
@@ -12139,7 +12279,7 @@ class RelationAssetInputComponent {
     }
 }
 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": i4.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", 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 });
 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"] }]
@@ -12154,7 +12294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class RelationSelectorDialogComponent {
 }
 RelationSelectorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RelationSelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationSelectorDialogComponent, selector: "vdr-relation-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"selectorTemplate\" [ngTemplateOutletContext]=\"{ select: resolveWith }\"></ng-container>\r\n", styles: [""], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationSelectorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationSelectorDialogComponent, selector: "vdr-relation-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"selectorTemplate\" [ngTemplateOutletContext]=\"{ select: resolveWith }\"></ng-container>\r\n", styles: [""], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationSelectorDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ title | translate }}</ng-template>\r\n<ng-container [ngTemplateOutlet]=\"selectorTemplate\" [ngTemplateOutletContext]=\"{ select: resolveWith }\"></ng-container>\r\n", styles: [""] }]
@@ -12215,7 +12355,7 @@ class RelationProductInputComponent {
     }
 }
 RelationProductInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationProductInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationProductInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { 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: RelationProductInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-product-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectProduct()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"product$ | async\"\r\n    [selectLabel]=\"'catalog.select-product' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-product=\"entity\">\r\n        <img *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        <div class=\"placeholder\" *ngIf=\"!product.featuredAsset\">\r\n            <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-product=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', product.id]\">{{ product.name }}</a>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img [src]=\"item.featuredAsset | assetPreview: 32\" />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"] }]
@@ -12270,7 +12410,7 @@ class RelationCustomerInputComponent {
     }
 }
 RelationCustomerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCustomerInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationCustomerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i4.TranslatePipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationCustomerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i7.TranslatePipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationCustomerInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-customer-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectCustomer()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"user\"\r\n    [entity]=\"customer\"\r\n    [selectLabel]=\"'customer.select-customer' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"user\" class=\"is-solid\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-c=\"entity\">\r\n        <div class=\"\">\r\n            <a [routerLink]=\"['/customer/customers', c.id]\">{{ c.firstName }} {{ c.lastName }}</a>\r\n        </div>\r\n        <div class=\"\">{{ c.emailAddress }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <b>{{ item.emailAddress }}</b>\r\n            {{ item.firstName }} {{ item.lastName }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [""] }]
@@ -12340,7 +12480,7 @@ class RelationProductVariantInputComponent {
     }
 }
 RelationProductVariantInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationProductVariantInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-RelationProductVariantInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe, "assetPreview": AssetPreviewPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationProductVariantInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { 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: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { 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: RelationProductVariantInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-relation-product-variant-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectProductVariant()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"library\"\r\n    [entity]=\"productVariant$ | async\"\r\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\r\n        <img\r\n            *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n        />\r\n        <ng-template #placeholder>\r\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\r\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\r\n            </div>\r\n        </ng-template>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\r\n        <a [routerLink]=\"['/catalog/products', variant.product.id, { tab: 'variants' }]\">{{ variant.name }}</a>\r\n        <div class=\"\">{{ variant.sku }}</div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\r\n        <ng-template ng-option-tmp let-item=\"item\">\r\n            <img\r\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\r\n                [src]=\"asset | assetPreview: 32\"\r\n            />\r\n            {{ item.name }}\r\n        </ng-template>\r\n    </ng-select>\r\n</ng-template>\r\n", styles: [".placeholder{color:var(--color-grey-300)}\n"] }]
@@ -12355,6 +12495,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 args: ['selector']
             }] } });
 
+/**
+ * @description
+ * This component displays a plain JavaScript object as an expandable tree.
+ *
+ * @example
+ * ```HTML
+ * <vdr-object-tree [value]="payment.metadata"></vdr-object-tree>
+ * ```
+ *
+ * @docsCategory components
+ */
+class ObjectTreeComponent {
+    constructor(parent) {
+        this.isArrayItem = false;
+        if (parent) {
+            this.depth = parent.depth + 1;
+        }
+        else {
+            this.depth = 0;
+        }
+    }
+    ngOnChanges() {
+        this.entries = this.getEntries(this.value);
+        this.expanded = this.depth === 0 || this.isArrayItem;
+        this.valueIsArray = Object.keys(this.value).every(v => Number.isInteger(+v));
+    }
+    isObject(value) {
+        return typeof value === 'object' && value !== null;
+    }
+    getEntries(inputValue) {
+        if (!this.isObject(inputValue)) {
+            return [{ key: '', value: inputValue }];
+        }
+        return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
+    }
+}
+ObjectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+ObjectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], components: [{ type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ObjectTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-object-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: ObjectTreeComponent, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { value: [{
+                type: Input
+            }], isArrayItem: [{
+                type: Input
+            }] } });
+
+class RelationGenericInputComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+    }
+    selectRelationId() {
+        this.modalService
+            .fromComponent(RelationSelectorDialogComponent, {
+            size: 'md',
+            closable: true,
+            locals: {
+                title: marker('common.select-relation-id'),
+                selectorTemplate: this.template,
+            },
+        })
+            .subscribe(result => {
+            if (result) {
+                this.parentFormControl.setValue({ id: result });
+                this.parentFormControl.markAsDirty();
+            }
+        });
+    }
+    remove() {
+        this.parentFormControl.setValue(null);
+        this.parentFormControl.markAsDirty();
+    }
+}
+RelationGenericInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationGenericInputComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
+RelationGenericInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: { readonly: "readonly", parentFormControl: "parentFormControl", config: "config" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["selector"], descendants: true }], ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"], components: [{ type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }, { type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { 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: i1$3.ClrInput, selector: "[clrInput]" }, { 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"] }], pipes: { "translate": i7.TranslatePipe, "json": i3.JsonPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationGenericInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-relation-generic-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\r\n    (select)=\"selectRelationId()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"objects\"\r\n    [entity]=\"parentFormControl.value\"\r\n    [selectLabel]=\"'common.select-relation-id' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    {{ parentFormControl.value | json }}\r\n    <ng-template vdrRelationCardPreview>\r\n        <div class=\"placeholder\">\r\n            <clr-icon shape=\"objects\" size=\"50\"></clr-icon>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-entity=\"entity\">\r\n        <div class=\"\">\r\n            {{ config.entity }}: <strong>{{ entity.id }}</strong>\r\n        </div>\r\n        <vdr-object-tree [value]=\"{ properties: parentFormControl.value }\"></vdr-object-tree>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n\r\n<ng-template #selector let-select=\"select\">\r\n    <div class=\"id-select-wrapper\">\r\n        <clr-input-container>\r\n            <input [(ngModel)]=\"relationId\" type=\"text\" clrInput [readonly]=\"readonly\" />\r\n        </clr-input-container>\r\n        <div>\r\n            <button class=\"btn btn-primary m0\" (click)=\"select(relationId)\">\r\n                {{ 'common.confirm' | translate }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".id-select-wrapper{display:flex;align-items:flex-end}\n"] }]
+        }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { readonly: [{
+                type: Input
+            }], parentFormControl: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], template: [{
+                type: ViewChild,
+                args: ['selector']
+            }] } });
+
 /**
  * @description
  * The default input component for `relation` type custom fields. Allows the selection
@@ -12368,10 +12603,10 @@ class RelationFormInputComponent {
 }
 RelationFormInputComponent.id = 'relation-form-input';
 RelationFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RelationFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationFormInputComponent, selector: "vdr-relation-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        No input component configured for \"{{ config.entity }}\" type\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"], components: [{ type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: ["readonly", "parentFormControl", "config"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RelationFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: RelationFormInputComponent, selector: "vdr-relation-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        <vdr-relation-generic-input\r\n            [parentFormControl]=\"formControl\"\r\n               [config]=\"config\"\r\n               [readonly]=\"readonly\"\r\n        ></vdr-relation-generic-input>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"], components: [{ type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: ["readonly", "parentFormControl", "config"] }, { type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: ["readonly", "parentFormControl", "config"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: RelationFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-relation-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        No input component configured for \"{{ config.entity }}\" type\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"] }]
+            args: [{ selector: 'vdr-relation-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngSwitch]=\"config.entity\">\r\n    <vdr-relation-asset-input\r\n        *ngSwitchCase=\"'Asset'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-asset-input>\r\n    <vdr-relation-product-input\r\n        *ngSwitchCase=\"'Product'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-input>\r\n    <vdr-relation-customer-input\r\n        *ngSwitchCase=\"'Customer'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-customer-input>\r\n    <vdr-relation-product-variant-input\r\n        *ngSwitchCase=\"'ProductVariant'\"\r\n        [parentFormControl]=\"formControl\"\r\n        [config]=\"config\"\r\n        [readonly]=\"readonly\"\r\n    ></vdr-relation-product-variant-input>\r\n    <ng-template ngSwitchDefault>\r\n        <vdr-relation-generic-input\r\n            [parentFormControl]=\"formControl\"\r\n               [config]=\"config\"\r\n               [readonly]=\"readonly\"\r\n        ></vdr-relation-generic-input>\r\n    </ng-template>\r\n</div>\r\n", styles: [":host{display:block;background-color:var(--color-component-bg-200);padding:3px}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }] } });
@@ -12572,7 +12807,7 @@ class ExternalImageDialogComponent {
     }
 }
 ExternalImageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExternalImageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExternalImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { type: i1$3.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ExternalImageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { type: i1$3.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExternalImageDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        {{ 'editor.insert-image' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
@@ -12648,7 +12883,7 @@ class LinkDialogComponent {
     }
 }
 LinkDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LinkDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }], directives: [{ 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: 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LinkDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LinkDialogComponent, selector: "vdr-link-dialog", ngImport: i0, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }], directives: [{ 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: 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LinkDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-link-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'editor.link-href' | translate\" for=\"href\">\r\n        <input id=\"href\" type=\"text\" formControlName=\"href\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field [label]=\"'editor.link-title' | translate\" for=\"title\">\r\n        <input id=\"title\" type=\"text\" formControlName=\"title\" />\r\n    </vdr-form-field>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"remove()\" *ngIf=\"existing\">\r\n        <clr-icon shape=\"unlink\"></clr-icon> {{ 'editor.remove-link' | translate }}\r\n    </button>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'editor.set-link' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
@@ -13454,7 +13689,7 @@ class ActionBarItemsComponent {
     }
 }
 ActionBarItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActionBarItemsComponent, deps: [{ token: NavBuilderService }, { token: i1$2.ActivatedRoute }, { token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-ActionBarItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: { locationId: "locationId" }, host: { properties: { "attr.data-location-id": "this.locationId" } }, usesOnChanges: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block;min-height:36px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ActionBarItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: { locationId: "locationId" }, host: { properties: { "attr.data-location-id": "this.locationId" } }, usesOnChanges: true, ngImport: i0, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block;min-height:36px}\n"], components: [{ type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "api"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i3.AsyncPipe, "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActionBarItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-action-bar-items', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-ui-extension-point [locationId]=\"locationId\" api=\"actionBar\" [leftPx]=\"-24\" [topPx]=\"-6\">\r\n    <ng-container *ngFor=\"let item of items$ | async\">\r\n        <button\r\n            *vdrIfPermissions=\"item.requiresPermission\"\r\n            [routerLink]=\"getRouterLink(item)\"\r\n            [disabled]=\"item.disabled ? (item.disabled | async) : false\"\r\n            (click)=\"handleClick($event, item)\"\r\n            [ngClass]=\"getButtonStyles(item)\"\r\n        >\r\n            <clr-icon *ngIf=\"item.icon\" [attr.shape]=\"item.icon\"></clr-icon>\r\n            {{ item.label | translate }}\r\n        </button>\r\n    </ng-container>\r\n</vdr-ui-extension-point>\r\n", styles: [":host{display:inline-block;min-height:36px}\n"] }]
@@ -13523,7 +13758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class AddressFormComponent {
 }
 AddressFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AddressFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <clr-input-container>\r\n        <label>{{ 'customer.full-name' | translate }}</label>\r\n        <input formControlName=\"fullName\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ 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: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AddressFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddressFormComponent, selector: "vdr-address-form", inputs: { customFields: "customFields", formGroup: "formGroup", availableCountries: "availableCountries" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <clr-input-container>\r\n        <label>{{ 'customer.full-name' | translate }}</label>\r\n        <input formControlName=\"fullName\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""], components: [{ type: i1$3.ClrInputContainer, selector: "clr-input-container" }, { type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ 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: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.ClrInput, selector: "[clrInput]" }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$3.ClrSelect, selector: "[clrSelect]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddressFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-address-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"formGroup\">\r\n    <clr-input-container>\r\n        <label>{{ 'customer.full-name' | translate }}</label>\r\n        <input formControlName=\"fullName\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-1' | translate }}</label>\r\n                <input formControlName=\"streetLine1\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.street-line-2' | translate }}</label>\r\n                <input formControlName=\"streetLine2\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.city' | translate }}</label>\r\n                <input formControlName=\"city\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.province' | translate }}</label>\r\n                <input formControlName=\"province\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.postal-code' | translate }}</label>\r\n                <input formControlName=\"postalCode\" type=\"text\" clrInput/>\r\n            </clr-input-container>\r\n        </div>\r\n        <div class=\"clr-col-md-4\">\r\n            <clr-input-container>\r\n                <label>{{ 'customer.country' | translate }}</label>\r\n                <select name=\"countryCode\" formControlName=\"countryCode\" clrInput clrSelect>\r\n                    <option *ngFor=\"let country of availableCountries\" [value]=\"country.code\">\r\n                        {{ country.name }}\r\n                    </option>\r\n                </select>\r\n            </clr-input-container>\r\n        </div>\r\n    </div>\r\n    <clr-input-container>\r\n        <label>{{ 'customer.phone-number' | translate }}</label>\r\n        <input formControlName=\"phoneNumber\" type=\"text\" clrInput/>\r\n    </clr-input-container>\r\n    <section formGroupName=\"customFields\" *ngIf=\"formGroup.get('customFields') as customFieldsGroup\">\r\n        <label>{{ 'common.custom-fields' | translate }}</label>\r\n        <vdr-tabbed-custom-fields\r\n            entityName=\"Address\"\r\n            [customFields]=\"customFields\"\r\n            [customFieldsFormGroup]=\"customFieldsGroup\"\r\n        ></vdr-tabbed-custom-fields>\r\n    </section>\r\n</form>\r\n", styles: [""] }]
@@ -13713,7 +13948,7 @@ ChannelAssignmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             useExisting: ChannelAssignmentControlComponent,
             multi: true,
         },
-    ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"], 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: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+    ], ngImport: i0, template: "<ng-select\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"multiple\"\r\n    [ngModel]=\"value\"\r\n    [clearable]=\"false\"\r\n    [searchable]=\"false\"\r\n    [disabled]=\"disabled\"\r\n    [compareWith]=\"compareFn\"\r\n    (focus)=\"focussed()\"\r\n    (change)=\"valueChanged($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <span aria-hidden=\"true\" class=\"ng-value-icon left\" (click)=\"clear(item)\"> \u00D7 </span>\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        <span class=\"channel-label\">{{ item.code | channelCodeToLabel | translate }}</span>\r\n    </ng-template>\r\n    <ng-option *ngFor=\"let item of channels$ | async\" [value]=\"item\" [disabled]=\"channelIsDisabled(item.id)\">\r\n        <vdr-channel-badge [channelCode]=\"item.code\"></vdr-channel-badge>\r\n        {{ item.code | channelCodeToLabel | translate }}\r\n    </ng-option>\r\n</ng-select>\r\n\r\n", styles: [":host{min-width:200px}:host.clr-input{border-bottom:none;padding:0}::ng-deep .ng-value>vdr-channel-badge,::ng-deep .ng-option>vdr-channel-badge{margin-bottom:-1px}::ng-deep .ng-value>vdr-channel-badge{margin-left:6px}.channel-label{margin-right:6px}\n"], 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: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe, "channelCodeToLabel": ChannelLabelPipe, "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ChannelAssignmentControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-channel-assignment-control', changeDetection: ChangeDetectionStrategy.Default, providers: [
@@ -13894,7 +14129,7 @@ ConfigurableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             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)\">\r\n                    <label>{{ getArgDef(arg)?.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:24px}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}\n"], components: [{ 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": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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: [
@@ -13908,7 +14143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                             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)\">\r\n                    <label>{{ getArgDef(arg)?.label || (arg.name | sentenceCase) }}</label>\r\n                    <vdr-dynamic-form-input\r\n                        [def]=\"getArgDef(arg)\"\r\n                        [readonly]=\"readonly\"\r\n                        [control]=\"form.get(arg.name)\"\r\n                        [formControlName]=\"arg.name\"\r\n                    ></vdr-dynamic-form-input>\r\n                </ng-container>\r\n            </div>\r\n        </form>\r\n    </div>\r\n    <div class=\"card-footer\" *ngIf=\"!readonly && removable\">\r\n        <button class=\"btn btn-sm btn-link btn-warning\" (click)=\"remove.emit(operation)\">\r\n            <clr-icon shape=\"times\"></clr-icon>\r\n            {{ 'common.remove' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:12px}:host>.card{margin-top:6px}.operation-inputs{padding-top:0}.operation-inputs .arg-row:not(:last-child){margin-bottom:24px}.operation-inputs .arg-row label{margin-right:6px}.operation-inputs .hidden{display:none}\n"] }]
+                    ], 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: [{
@@ -14004,7 +14239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class CustomerLabelComponent {
 }
 CustomerLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CustomerLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n<div *ngIf=\"customer\">\r\n    <a [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n        {{ customer.firstName }} {{ customer.lastName }}\r\n    </a>\r\n</div>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-right:6px}\n"], directives: [{ 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: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CustomerLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CustomerLabelComponent, selector: "vdr-customer-label", inputs: { customer: "customer" }, ngImport: i0, template: "<clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n<div *ngIf=\"customer\">\r\n    <a [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n        {{ customer.firstName }} {{ customer.lastName }}\r\n    </a>\r\n</div>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-right:6px}\n"], directives: [{ 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: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CustomerLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-customer-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<clr-icon shape=\"user\" [class.is-solid]=\"customer\"></clr-icon>\r\n<div *ngIf=\"customer\">\r\n    <a [routerLink]=\"['/customer', 'customers', customer.id]\">\r\n        {{ customer.firstName }} {{ customer.lastName }}\r\n    </a>\r\n</div>\r\n<div *ngIf=\"!customer\">{{ 'common.guest' | translate }}</div>\r\n", styles: [":host{display:flex;align-items:center}clr-icon{margin-right:6px}\n"] }]
@@ -14042,7 +14277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class EmptyPlaceholderComponent {
 }
 EmptyPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EmptyPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmptyPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: { emptyStateLabel: "emptyStateLabel" }, ngImport: i0, template: "<div class=\"empty-state\">\r\n    <clr-icon shape=\"bubble-exclamation\" size=\"64\"></clr-icon>\r\n    <div class=\"empty-label\">\r\n        <ng-container *ngIf=\"emptyStateLabel; else defaultEmptyLabel\">{{ emptyStateLabel }}</ng-container>\r\n        <ng-template #defaultEmptyLabel>{{ 'common.no-results' | translate }}</ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".empty-state{text-align:center;padding:60px;color:var(--color-grey-400);width:100%}.empty-state .empty-label{margin-top:12px;font-size:22px}\n"], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EmptyPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: { emptyStateLabel: "emptyStateLabel" }, ngImport: i0, template: "<div class=\"empty-state\">\r\n    <clr-icon shape=\"bubble-exclamation\" size=\"64\"></clr-icon>\r\n    <div class=\"empty-label\">\r\n        <ng-container *ngIf=\"emptyStateLabel; else defaultEmptyLabel\">{{ emptyStateLabel }}</ng-container>\r\n        <ng-template #defaultEmptyLabel>{{ 'common.no-results' | translate }}</ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".empty-state{text-align:center;padding:60px;color:var(--color-grey-400);width:100%}.empty-state .empty-label{margin-top:12px;font-size:22px}\n"], directives: [{ type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EmptyPlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-empty-placeholder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"empty-state\">\r\n    <clr-icon shape=\"bubble-exclamation\" size=\"64\"></clr-icon>\r\n    <div class=\"empty-label\">\r\n        <ng-container *ngIf=\"emptyStateLabel; else defaultEmptyLabel\">{{ emptyStateLabel }}</ng-container>\r\n        <ng-template #defaultEmptyLabel>{{ 'common.no-results' | translate }}</ng-template>\r\n    </div>\r\n</div>\r\n", styles: [".empty-state{text-align:center;padding:60px;color:var(--color-grey-400);width:100%}.empty-state .empty-label{margin-top:12px;font-size:22px}\n"] }]
@@ -14180,7 +14415,7 @@ class EditNoteDialogComponent {
     }
 }
 EditNoteDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditNoteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditNoteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EditNoteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"], components: [{ type: i1$3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1$3.ClrLabel, selector: "label", inputs: ["for"] }, { type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditNoteDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-edit-note-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"] }]
@@ -14339,7 +14574,7 @@ class ExtensionHostComponent {
     }
 }
 ExtensionHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExtensionHostComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$2.DomSanitizer }, { token: ExtensionHostService }], target: i0.ɵɵFactoryTarget.Component });
-ExtensionHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExtensionHostComponent, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none}.launch-button{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+ExtensionHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ExtensionHostComponent, selector: "vdr-extension-host", providers: [ExtensionHostService], viewQueries: [{ propertyName: "extensionFrame", first: true, predicate: ["extensionFrame"], descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none}.launch-button{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ExtensionHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-extension-host', changeDetection: ChangeDetectionStrategy.Default, providers: [ExtensionHostService], template: "<ng-template [ngIf]=\"openInIframe\" [ngIfElse]=\"launchExtension\">\r\n    <iframe [src]=\"extensionUrl\" #extensionFrame></iframe>\r\n</ng-template>\r\n<ng-template #launchExtension>\r\n    <div class=\"launch-button\" [class.launched]=\"extensionWindowIsOpen\">\r\n        <div>\r\n            <button\r\n                class=\"btn btn-lg btn-primary\"\r\n                [disabled]=\"extensionWindowIsOpen\"\r\n                (click)=\"launchExtensionWindow()\"\r\n            >\r\n                <clr-icon shape=\"pop-out\"></clr-icon>\r\n                {{ 'common.launch-extension' | translate }}\r\n            </button>\r\n            <h3 class=\"window-hint\" [class.visible]=\"extensionWindowIsOpen\">\r\n                {{ 'common.extension-running-in-separate-window' | translate }}\r\n            </h3>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: ["iframe{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none}.launch-button{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;border:none;padding:24px;display:flex;align-items:center;justify-content:center;transition:background-color .3s;text-align:center}.launch-button.launched{background-color:var(--color-component-bg-300)}.window-hint{visibility:hidden;opacity:0;transition:visibility .3s 0,opacity .3s}.window-hint.visible{visibility:visible;opacity:1;transition:visibility 0,opacity .3s}\n"] }]
@@ -14399,7 +14634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
 class HistoryEntryDetailComponent {
 }
 HistoryEntryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HistoryEntryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HistoryEntryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HistoryEntryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: HistoryEntryDetailComponent, selector: "vdr-history-entry-detail", ngImport: i0, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HistoryEntryDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-history-entry-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown>\r\n    <button class=\"btn btn-link btn-sm details-button\" vdrDropdownTrigger>\r\n        <clr-icon shape=\"details\" size=\"12\"></clr-icon>\r\n        {{ 'common.details' | translate }}\r\n    </button>\r\n    <vdr-dropdown-menu>\r\n        <div class=\"entry-dropdown\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".entry-dropdown{margin:0 12px}.details-button{margin:0}\n"] }]
@@ -14412,7 +14647,7 @@ class LanguageSelectorComponent {
     }
 }
 LanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LanguageSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                {{ code | localeLanguageName }} <span class=\"code\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i4.TranslatePipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe } });
+LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LanguageSelectorComponent, selector: "vdr-language-selector", inputs: { currentLanguageCode: "currentLanguageCode", availableLanguageCodes: "availableLanguageCodes", disabled: "disabled" }, outputs: { languageCodeChange: "languageCodeChange" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                {{ code | localeLanguageName }} <span class=\"code\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"], components: [{ type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i7.TranslatePipe, "uppercase": i3.UpperCasePipe, "localeLanguageName": LocaleLanguageNamePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-language-selector', template: "<ng-container *ngIf=\"1 < availableLanguageCodes?.length\">\r\n    <vdr-dropdown>\r\n        <button type=\"button\" class=\"btn btn-sm btn-link\" vdrDropdownTrigger [disabled]=\"disabled\">\r\n            <clr-icon shape=\"world\"></clr-icon>\r\n            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}\r\n            <clr-icon shape=\"caret down\"></clr-icon>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <button\r\n                type=\"button\"\r\n                *ngFor=\"let code of availableLanguageCodes\"\r\n                (click)=\"languageCodeChange.emit(code)\"\r\n                vdrDropdownItem\r\n            >\r\n                {{ code | localeLanguageName }} <span class=\"code\">{{ code }}</span>\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [".code{color:var(--color-grey-400)}\n"] }]
@@ -14426,59 +14661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Output
             }] } });
 
-/**
- * @description
- * This component displays a plain JavaScript object as an expandable tree.
- *
- * @example
- * ```HTML
- * <vdr-object-tree [value]="payment.metadata"></vdr-object-tree>
- * ```
- *
- * @docsCategory components
- */
-class ObjectTreeComponent {
-    constructor(parent) {
-        this.isArrayItem = false;
-        if (parent) {
-            this.depth = parent.depth + 1;
-        }
-        else {
-            this.depth = 0;
-        }
-    }
-    ngOnInit() {
-        this.entries = this.getEntries(this.value);
-        this.expanded = this.depth === 0 || this.isArrayItem;
-        this.valueIsArray = Object.keys(this.value).every(v => Number.isInteger(+v));
-    }
-    isObject(value) {
-        return typeof value === 'object' && value !== null;
-    }
-    getEntries(inputValue) {
-        if (!this.isObject(inputValue)) {
-            return [{ key: '', value: inputValue }];
-        }
-        return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
-    }
-}
-ObjectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-ObjectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], components: [{ type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { type: i9.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ObjectTreeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-object-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: ObjectTreeComponent, decorators: [{
-                        type: Optional
-                    }, {
-                        type: SkipSelf
-                    }] }];
-    }, propDecorators: { value: [{
-                type: Input
-            }], isArrayItem: [{
-                type: Input
-            }] } });
-
 class StateI18nTokenPipe {
     constructor() {
         this.stateI18nTokens = {
@@ -14557,7 +14739,7 @@ class OrderStateLabelComponent {
     }
 }
 OrderStateLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OrderStateLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"], components: [{ type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe, "stateI18nToken": StateI18nTokenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+OrderStateLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"], components: [{ type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe, "stateI18nToken": StateI18nTokenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OrderStateLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-order-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"] }]
@@ -14636,7 +14818,7 @@ class TimelineEntryComponent {
     }
 }
 TimelineEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimelineEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n    [ngClass]=\"displayType\"\r\n    [class.has-custom-icon]=\"!!iconShape\"\r\n    class=\"entry\"\r\n    [class.last]=\"isLast === true\"\r\n    [class.collapsed]=\"collapsed\"\r\n>\r\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n        <div class=\"custom-icon\">\r\n            <clr-icon\r\n                *ngIf=\"iconShape && !collapsed\"\r\n                [attr.shape]=\"getIconShape()\"\r\n                [ngClass]=\"getIconClass()\"\r\n                size=\"24\"\r\n            ></clr-icon>\r\n        </div>\r\n    </div>\r\n    <div class=\"entry-body\">\r\n        <div class=\"detail\">\r\n            <div class=\"time\">\r\n                {{ createdAt | localeDate: 'short' }}\r\n            </div>\r\n            <div class=\"name\">\r\n                {{ name }}\r\n            </div>\r\n        </div>\r\n        <div [class.featured-entry]=\"featured\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-timeline-thread)}:host:first-of-type .entry-body{max-height:initial}.entry{display:flex}.timeline{border-left:2px solid var(--color-timeline-thread);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-left:2px solid var(--color-timeline-thread)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-component-bg-200);border:1px solid var(--color-component-border-300);position:absolute;left:-5px;top:32px;transition:top .2s;cursor:pointer}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:32px;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-600);background-color:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{flex:1;padding-top:24px;padding-left:12px;line-height:16px;margin-left:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:16px;line-height:26px}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;color:var(--color-text-300);font-size:12px}.detail .name{margin-left:12px}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-400)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-400)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-400)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-400)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding-top:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i4.TranslatePipe, "localeDate": LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TimelineEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TimelineEntryComponent, selector: "vdr-timeline-entry", inputs: { displayType: "displayType", createdAt: "createdAt", name: "name", featured: "featured", iconShape: "iconShape", isLast: "isLast", collapsed: "collapsed" }, outputs: { expandClick: "expandClick" }, host: { properties: { "class.collapsed": "this.collapsed" } }, ngImport: i0, template: "<div\r\n    [ngClass]=\"displayType\"\r\n    [class.has-custom-icon]=\"!!iconShape\"\r\n    class=\"entry\"\r\n    [class.last]=\"isLast === true\"\r\n    [class.collapsed]=\"collapsed\"\r\n>\r\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n        <div class=\"custom-icon\">\r\n            <clr-icon\r\n                *ngIf=\"iconShape && !collapsed\"\r\n                [attr.shape]=\"getIconShape()\"\r\n                [ngClass]=\"getIconClass()\"\r\n                size=\"24\"\r\n            ></clr-icon>\r\n        </div>\r\n    </div>\r\n    <div class=\"entry-body\">\r\n        <div class=\"detail\">\r\n            <div class=\"time\">\r\n                {{ createdAt | localeDate: 'short' }}\r\n            </div>\r\n            <div class=\"name\">\r\n                {{ name }}\r\n            </div>\r\n        </div>\r\n        <div [class.featured-entry]=\"featured\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-timeline-thread)}:host:first-of-type .entry-body{max-height:initial}.entry{display:flex}.timeline{border-left:2px solid var(--color-timeline-thread);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-left:2px solid var(--color-timeline-thread)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-component-bg-200);border:1px solid var(--color-component-border-300);position:absolute;left:-5px;top:32px;transition:top .2s;cursor:pointer}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:32px;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-600);background-color:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{flex:1;padding-top:24px;padding-left:12px;line-height:16px;margin-left:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:16px;line-height:26px}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;color:var(--color-text-300);font-size:12px}.detail .name{margin-left:12px}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-400)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-400)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-400)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-400)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding-top:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "translate": i7.TranslatePipe, "localeDate": LocaleDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimelineEntryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-timeline-entry', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    [ngClass]=\"displayType\"\r\n    [class.has-custom-icon]=\"!!iconShape\"\r\n    class=\"entry\"\r\n    [class.last]=\"isLast === true\"\r\n    [class.collapsed]=\"collapsed\"\r\n>\r\n    <div class=\"timeline\" (click)=\"expandClick.emit()\" [title]=\"timelineTitle | translate\">\r\n        <div class=\"custom-icon\">\r\n            <clr-icon\r\n                *ngIf=\"iconShape && !collapsed\"\r\n                [attr.shape]=\"getIconShape()\"\r\n                [ngClass]=\"getIconClass()\"\r\n                size=\"24\"\r\n            ></clr-icon>\r\n        </div>\r\n    </div>\r\n    <div class=\"entry-body\">\r\n        <div class=\"detail\">\r\n            <div class=\"time\">\r\n                {{ createdAt | localeDate: 'short' }}\r\n            </div>\r\n            <div class=\"name\">\r\n                {{ name }}\r\n            </div>\r\n        </div>\r\n        <div [class.featured-entry]=\"featured\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}:host:first-of-type .timeline:before{border-left-color:var(--color-timeline-thread)}:host:first-of-type .entry-body{max-height:initial}.entry{display:flex}.timeline{border-left:2px solid var(--color-timeline-thread);padding-bottom:8px;position:relative}.timeline:before{content:\"\";position:absolute;width:2px;height:32px;left:-2px;border-left:2px solid var(--color-timeline-thread)}.timeline:after{content:\"\";display:block;border-radius:50%;width:8px;height:8px;background-color:var(--color-component-bg-200);border:1px solid var(--color-component-border-300);position:absolute;left:-5px;top:32px;transition:top .2s;cursor:pointer}.timeline .custom-icon{position:absolute;width:32px;height:32px;left:-17px;top:32px;align-items:center;justify-content:center;border-radius:50%;color:var(--color-primary-600);background-color:var(--color-component-bg-100);border:1px solid var(--color-component-border-200);display:none}.entry.has-custom-icon .timeline:after{display:none}.entry.has-custom-icon .custom-icon{display:flex}.entry.last .timeline{border-left-color:transparent}.entry-body{flex:1;padding-top:24px;padding-left:12px;line-height:16px;margin-left:12px;color:var(--color-text-200);overflow:visible;max-height:100px;transition:max-height .2s,padding-top .2s,opacity .2s .2s}.featured-entry ::ng-deep .title{color:var(--color-text-100);font-size:16px;line-height:26px}.featured-entry ::ng-deep .note-text{color:var(--color-text-100);white-space:pre-wrap}.detail{display:flex;color:var(--color-text-300);font-size:12px}.detail .name{margin-left:12px}.muted .timeline,.muted .timeline .custom-icon{color:var(--color-text-300)}.success .timeline,.success .timeline .custom-icon{color:var(--color-success-400)}.success .timeline:after{background-color:var(--color-success-200);border:1px solid var(--color-success-400)}.error .timeline,.error .timeline .custom-icon{color:var(--color-error-400)}.error .timeline:after{background-color:var(--color-error-200);border:1px solid var(--color-error-400)}.warning .timeline,.warning .timeline .custom-icon{color:var(--color-warning-400)}.warning .timeline:after{background-color:var(--color-warning-200);border:1px solid var(--color-warning-400)}.collapsed .entry-body{max-height:0;overflow:hidden;opacity:0;padding-top:0}.collapsed .timeline{border-left-color:transparent}.collapsed .timeline:after{top:0}\n"] }]
@@ -14954,6 +15136,7 @@ const DYNAMIC_FORM_INPUTS = [
     RelationCardPreviewDirective,
     RelationCardDetailDirective,
     RelationSelectorDialogComponent,
+    RelationGenericInputComponent,
     TextareaFormInputComponent,
     RichTextFormInputComponent,
     JsonEditorFormInputComponent,
@@ -15067,6 +15250,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RelationCardPreviewDirective,
         RelationCardDetailDirective,
         RelationSelectorDialogComponent,
+        RelationGenericInputComponent,
         TextareaFormInputComponent,
         RichTextFormInputComponent,
         JsonEditorFormInputComponent], imports: [ClarityModule,
@@ -15193,6 +15377,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RelationCardPreviewDirective,
         RelationCardDetailDirective,
         RelationSelectorDialogComponent,
+        RelationGenericInputComponent,
         TextareaFormInputComponent,
         RichTextFormInputComponent,
         JsonEditorFormInputComponent] });
@@ -15271,7 +15456,7 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         ThemeSwitcherComponent], imports: [BrowserModule,
         DataModule,
         SharedModule,
-        BrowserAnimationsModule, i4.TranslateModule], exports: [SharedModule, OverlayHostComponent] });
+        BrowserAnimationsModule, i7.TranslateModule], exports: [SharedModule, OverlayHostComponent] });
 CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CoreModule, providers: [
         { provide: MESSAGE_FORMAT_CONFIG, useFactory: getLocales },
         registerDefaultFormInputs(),
@@ -15777,7 +15962,7 @@ function patchObject(obj, patch) {
 }
 
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.0-next.1';
+const ADMIN_UI_VERSION = '2.0.0-next.4';
 
 /**
  * Responsible for registering dashboard widget components and querying for layouts.
@@ -15997,5 +16182,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, ASSET_FRAGMENT, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddressFormComponent, AdjustmentType, AdministratorDataService, AffixedInputComponent, AppComponent, AppComponentModule, AppShellComponent, AssetFileInputComponent, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetSearchInputComponent, AssetType, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BooleanFormInputComponent, BreadcrumbComponent, CANCEL_JOB, CANCEL_ORDER, CHANNEL_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelLabelPipe, ChannelSwitcherComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, ComponentRegistryService, ConfigurableInputComponent, CoreModule, CurrencyCode, CurrencyFormInputComponent, CurrencyInputComponent, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldControlComponent, CustomFieldLabelPipe, CustomHttpTranslationLoader, CustomerDataService, CustomerGroupFormInputComponent, CustomerLabelComponent, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ASSETS, DELETE_CHANNEL, DELETE_COLLECTION, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_NOTE, DELETE_FACET, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PRODUCT, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_ROLE, DELETE_SHIPPING_METHOD, DELETE_TAG, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_ZONE, DISCOUNT_FRAGMENT, DashboardWidgetService, DataModule, DataService, DataTableColumnComponent, DataTableComponent, DateFormInputComponent, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueSelectorComponent, FetchAdapter, FileSizePipe, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ADMINISTRATOR, GET_ADMINISTRATORS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNEL, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_COUNTRY, GET_COUNTRY_LIST, GET_CURRENT_USER, GET_CUSTOMER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_LIST, GET_FACET_WITH_VALUES, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_ORDER_SUMMARY, GET_PAYMENT_METHOD, GET_PAYMENT_METHOD_LIST, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_PROMOTION, GET_PROMOTION_LIST, GET_ROLE, GET_ROLES, GET_SERVER_CONFIG, GET_SHIPPING_METHOD, GET_SHIPPING_METHOD_LIST, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_CATEGORY, GET_TAX_RATE, GET_TAX_RATE_LIST, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONES, GLOBAL_SETTINGS_FRAGMENT, GlobalFlag, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryDetailComponent, HistoryEntryType, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, ModalDialogComponent, ModalService, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderDataService, OrderStateLabelComponent, OverlayHostComponent, OverlayHostService, PAYMENT_METHOD_FRAGMENT, PRODUCT_DETAIL_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PaginationControlsComponent, PasswordFormInputComponent, PercentageSuffixInputComponent, Permission, ProductDataService, 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, 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, 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 };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map