npm - @vendure/admin-ui - Versions diffs - 2.0.1 → 2.0.3 - Mend

@vendure/admin-ui 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/fesm2022/vendure-admin-ui-core.mjs CHANGED Viewed

@@ -26,8 +26,10 @@ import { ClarityModule } from '@clr/angular';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$5 from '@angular/forms';
-import { UntypedFormControl, UntypedFormArray, NG_VALUE_ACCESSOR, UntypedFormGroup, Validators, NG_VALIDATORS, FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, FormArray, UntypedFormArray, NG_VALUE_ACCESSOR, UntypedFormGroup, Validators, NG_VALIDATORS, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i3$1 from '@ng-select/ng-select';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY, NgSelectModule } from '@ng-select/ng-select';
 import { DEFAULT_CHANNEL_CODE, DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
@@ -38,7 +40,7 @@ import { createUploadLink } from 'apollo-upload-client';
 import { omit } from '@vendure/common/lib/omit';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 import { CodeJar } from 'codejar';
-import * as i4 from '@angular/cdk/drag-drop';
+import * as i4$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import dayjs from 'dayjs';
 import * as i5 from '@angular/cdk/bidi';
@@ -1576,6 +1578,7 @@ const UpdateProductOptionGroupDocument = { "kind": "Document", "definitions": [{
 const UpdateProductOptionDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "UpdateProductOption" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "UpdateProductOptionInput" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "updateProductOption" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "input" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "FragmentSpread", "name": { "kind": "Name", "value": "ProductOption" } }] } }] } }, { "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "ProductOption" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "ProductOption" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "groupId" } }, { "kind": "Field", "name": { "kind": "Name", "value": "translations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }] } }] } }] };
 const DeleteProductOptionDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "DeleteProductOption" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "ID" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "deleteProductOption" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "id" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "result" } }, { "kind": "Field", "name": { "kind": "Name", "value": "message" } }] } }] } }] };
 const DeleteProductVariantDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "DeleteProductVariant" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "ID" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "deleteProductVariant" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "id" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "result" } }, { "kind": "Field", "name": { "kind": "Name", "value": "message" } }] } }] } }] };
+const DeleteProductVariantsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "DeleteProductVariants" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "ids" } }, "type": { "kind": "NonNullType", "type": { "kind": "ListType", "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "ID" } } } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "deleteProductVariants" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "ids" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "ids" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "result" } }, { "kind": "Field", "name": { "kind": "Name", "value": "message" } }] } }] } }] };
 const GetProductVariantOptionsDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "query", "name": { "kind": "Name", "value": "GetProductVariantOptions" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "ID" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "product" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "id" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "id" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "optionGroups" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "FragmentSpread", "name": { "kind": "Name", "value": "ProductOptionGroup" } }, { "kind": "Field", "name": { "kind": "Name", "value": "options" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "FragmentSpread", "name": { "kind": "Name", "value": "ProductOption" } }] } }] } }, { "kind": "Field", "name": { "kind": "Name", "value": "variants" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "enabled" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "sku" } }, { "kind": "Field", "name": { "kind": "Name", "value": "price" } }, { "kind": "Field", "name": { "kind": "Name", "value": "priceWithTax" } }, { "kind": "Field", "name": { "kind": "Name", "value": "currencyCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "stockOnHand" } }, { "kind": "Field", "name": { "kind": "Name", "value": "enabled" } }, { "kind": "Field", "name": { "kind": "Name", "value": "options" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "groupId" } }] } }] } }] } }] } }, { "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "ProductOptionGroup" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "ProductOptionGroup" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "translations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }] } }] } }, { "kind": "FragmentDefinition", "name": { "kind": "Name", "value": "ProductOption" }, "typeCondition": { "kind": "NamedType", "name": { "kind": "Name", "value": "ProductOption" } }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "createdAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "updatedAt" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }, { "kind": "Field", "name": { "kind": "Name", "value": "groupId" } }, { "kind": "Field", "name": { "kind": "Name", "value": "translations" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "languageCode" } }, { "kind": "Field", "name": { "kind": "Name", "value": "name" } }] } }] } }] };
 const AssignProductsToChannelDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "AssignProductsToChannel" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "AssignProductsToChannelInput" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "assignProductsToChannel" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "input" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "channels" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }] } }] } }] } }] };
 const AssignVariantsToChannelDocument = { "kind": "Document", "definitions": [{ "kind": "OperationDefinition", "operation": "mutation", "name": { "kind": "Name", "value": "AssignVariantsToChannel" }, "variableDefinitions": [{ "kind": "VariableDefinition", "variable": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } }, "type": { "kind": "NonNullType", "type": { "kind": "NamedType", "name": { "kind": "Name", "value": "AssignProductVariantsToChannelInput" } } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "assignProductVariantsToChannel" }, "arguments": [{ "kind": "Argument", "name": { "kind": "Name", "value": "input" }, "value": { "kind": "Variable", "name": { "kind": "Name", "value": "input" } } }], "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "channels" }, "selectionSet": { "kind": "SelectionSet", "selections": [{ "kind": "Field", "name": { "kind": "Name", "value": "id" } }, { "kind": "Field", "name": { "kind": "Name", "value": "code" } }] } }] } }] } }] };
@@ -2495,6 +2498,14 @@ const DELETE_PRODUCT_VARIANT = gql `
         }
     }
 `;
+const DELETE_PRODUCT_VARIANTS = gql `
+    mutation DeleteProductVariants($ids: [ID!]!) {
+        deleteProductVariants(ids: $ids) {
+            result
+            message
+        }
+    }
+`;
 const GET_PRODUCT_VARIANT_OPTIONS = gql `
     query GetProductVariantOptions($id: ID!) {
         product(id: $id) {
@@ -5239,6 +5250,11 @@ class ProductDataService {
             id,
         });
     }
+    deleteProductVariants(ids) {
+        return this.baseDataService.mutate(DELETE_PRODUCT_VARIANTS, {
+            ids,
+        });
+    }
     createProductOptionGroups(productOptionGroup) {
         const input = {
             input: productOptionGroup,
@@ -6141,7 +6157,7 @@ function transformRelations(input, customFieldConfig) {
                     delete input.customFields[field.name];
                     input.customFields[getGraphQlInputName(field)] =
                         field.list && Array.isArray(entityValue)
-                            ? entityValue.map(v => v?.id)
+                            ? entityValue.map(v => (typeof v === 'string' ? v : v?.id))
                             : entityValue === null
                                 ? null
                                 : entityValue?.id;
@@ -6769,6 +6785,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
  * albeit only a subset which is currently used in this application.
  */
 class DropdownMenuComponent {
+    onEscapeKeydown(event) {
+        if (this.dropdown.isOpen) {
+            if (this.overlayRef.overlayElement.contains(document.activeElement)) {
+                this.dropdown.toggleOpen();
+            }
+        }
+    }
+    onArrowKey(event) {
+        if (this.dropdown.isOpen &&
+            document.activeElement instanceof HTMLElement &&
+            (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            const dropdownItems = Array.from(this.overlayRef.overlayElement.querySelectorAll('.dropdown-item'));
+            const currentIndex = dropdownItems.indexOf(document.activeElement);
+            if (currentIndex === -1) {
+                return;
+            }
+            if (event.key === 'ArrowDown') {
+                const nextItem = dropdownItems[(currentIndex + 1) % dropdownItems.length];
+                nextItem.focus();
+            }
+            if (event.key === 'ArrowUp') {
+                const previousItem = dropdownItems[(currentIndex - 1 + dropdownItems.length) % dropdownItems.length];
+                previousItem.focus();
+            }
+        }
+    }
     constructor(overlay, viewContainerRef, dropdown) {
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
@@ -6848,31 +6890,39 @@ class DropdownMenuComponent {
         return inverted;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: DropdownComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
-        <ng-template #menu>
-            <div class="dropdown open">
-                <div class="dropdown-menu" [ngClass]="customClasses">
-                    <div class="dropdown-content-wrapper">
-                        <ng-content></ng-content>
-                    </div>
-                </div>
-            </div>
-        </ng-template>
-    `, isInline: true, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-right:3px}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: { position: ["vdrPosition", "position"], customClasses: "customClasses" }, host: { listeners: { "window:keydown.escape": "onEscapeKeydown($event)", "window:keydown": "onArrowKey($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: `
+        <ng-template #menu>
+            <div class="dropdown open">
+                <div class="dropdown-menu" [ngClass]="customClasses">
+                    <div
+                        class="dropdown-content-wrapper"
+                        [cdkTrapFocus]="true"
+                        [cdkTrapFocusAutoCapture]="true"
+                    >
+                        <ng-content></ng-content>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+    `, isInline: true, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-right:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-dropdown-menu', template: `
-        <ng-template #menu>
-            <div class="dropdown open">
-                <div class="dropdown-menu" [ngClass]="customClasses">
-                    <div class="dropdown-content-wrapper">
-                        <ng-content></ng-content>
-                    </div>
-                </div>
-            </div>
-        </ng-template>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-right:3px}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
+            args: [{ selector: 'vdr-dropdown-menu', template: `
+        <ng-template #menu>
+            <div class="dropdown open">
+                <div class="dropdown-menu" [ngClass]="customClasses">
+                    <div
+                        class="dropdown-content-wrapper"
+                        [cdkTrapFocus]="true"
+                        [cdkTrapFocusAutoCapture]="true"
+                    >
+                        <ng-content></ng-content>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".clear-backdrop{background-color:#ff69b4}::ng-deep .dropdown-menu{max-width:initial}::ng-deep .dropdown-menu .dropdown-item{display:flex;align-items:center}::ng-deep .dropdown-menu .dropdown-item clr-icon{margin-right:3px}::ng-deep .dropdown-menu .dropdown-item:focus{outline:var(--color-dropdown-item-focus-outline) solid 1px;outline-offset:1px 0}.dropdown.open>.dropdown-menu{position:relative;top:0;height:100%;overflow-y:auto}:host{opacity:1;transition:opacity .3s}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: DropdownComponent }]; }, propDecorators: { position: [{
                 type: Input,
                 args: ['vdrPosition']
@@ -6881,6 +6931,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
             }], menuTemplate: [{
                 type: ViewChild,
                 args: ['menu', { static: true }]
+            }], onEscapeKeydown: [{
+                type: HostListener,
+                args: ['window:keydown.escape', ['$event']]
+            }], onArrowKey: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
             }] } });
 class DropdownTriggerDirective {
@@ -8330,6 +8386,9 @@ class ThemeSwitcherComponent {
     ngOnInit() {
         this.activeTheme$ = this.dataService.client.uiState().mapStream(data => data.uiState.theme);
     }
+    onHostClick() {
+        this.activeTheme$.pipe(take(1)).subscribe(current => this.toggleTheme(current));
+    }
     toggleTheme(current) {
         const newTheme = current === 'default' ? 'dark' : 'default';
         this.dataService.client.setUiTheme(newTheme).subscribe(() => {
@@ -8337,12 +8396,18 @@ class ThemeSwitcherComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ThemeSwitcherComponent, deps: [{ token: DataService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher", host: { listeners: { "click": "onHostClick($event)", "keydown.enter": "onHostClick($event)" } }, ngImport: i0, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\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: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:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataService }, { type: LocalStorageService }]; } });
+            args: [{ selector: 'vdr-theme-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button *ngIf=\"activeTheme$ | async as activeTheme\" class=\"theme-toggle\">\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: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:0;left:6px;z-index:0;opacity:.2;color:var(--color-text-300);transition:opacity .3s,left .3s}.theme-icon.active{z-index:1;left:0;opacity:1}.theme-icon.default.active{color:#d6ae3f}.theme-icon.dark.active{color:#ffdf3a}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataService }, { type: LocalStorageService }]; }, propDecorators: { onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }] } });
 class UserMenuComponent {
     constructor() {
@@ -8352,11 +8417,11 @@ class UserMenuComponent {
         this.selectUiLanguage = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n        <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" 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;height:2.5rem;width:100%;padding:var(--space-unit);padding-left:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-right:6px}@media screen and (max-width: 992px){.user-circle{margin-right:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-right:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: UserMenuComponent, selector: "vdr-user-menu", inputs: { userName: "userName", availableLanguages: "availableLanguages", uiLanguageAndLocale: "uiLanguageAndLocale" }, outputs: { logOut: "logOut", selectUiLanguage: "selectUiLanguage" }, ngImport: i0, template: "<vdr-dropdown>\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\n        <div class=\"user-circle\">\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\n        </div>\n        <span class=\"user-name\">{{ userName }}</span>\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\n        </a>\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\n            <button\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"selectUiLanguage.emit()\"\n                [title]=\"'common.select-display-language' | translate\"\n            >\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\n            </button>\n        </ng-container>\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\n        <div class=\"dropdown-divider\"></div>\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\n        </button>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-left:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-right:6px}@media screen and (max-width: 992px){.user-circle{margin-right:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-right:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ThemeSwitcherComponent, selector: "vdr-theme-switcher" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleLanguageNamePipe, name: "localeLanguageName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-user-menu', template: "<vdr-dropdown>\r\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\r\n        <div class=\"user-circle\">\r\n        <clr-icon shape=\"user\" size=\"16\"></clr-icon>\r\n        </div>\r\n        <span class=\"user-name\">{{ userName }}</span>\r\n        <clr-icon class=\"md:hidden\" 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;height:2.5rem;width:100%;padding:var(--space-unit);padding-left:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-right:6px}@media screen and (max-width: 992px){.user-circle{margin-right:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-right:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"] }]
+            args: [{ selector: 'vdr-user-menu', template: "<vdr-dropdown>\n    <button class=\"trigger user-menu-btn\" vdrDropdownTrigger>\n        <div class=\"user-circle\">\n            <clr-icon shape=\"user\" size=\"16\"></clr-icon>\n        </div>\n        <span class=\"user-name\">{{ userName }}</span>\n        <clr-icon class=\"md:hidden\" shape=\"caret down\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\n        <a [routerLink]=\"['/settings', 'profile']\" vdrDropdownItem tabindex=\"0\">\n            <clr-icon shape=\"user\" class=\"is-solid\"></clr-icon> {{ 'settings.profile' | translate }}\n        </a>\n        <ng-container *ngIf=\"1 < availableLanguages.length\">\n            <button\n                type=\"button\"\n                vdrDropdownItem\n                (click)=\"selectUiLanguage.emit()\"\n                [title]=\"'common.select-display-language' | translate\"\n            >\n                <clr-icon shape=\"language\"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}\n            </button>\n        </ng-container>\n        <vdr-theme-switcher vdrDropdownItem tabindex=\"0\"></vdr-theme-switcher>\n        <div class=\"dropdown-divider\"></div>\n        <button type=\"button\" vdrDropdownItem (click)=\"logOut.emit()\">\n            <clr-icon shape=\"logout\"></clr-icon> {{ 'common.log-out' | translate }}\n        </button>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [":host{display:flex;align-items:center;height:2.5rem;width:100%;padding:var(--space-unit);padding-left:0}@media screen and (max-width: 992px){:host{margin:0}}:host vdr-dropdown{width:100%}.user-menu-btn{display:flex;align-items:center;justify-content:space-between;border:none;font-size:var(--font-size-sm);width:100%;line-height:100%;height:40px;color:var(--color-text-100);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);cursor:pointer}.user-menu-btn:hover{color:var(--color-text-200)}@media screen and (min-width: 992px){.user-menu-btn{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5)}}.user-circle{display:inline-flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-primary-600);background-image:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-primary-700) 100%);width:24px;height:24px;margin-right:6px}@media screen and (max-width: 992px){.user-circle{margin-right:0}}.user-circle clr-icon{color:var(--color-text-inverse)}.user-name{margin-right:var(--space-unit);overflow:hidden;max-width:100px;text-overflow:ellipsis}@media screen and (max-width: 992px){.user-name{display:none}}\n"] }]
         }], propDecorators: { userName: [{
                 type: Input
             }], availableLanguages: [{
@@ -9103,11 +9168,11 @@ class MainNavComponent extends BaseNavComponent {
         this.itemClick.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MainNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: MainNavComponent, selector: "vdr-main-nav", inputs: { displayMode: "displayMode" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | 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                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\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                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-right:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-right:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-right:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: MainNavComponent, selector: "vdr-main-nav", inputs: { displayMode: "displayMode" }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | 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                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\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                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-right:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-right:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-right:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { kind: "component", type: UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "topPx", "leftPx", "display", "api"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MainNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-main-nav', template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | 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                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\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                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-right:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-right:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-right:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}\n"] }]
+            args: [{ selector: 'vdr-main-nav', template: "<nav class=\"main-nav\">\r\n    <section class=\"\">\r\n        <ng-container *ngFor=\"let section of mainMenuConfig$ | 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                [class.collapsed]=\"section.collapsible && !expandedSections.includes(section.id)\"\r\n                routerLinkActive=\"active\"\r\n                (isActiveChange)=\"setExpanded(section, $event)\"\r\n                *ngIf=\"shouldDisplayLink(section)\"\r\n            >\r\n                <vdr-ui-extension-point\r\n                    [locationId]=\"section.id\"\r\n                    api=\"navMenu\"\r\n                    [topPx]=\"-6\"\r\n                    [leftPx]=\"8\"\r\n                    display=\"block\"\r\n                >\r\n                    <div class=\"section-header\">\r\n                        <ng-container\r\n                            *ngIf=\"navBuilderService.sectionBadges[section.id] | async as sectionBadge\"\r\n                        >\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                        <label class=\"nav-group-header mx-4\" [for]=\"section.id\">{{\r\n                            section.label | translate\r\n                        }}</label>\r\n                        <button *ngIf=\"section.collapsible\" class=\"button-small bg-weight-150\" (click)=\"toggleExpand(section)\">\r\n                            <clr-icon\r\n                                [attr.shape]=\"expandedSections.includes(section.id) ? 'caret up' : 'caret down'\"\r\n                                size=\"12\"\r\n                                [title]=\"'common.expand-entries' | translate\"\r\n                            ></clr-icon>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"nav-list\" [ngStyle]=\"getStyleForSection(section)\">\r\n                        <ng-container *ngFor=\"let item of section.items\">\r\n                            <div\r\n                                *ngIf=\"shouldDisplayLink(item)\"\r\n                                class=\"nav-link px-4\"\r\n                                routerLinkActive=\"active\"\r\n                            >\r\n                                <a\r\n                                    [attr.data-item-id]=\"section.id\"\r\n                                    [routerLink]=\"getRouterLink(item)\"\r\n                                    (click)=\"onItemClick(item, $event)\"\r\n                                >\r\n                                    <ng-container *ngIf=\"item.statusBadge | async as itemBadge\">\r\n                                        <vdr-status-badge\r\n                                            *ngIf=\"itemBadge.type !== 'none'\"\r\n                                            [type]=\"itemBadge.type\"\r\n                                        ></vdr-status-badge>\r\n                                    </ng-container>\r\n                                    <clr-icon\r\n                                        [attr.shape]=\"item.icon || 'block'\"\r\n                                        size=\"16\"\r\n                                        [title]=\"item.label | translate\"\r\n                                    ></clr-icon>\r\n                                    <span class=\"\">{{ item.label | translate }}</span>\r\n                                </a>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </vdr-ui-extension-point>\r\n            </section>\r\n        </ng-container>\r\n    </section>\r\n</nav>\r\n", styles: [":host{background-color:var(--clr-nav-background-color)}nav.main-nav{height:100%;border-right-color:var(--clr-sidenav-border-color)}.main-nav .nav-group{margin-bottom:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2) 0;overflow:hidden;transition:padding .2s ease-in-out,margin-bottom .2s ease-in-out}.main-nav .nav-group.collapsible.collapsed{padding:3px 0;margin-bottom:calc(var(--space-unit) * 1)}.main-nav .nav-group.active:not(.collapsible.collapsed){background-color:var(--color-weight-125)}.main-nav .nav-group .nav-list{margin:0;transition:max-height .2s ease-in-out,opacity .2s ease-in-out}.main-nav .nav-group .section-header{display:flex;align-items:flex-start;justify-content:space-between;padding-right:calc(var(--space-unit) * 4)}.main-nav .nav-group .nav-group-header{display:block;margin:0 0 var(--space-unit);font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-weight-700);text-transform:uppercase}.main-nav .nav-group .nav-link{display:flex;align-items:center;line-height:100%;border-right:2px solid transparent;font-size:var(--font-size-sm);padding:var(--space-unit) 0;transition:border .1s,color .1s}.main-nav .nav-group .nav-link a:link,.main-nav .nav-group .nav-link a:visited{color:var(--color-weight-700)}.main-nav .nav-group .nav-link:hover{color:var(--color-left-nav-text-hover);border-right-color:var(--color-weight-300)}.main-nav .nav-group .nav-link.active,.main-nav .nav-group .nav-link.active a:link,.main-nav .nav-group .nav-link.active a:visited{color:var(--color-text-active);border-right-color:var(--color-primary-500)}.main-nav .nav-group .nav-link.active clr-icon,.main-nav .nav-group .nav-link.active a:link clr-icon,.main-nav .nav-group .nav-link.active a:visited clr-icon{color:var(--color-primary-500)}.nav-list clr-icon{flex-shrink:0;margin-right:var(--space-unit)}.nav-group{-webkit-hyphens:auto;hyphens:auto}.nav-group,.nav-link{position:relative}.nav-group vdr-status-badge{left:27px;top:6px}.nav-group .section-header vdr-status-badge{left:20px}\n"] }]
         }], propDecorators: { displayMode: [{
                 type: Input
             }], itemClick: [{
@@ -9131,11 +9196,11 @@ class BreadcrumbComponent {
         this.parentBreadcrumb$ = this.breadcrumbService.breadcrumbs$.pipe(map(breadcrumbs => (1 < breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 2] : undefined)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
+            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\" [title]=\"breadcrumb.label\">\r\n            <a [routerLink]=\"breadcrumb.link\" *ngIf=\"!isLast\">{{ breadcrumb.label | translate }}</a>\r\n            <ng-container *ngIf=\"!isLast\"\r\n                ><clr-icon shape=\"caret right\" class=\"color-weight-400 mx-1\"></clr-icon\r\n            ></ng-container>\r\n            <ng-container *ngIf=\"isLast\">{{ breadcrumb.label | translate }}</ng-container>\r\n        </li>\r\n    </ul>\r\n    <ul class=\"breadcrumbs mobile\" *ngIf=\"parentBreadcrumb$ | async as parentBreadcrumb\">\r\n        <li>\r\n            <clr-icon shape=\"caret left\" class=\"color-weight-400 mr-1\"></clr-icon>\r\n            <a [routerLink]=\"parentBreadcrumb.link\">{{ parentBreadcrumb.label | translate }}</a>\r\n        </li>\r\n    </ul>\r\n</nav>\r\n", styles: [":host{display:block;padding:0;position:relative}.breadcrumbs{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;overflow-x:auto;max-width:100vw;line-height:100%;min-height:40px;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);font-size:var(--font-size-sm);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg)}.breadcrumbs li{display:inline-block;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.breadcrumbs li a:link,.breadcrumbs li a:visited{color:var(--color-weight-700)}.breadcrumbs li:last-child{font-weight:600}@media screen and (max-width: 992px){.breadcrumbs:not(.mobile){display:none}}@media screen and (min-width: 992px){.breadcrumbs.mobile{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: BreadcrumbService }]; } });
 class ChannelService {
@@ -9345,11 +9410,11 @@ class AppShellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$2.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo.svg\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mr-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <!--<vdr-page-title [value]=\"(pageTitle$ | async) || '' | translate\"></vdr-page-title>-->\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-right:1px solid var(--color-weight-150);z-index:1;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-left:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-right:auto;flex:1;display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo.svg\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <!--<vdr-page-title [value]=\"(pageTitle$ | async) || '' | translate\"></vdr-page-title>-->\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-right:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-left:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-right:auto;flex:1;display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo.svg\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mr-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <!--<vdr-page-title [value]=\"(pageTitle$ | async) || '' | translate\"></vdr-page-title>-->\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-right:1px solid var(--color-weight-150);z-index:1;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-left:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-right:auto;flex:1;display:block;width:100%}\n"] }]
+            args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\">\r\n    <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n        <div class=\"branding\">\r\n            <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"><img src=\"assets/logo.svg\" class=\"logo\" style=\"max-width: 100px\" /></a>\r\n            <div class=\"collapse-menu\">\r\n                <button class=\"\" (click)=\"collapseNav()\">\r\n                    <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <div class=\"mx-4\">\r\n            <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n        </div>\r\n        <div class=\"main-nav-container\">\r\n            <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"settings-nav-container\">\r\n            <hr />\r\n            <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n        </div>\r\n        <div class=\"mx-2\"></div>\r\n    </div>\r\n\r\n    <div class=\"surface\">\r\n        <div class=\"content-container\">\r\n            <div class=\"top-bar\">\r\n                <div class=\"expand-menu mr-1\">\r\n                    <button class=\"\" (click)=\"expandNav()\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"bars\">\r\n                          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\r\n                        </svg>\r\n                    </button>\r\n                </div>\r\n                <div>\r\n                    <vdr-breadcrumb></vdr-breadcrumb>\r\n                </div>\r\n                <div class=\"universal-search flex-spacer\"></div>\r\n                <div class=\"mx-1\">\r\n                    <vdr-alerts></vdr-alerts>\r\n                </div>\r\n                <div>\r\n                    <vdr-user-menu\r\n                        [userName]=\"userName$ | async\"\r\n                        [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n                        [availableLanguages]=\"availableLanguages\"\r\n                        (selectUiLanguage)=\"selectUiLanguage()\"\r\n                        (logOut)=\"logOut()\"\r\n                    ></vdr-user-menu>\r\n                </div>\r\n            </div>\r\n            <!--<vdr-page-title [value]=\"(pageTitle$ | async) || '' | translate\"></vdr-page-title>-->\r\n            <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-right:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-left:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-left:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-right:auto;flex:1;display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$2.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }]; } });
 class NotificationComponent {
@@ -10906,7 +10971,7 @@ class DynamicFormInputComponent {
         this.renderAsList = false;
         this.listItems = [];
         this.listId = 1;
-        this.listFormArray = new UntypedFormArray([]);
+        this.listFormArray = new FormArray([]);
         this.renderList$ = new Subject();
         this.destroy$ = new Subject();
     }
@@ -10960,8 +11025,9 @@ class DynamicFormInputComponent {
                             .subscribe(val => {
                             this.control.markAsTouched();
                             this.control.markAsDirty();
-                            this.onChange(val);
-                            this.control.patchValue(val, { emitEvent: false });
+                            const truthyValues = val.filter(notNullOrUndefined);
+                            this.onChange(truthyValues);
+                            this.control.patchValue(truthyValues, { emitEvent: false });
                         });
                         setTimeout(() => this.changeDetectorRef.markForCheck());
                     }
@@ -11121,7 +11187,7 @@ class DynamicFormInputComponent {
                 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\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n        >\r\n            <ng-container #listItem></ng-container>\r\n            <button\r\n                class=\"btn btn-link btn-sm btn-warning\"\r\n                *ngIf=\"!readonly\"\r\n                (click)=\"removeListItem(item)\"\r\n                [title]=\"'common.remove-item-from-list' | translate\"\r\n            >\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 [class.hidden]=\"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()\" *ngIf=\"!readonly\">\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}.drag-handle.hidden{display:none}.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"], dependencies: [{ kind: "directive", type: i1$4.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], 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\">\n    <ng-container #single></ng-container>\n</ng-container>\n<ng-template #list>\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\n        <div\n            class=\"list-item-row\"\n            *ngFor=\"let item of listItems; trackBy: trackById\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [cdkDragLockAxis]=\"'y'\"\n        >\n            <div class=\"flex-spacer pr-2\">\n                <ng-container #listItem></ng-container>\n            </div>\n            <button\n                class=\"button-small\"\n                *ngIf=\"!readonly\"\n                (click)=\"removeListItem(item)\"\n                [title]=\"'common.remove-item-from-list' | translate\"\n            >\n                <clr-icon shape=\"times\"></clr-icon>\n            </button>\n            <div class=\"drag-handle\" cdkDragHandle [class.hidden]=\"readonly\">\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n            </div>\n        </div>\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\" *ngIf=\"!readonly\">\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\n        </button>\n    </div>\n</ng-template>\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}.drag-handle{cursor:move}.drag-handle.hidden{display:none}.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"], dependencies: [{ kind: "directive", type: i1$4.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$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"] }, { kind: "directive", type: i4$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"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DynamicFormInputComponent, decorators: [{
             type: Component,
@@ -11131,7 +11197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                             useExisting: DynamicFormInputComponent,
                             multi: true,
                         },
-                    ], template: "<ng-container *ngIf=\"!renderAsList; else list\">\r\n    <ng-container #single></ng-container>\r\n</ng-container>\r\n<ng-template #list>\r\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\r\n        <div\r\n            class=\"list-item-row\"\r\n            *ngFor=\"let item of listItems; trackBy: trackById\"\r\n            cdkDrag\r\n            [cdkDragData]=\"item\"\r\n        >\r\n            <ng-container #listItem></ng-container>\r\n            <button\r\n                class=\"btn btn-link btn-sm btn-warning\"\r\n                *ngIf=\"!readonly\"\r\n                (click)=\"removeListItem(item)\"\r\n                [title]=\"'common.remove-item-from-list' | translate\"\r\n            >\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 [class.hidden]=\"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()\" *ngIf=\"!readonly\">\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}.drag-handle.hidden{display:none}.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"] }]
+                    ], template: "<ng-container *ngIf=\"!renderAsList; else list\">\n    <ng-container #single></ng-container>\n</ng-container>\n<ng-template #list>\n    <div class=\"list-container\" cdkDropList (cdkDropListDropped)=\"moveListItem($event)\">\n        <div\n            class=\"list-item-row\"\n            *ngFor=\"let item of listItems; trackBy: trackById\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [cdkDragLockAxis]=\"'y'\"\n        >\n            <div class=\"flex-spacer pr-2\">\n                <ng-container #listItem></ng-container>\n            </div>\n            <button\n                class=\"button-small\"\n                *ngIf=\"!readonly\"\n                (click)=\"removeListItem(item)\"\n                [title]=\"'common.remove-item-from-list' | translate\"\n            >\n                <clr-icon shape=\"times\"></clr-icon>\n            </button>\n            <div class=\"drag-handle\" cdkDragHandle [class.hidden]=\"readonly\">\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\n            </div>\n        </div>\n        <button class=\"btn btn-secondary btn-sm\" (click)=\"addListItem()\" *ngIf=\"!readonly\">\n            <clr-icon shape=\"plus\"></clr-icon> {{ 'common.add-item-to-list' | translate }}\n        </button>\n    </div>\n</ng-template>\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}.drag-handle{cursor:move}.drag-handle.hidden{display:none}.cdk-drag-placeholder{opacity:.1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .list-item-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: ComponentRegistryService }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }]; }, propDecorators: { def: [{
                 type: Input
             }], readonly: [{
@@ -11563,11 +11629,11 @@ class ChipComponent {
         this.iconClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:center;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:center;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
+            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], invert: [{
@@ -11602,14 +11668,17 @@ class CustomerGroupFormInputComponent {
             .pipe(startWith([]));
     }
     selectGroup(group) {
-        this.formControl.setValue(group.id);
+        this.formControl.setValue(group ?? undefined);
+    }
+    compareWith(o1, o2) {
+        return o1.id === o2.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CustomerGroupFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CustomerGroupFormInputComponent, selector: "vdr-customer-group-form-input", inputs: { readonly: "readonly" }, ngImport: i0, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [compareWith]=\"compareWith\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CustomerGroupFormInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-customer-group-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n" }]
+            args: [{ selector: 'vdr-customer-group-form-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    [items]=\"customerGroups$ | async\"\r\n    appendTo=\"body\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    bindValue=\"id\"\r\n    [compareWith]=\"compareWith\"\r\n    [clearable]=\"true\"\r\n    [searchable]=\"false\"\r\n    [ngModel]=\"formControl.value\"\r\n    (change)=\"selectGroup($event)\"\r\n>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <vdr-chip [colorFrom]=\"item.id\">{{ item.name }}</vdr-chip>\r\n    </ng-template>\r\n</ng-select>\r\n" }]
         }], ctorParameters: function () { return [{ type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
             }] } });
@@ -12130,7 +12199,7 @@ class FacetValueSelectorComponent {
                 return of([]);
             }
             return this.dataService.facet
-                .getFacetValues({ take: 10, filter: { name: { contains: term } } })
+                .getFacetValues({ take: 100, filter: { name: { contains: term } } })
                 .mapSingle(result => result.facetValues.items);
         }), tap(() => (this.searchLoading = false)));
         this.subscription = this.selectedIds$
@@ -12139,7 +12208,7 @@ class FacetValueSelectorComponent {
                 return of([]);
             }
             return this.dataService.facet
-                .getFacetValues({ take: 10, filter: { id: { in: ids } } }, 'cache-first')
+                .getFacetValues({ take: 100, filter: { id: { in: ids } } }, 'cache-first')
                 .mapSingle(result => result.facetValues.items);
         }))
             .subscribe(val => {
@@ -12801,12 +12870,13 @@ class ProductMultiSelectorFormInputComponent {
             size: 'xl',
             locals: {
                 mode: this.mode,
-                initialSelectionIds: this.formControl.value,
+                initialSelectionIds: this.formControl.value.map(item => typeof item === 'string' ? item : item.id),
             },
         })
             .subscribe(selection => {
             if (selection) {
                 this.formControl.setValue(selection.map(item => this.mode === 'product' ? item.productId : item.productVariantId));
+                this.formControl.markAsDirty();
                 this.changeDetector.markForCheck();
             }
         });
@@ -12906,7 +12976,7 @@ class ProductSelectorFormInputComponent {
         this.selection$ = this.formControl.valueChanges.pipe(startWith(this.formControl.value), switchMap(value => {
             if (Array.isArray(value) && 0 < value.length) {
                 return forkJoin(value.map(id => this.dataService.product
-                    .getProductVariant(id)
+                    .getProductVariant(this.getId(id))
                     .mapSingle(data => data.productVariant)));
             }
             return of([]);
@@ -12915,17 +12985,22 @@ class ProductSelectorFormInputComponent {
     addProductVariant(product) {
         const value = this.formControl.value;
         this.formControl.setValue([...new Set([...value, product.productVariantId])]);
+        this.formControl.markAsDirty();
     }
     removeProductVariant(id) {
         const value = this.formControl.value;
-        this.formControl.setValue(value.filter(_id => _id !== id));
+        this.formControl.setValue(value.map(this.getId).filter(_id => _id !== id));
+        this.formControl.markAsDirty();
+    }
+    getId(value) {
+        return typeof value === 'string' ? value : value.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductSelectorFormInputComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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=\"button-small\"\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}.thumb img{border-radius:var(--border-radius)}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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"] }]
+            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=\"button-small\"\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}.thumb img{border-radius:var(--border-radius)}.sku{color:var(--color-grey-400);font-size:smaller;line-height:1em}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }]; } });
 class AssetSearchInputComponent {
@@ -13004,11 +13079,11 @@ class AssetSearchInputComponent {
         return { label: item };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "<div class=\"flex center\">\r\n    <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)\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip\r\n                >\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\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-template>\r\n    </ng-select>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;width:100%}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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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)\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\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\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}@media screen and (min-width: 992px){:host{flex-direction:row;min-width:300px}}ng-select{width:100%}@media screen and (min-width: 992px){ng-select{min-width:300px}}.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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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: "<div class=\"flex center\">\r\n    <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)\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip\r\n                >\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\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ item.value }}</vdr-chip\r\n                >\r\n            </ng-container>\r\n        </ng-template>\r\n    </ng-select>\r\n    <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;width:100%}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"] }]
+            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)\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\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\"\r\n            >\r\n                <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                {{ item.value }}</vdr-chip\r\n            >\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}@media screen and (min-width: 992px){:host{flex-direction:row;min-width:300px}}ng-select{width:100%}@media screen and (min-width: 992px){ng-select{min-width:300px}}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
         }], propDecorators: { tags: [{
                 type: Input
             }], searchTermChange: [{
@@ -13194,7 +13269,7 @@ class FocalPointControlComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FocalPointControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: { visible: "visible", editable: "editable", width: "width", height: "height", fpx: "fpx", fpy: "fpy" }, outputs: { focalPointChange: "focalPointChange" }, host: { properties: { "style.width.px": "this.width", "style.height.px": "this.height" } }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, static: true }, { propertyName: "dot", first: true, predicate: ["dot"], descendants: true, static: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n<div class=\"frame\" #frame [style.width.px]=\"width\" [style.height.px]=\"height\">\r\n    <div\r\n        #dot\r\n        class=\"dot\"\r\n        [class.visible]=\"visible\"\r\n        [class.editable]=\"editable\"\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"!editable\"\r\n        cdkDragBoundary=\".frame\"\r\n        (cdkDragEnded)=\"onDragEnded($event)\"\r\n        [cdkDragFreeDragPosition]=\"initialPosition\"\r\n    ></div>\r\n</div>\r\n", styles: [":host{position:relative;display:block}.frame{position:absolute;top:0}.dot{width:20px;height:20px;border-radius:50%;border:2px solid white;position:absolute;visibility:hidden;transition:opacity .3s;box-shadow:0 0 4px 4px #0000006b}.dot.visible{visibility:visible;opacity:.7}.dot.editable{cursor:move;visibility:visible;opacity:1;animation:pulse;animation-duration:.5s;animation-iteration-count:4}@keyframes pulse{0%{border-color:#fff}50%{border-color:var(--color-warning-500)}to{border-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FocalPointControlComponent, decorators: [{
             type: Component,
@@ -13478,9 +13553,11 @@ class TabbedCustomFieldsComponent {
             'password-form-input',
             'select-form-input',
             'text-form-input',
+            'relation-form-input',
         ];
         return (customField.type === 'text' ||
             customField.type === 'localeText' ||
+            customField.type === 'relation' ||
             (customField.ui?.component && !smallComponents.includes(customField.ui?.component)));
     }
     groupByTabs(customFieldConfigs) {
@@ -13983,11 +14060,11 @@ class AssetGalleryComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;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"] }]
+            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { assets: [{
                 type: Input
             }], multiSelect: [{
@@ -14154,11 +14231,11 @@ class RelationCardComponent {
         this.remove = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RelationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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=\"button-small m-1\" (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=\"button-small m-1\" (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=\"button-small m-1\" (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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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=\"pl-1\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (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=\"button-small m-1\" (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=\"button-small m-1\" (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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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=\"button-small m-1\" (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=\"button-small m-1\" (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=\"button-small m-1\" (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"] }]
+            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=\"pl-1\">\r\n                <ng-container *ngTemplateOutlet=\"detailTemplate; context: { entity: entity }\"></ng-container>\r\n            </div>\r\n            <button *ngIf=\"!readonly\" class=\"button-small m-1\" (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=\"button-small m-1\" (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=\"button-small m-1\" (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"] }]
         }], propDecorators: { entity: [{
                 type: Input
             }], placeholderIcon: [{
@@ -14181,20 +14258,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                 args: [RelationCardDetailDirective, { read: TemplateRef }]
             }] } });
-const RELATION_ASSET_INPUT_QUERY = gql `
-    query RelationAssetInputQuery($id: ID!) {
-        asset(id: $id) {
-            ...Asset
-            tags {
-                ...Tag
-            }
-        }
-    }
-    ${ASSET_FRAGMENT}
-    ${TAG_FRAGMENT}
+const RELATION_ASSET_INPUT_QUERY = gql `
+    query RelationAssetInputQuery($id: ID!) {
+        asset(id: $id) {
+            ...Asset
+            tags {
+                ...Tag
+            }
+        }
+    }
+    ${ASSET_FRAGMENT}
+    ${TAG_FRAGMENT}
 `;
 class RelationAssetInputComponent {
-    static { this.id = 'asset-form-input'; }
     constructor(modalService, dataService) {
         this.modalService = modalService;
         this.dataService = dataService;
@@ -14238,11 +14314,11 @@ class RelationAssetInputComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RelationAssetInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: { readonly: "readonly", formControl: ["parentFormControl", "formControl"], config: "config" }, ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectAsset()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"image\"\r\n    [entity]=\"asset$ | async\"\r\n    [selectLabel]=\"'asset.select-asset' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-asset=\"entity\">\r\n        <img\r\n            class=\"preview\"\r\n            [title]=\"'asset.preview' | translate\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n            (click)=\"previewAsset(asset)\"\r\n        />\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-asset=\"entity\">\r\n        <div class=\"name\" [title]=\"asset.name\">\r\n            {{ asset.name }}\r\n        </div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n", styles: [".preview{cursor:pointer}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: { readonly: "readonly", formControl: ["parentFormControl", "formControl"], config: "config" }, ngImport: i0, template: "<vdr-relation-card\r\n    (select)=\"selectAsset()\"\r\n    (remove)=\"remove()\"\r\n    placeholderIcon=\"image\"\r\n    [entity]=\"asset$ | async\"\r\n    [selectLabel]=\"'asset.select-asset' | translate\"\r\n    [removable]=\"!config.list\"\r\n    [readonly]=\"readonly\"\r\n>\r\n    <ng-template vdrRelationCardPreview let-asset=\"entity\">\r\n        <img\r\n            class=\"preview\"\r\n            [title]=\"'asset.preview' | translate\"\r\n            [src]=\"asset | assetPreview: 'tiny'\"\r\n            (click)=\"previewAsset(asset)\"\r\n        />\r\n    </ng-template>\r\n    <ng-template vdrRelationCardDetail let-asset=\"entity\">\r\n        <div class=\"name\" [title]=\"asset.name\">\r\n            {{ asset.name }}\r\n        </div>\r\n    </ng-template>\r\n</vdr-relation-card>\r\n", styles: [".preview{cursor:pointer;border-radius:var(--border-radius)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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"] }]
+            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;border-radius:var(--border-radius)}.detail{flex:1;overflow:hidden}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }, { type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
             }], formControl: [{
@@ -14316,11 +14392,11 @@ class RelationProductInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RelationProductInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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/inventory', 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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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        <div>\r\n        <img class=\"thumb\" *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        </div>\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/inventory', 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)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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/inventory', 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"] }]
+            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        <div>\r\n        <img class=\"thumb\" *ngIf=\"product.featuredAsset\" [src]=\"product.featuredAsset | assetPreview: 'tiny'\" />\r\n        </div>\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/inventory', 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)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }, { type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
             }], parentFormControl: [{
@@ -14387,11 +14463,11 @@ class RelationProductVariantInputComponent {
         this.parentFormControl.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RelationProductVariantInputComponent, deps: [{ token: ModalService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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/inventory', 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"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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\n    (select)=\"selectProductVariant()\"\n    (remove)=\"remove()\"\n    placeholderIcon=\"library\"\n    [entity]=\"productVariant$ | async\"\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\n    [removable]=\"!config.list\"\n    [readonly]=\"readonly\"\n>\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\n        <div>\n            <img\n                class=\"thumb\"\n                *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\n                [src]=\"asset | assetPreview : 'tiny'\"\n            />\n        </div>\n        <ng-template #placeholder>\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\n            </div>\n        </ng-template>\n    </ng-template>\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\n        <a [routerLink]=\"['/catalog/inventory', variant.product.id, { tab: 'variants' }]\">{{\n            variant.name\n        }}</a>\n        <div class=\"\">{{ variant.sku }}</div>\n    </ng-template>\n</vdr-relation-card>\n\n<ng-template #selector let-select=\"select\">\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\n        <ng-template ng-option-tmp let-item=\"item\">\n            <img\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\n                [src]=\"asset | assetPreview : 32\"\n            />\n            {{ item.name }}\n        </ng-template>\n    </ng-select>\n</ng-template>\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3$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"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: RelationCardComponent, selector: "vdr-relation-card", inputs: ["entity", "placeholderIcon", "selectLabel", "readonly", "removable"], outputs: ["select", "remove"] }, { kind: "directive", type: RelationCardPreviewDirective, selector: "[vdrRelationCardPreview]" }, { kind: "directive", type: RelationCardDetailDirective, selector: "[vdrRelationCardDetail]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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/inventory', 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"] }]
+            args: [{ selector: 'vdr-relation-product-variant-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-relation-card\n    (select)=\"selectProductVariant()\"\n    (remove)=\"remove()\"\n    placeholderIcon=\"library\"\n    [entity]=\"productVariant$ | async\"\n    [selectLabel]=\"'catalog.select-product-variant' | translate\"\n    [removable]=\"!config.list\"\n    [readonly]=\"readonly\"\n>\n    <ng-template vdrRelationCardPreview let-variant=\"entity\">\n        <div>\n            <img\n                class=\"thumb\"\n                *ngIf=\"variant.featuredAsset || variant.product.featuredAsset as asset; else placeholder\"\n                [src]=\"asset | assetPreview : 'tiny'\"\n            />\n        </div>\n        <ng-template #placeholder>\n            <div class=\"placeholder\" *ngIf=\"!variant.featuredAsset\">\n                <clr-icon shape=\"image\" size=\"50\"></clr-icon>\n            </div>\n        </ng-template>\n    </ng-template>\n    <ng-template vdrRelationCardDetail let-variant=\"entity\">\n        <a [routerLink]=\"['/catalog/inventory', variant.product.id, { tab: 'variants' }]\">{{\n            variant.name\n        }}</a>\n        <div class=\"\">{{ variant.sku }}</div>\n    </ng-template>\n</vdr-relation-card>\n\n<ng-template #selector let-select=\"select\">\n    <ng-select [items]=\"results$ | async\" [typeahead]=\"searchTerm$\" appendTo=\"body\" (change)=\"select($event)\">\n        <ng-template ng-option-tmp let-item=\"item\">\n            <img\n                *ngIf=\"item.featuredAsset || item.product.featuredAsset as asset\"\n                [src]=\"asset | assetPreview : 32\"\n            />\n            {{ item.name }}\n        </ng-template>\n    </ng-select>\n</ng-template>\n", styles: [".placeholder{color:var(--color-grey-300)}.thumb{min-width:50px;object-fit:contain;border-radius:var(--border-radius)}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }, { type: DataService }]; }, propDecorators: { readonly: [{
                 type: Input
             }], parentFormControl: [{
@@ -14410,7 +14486,6 @@ class RelationCustomerInputComponent {
     constructor(modalService, dataService) {
         this.modalService = modalService;
         this.dataService = dataService;
-        this.searchControl = new UntypedFormControl('');
         this.searchTerm$ = new Subject();
     }
     ngOnInit() {
@@ -14561,11 +14636,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
 class RelationFormInputComponent {
     static { this.id = 'relation-form-input'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RelationFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: ["readonly", "parentFormControl", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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;border-radius:var(--border-radius)}\n"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: RelationAssetInputComponent, selector: "vdr-relation-asset-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationProductInputComponent, selector: "vdr-relation-product-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationProductVariantInputComponent, selector: "vdr-relation-product-variant-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationCustomerInputComponent, selector: "vdr-relation-customer-input", inputs: ["readonly", "parentFormControl", "config"] }, { kind: "component", type: RelationGenericInputComponent, selector: "vdr-relation-generic-input", inputs: ["readonly", "parentFormControl", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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        <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"] }]
+            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;border-radius:var(--border-radius)}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }] } });
@@ -14638,9 +14713,10 @@ const iframeNode = {
                         name: node.name,
                         referrerpolicy: node.referrerPolicy,
                         src: node.src,
-                        srcdoc: node.srcdoc || undefined,
                         title: node.title ?? '',
                         width: node.width,
+                        // Note: we do not allow the `srcdoc` attribute to be
+                        // set as it presents an XSS attack vector
                     };
                     if (node.sandbox.length) {
                         attrs.sandbox = node.sandbox;
@@ -14652,7 +14728,7 @@ const iframeNode = {
         },
     ],
     toDOM(node) {
-        return ['iframe', { ...node.attrs }];
+        return ['iframe', { ...node.attrs, sandbox: 'allow-scripts allow-same-origin' }];
     },
 };
 const iframeNodeView = (node, view, getPos, decorations) => {
@@ -15716,6 +15792,11 @@ class ProsemirrorService {
             marks: schema.spec.marks,
         });
         this.enabled = true;
+        /**
+         * This is a Document used for processing incoming text. It ensures that malicious HTML is not executed by the
+         * actual document that is attached to the browser DOM, which could cause XSS attacks.
+         */
+        this.detachedDoc = null;
     }
     createEditorView(options) {
         this.editorView = new EditorView(options.element, {
@@ -15774,7 +15855,8 @@ class ProsemirrorService {
         }
     }
     getStateFromText(text) {
-        const div = document.createElement('div');
+        const doc = this.getDetachedDoc();
+        const div = doc.createElement('div');
         div.innerHTML = text ?? '';
         return EditorState.create({
             doc: DOMParser.fromSchema(this.mySchema).parse(div),
@@ -15782,7 +15864,8 @@ class ProsemirrorService {
         });
     }
     getTextFromState(state) {
-        const div = document.createElement('div');
+        const doc = this.getDetachedDoc();
+        const div = doc.createElement('div');
         const fragment = DOMSerializer.fromSchema(this.mySchema).serializeFragment(state.doc.content);
         div.appendChild(fragment);
         return div.innerHTML;
@@ -15815,6 +15898,12 @@ class ProsemirrorService {
             },
         }));
     }
+    getDetachedDoc() {
+        if (!this.detachedDoc) {
+            this.detachedDoc = document.implementation.createHTMLDocument();
+        }
+        return this.detachedDoc;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProsemirrorService, deps: [{ token: i0.Injector }, { token: ContextMenuService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProsemirrorService }); }
 }
@@ -17050,6 +17139,11 @@ class DataTableFiltersComponent {
     set customComponentHost(content) {
         this._customComponentHost = content;
     }
+    onFKeyPress(event) {
+        if (!this.dropdown.isOpen && this.state === 'new') {
+            this.dropdown.toggleOpen();
+        }
+    }
     constructor(i18nService, changeDetectorRef) {
         this.i18nService = i18nService;
         this.changeDetectorRef = changeDetectorRef;
@@ -17196,11 +17290,11 @@ class DataTableFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFiltersComponent, deps: [{ token: I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }}</span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <div *ngIf=\"selectedFilter\" class=\"\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }}</span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <div *ngIf=\"selectedFilter\" class=\"\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}\n"] }]
+            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: I18nService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filters: [{
                 type: Input
             }], filterWithValue: [{
@@ -17211,6 +17305,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
             }], customComponentHost: [{
                 type: ViewChild,
                 args: ['customComponentHost', { static: false, read: CustomFilterComponentDirective }]
+            }], onFKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown.f', ['$event']]
             }] } });
 class DataTableColumnPickerComponent {
@@ -17232,7 +17329,7 @@ class DataTableColumnPickerComponent {
         this.resetColumns.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$4.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1$4.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1$4.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$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"] }, { kind: "directive", type: i4$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"] }, { kind: "directive", type: i4$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableColumnPickerComponent, decorators: [{
             type: Component,
@@ -18912,6 +19009,7 @@ function calculateDistance(x1, x2) {
 class ChartComponent {
     constructor() {
         this.entries = [];
+        this.options = {};
     }
     ngOnInit() {
         this.chart = new LineChart(this.chartDivRef.nativeElement, this.entriesToLineChartData(this.entries ?? []), {
@@ -18930,6 +19028,7 @@ class ChartComponent {
                 offset: 1,
             },
             plugins: [tooltipPlugin()],
+            ...this.options,
         });
         this.chart.on('draw', data => {
             if (data.type === 'line' || data.type === 'area') {
@@ -18982,13 +19081,15 @@ class ChartComponent {
         return { labels, series };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChartComponent, selector: "vdr-chart", inputs: { entries: "entries" }, viewQueries: [{ propertyName: "chartDivRef", first: true, predicate: ["chartDiv"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"chart\" style=\"height: 20vh; min-height: 300px;\" #chartDiv></div>\r\n", styles: ["::ng-deep .ct-label{fill:#0006;color:#0006;font-size:.75rem;line-height:1}::ng-deep .ct-chart-line .ct-label,::ng-deep .ct-chart-bar .ct-label{display:flex}::ng-deep .ct-chart-pie .ct-label,::ng-deep .ct-chart-donut .ct-label{dominant-baseline:central}::ng-deep .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-vertical.ct-start{align-items:flex-end;justify-content:flex-end;text-align:right}::ng-deep .ct-label.ct-vertical.ct-end{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:center;text-align:center}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:center;text-align:center}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{align-items:center;justify-content:flex-end;text-align:right}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{align-items:center;justify-content:flex-start;text-align:left}::ng-deep .ct-grid{stroke:#0003;stroke-width:1px;stroke-dasharray:2px}::ng-deep .ct-grid-background{fill:none}::ng-deep .ct-point{stroke-width:10px;stroke-linecap:round}::ng-deep .ct-line{fill:none;stroke-width:2px}::ng-deep .ct-area{stroke:none;fill-opacity:.5}::ng-deep .ct-bar{fill:none;stroke-width:10px}::ng-deep .ct-slice-donut{fill:none;stroke-width:60px}::ng-deep .ct-series-a .ct-point,::ng-deep .ct-series-a .ct-line,::ng-deep .ct-series-a .ct-bar,::ng-deep .ct-series-a .ct-slice-donut{stroke:var(--color-primary-300)}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:var(--color-primary-300)}::ng-deep .ct-series-b .ct-point,::ng-deep .ct-series-b .ct-line,::ng-deep .ct-series-b .ct-bar,::ng-deep .ct-series-b .ct-slice-donut{stroke:var(--color-accent-300)}::ng-deep .ct-series-b .ct-slice-pie,::ng-deep .ct-series-b .ct-area{fill:var(--color-accent-300)}::ng-deep .ct-series-c .ct-point,::ng-deep .ct-series-c .ct-line,::ng-deep .ct-series-c .ct-bar,::ng-deep .ct-series-c .ct-slice-donut{stroke:var(--color-primary-800)}::ng-deep .ct-series-c .ct-slice-pie,::ng-deep .ct-series-c .ct-area{fill:var(--color-primary-800)}::ng-deep .ct-series-d .ct-point,::ng-deep .ct-series-d .ct-line,::ng-deep .ct-series-d .ct-bar,::ng-deep .ct-series-d .ct-slice-donut{stroke:var(--color-accent-800)}::ng-deep .ct-series-d .ct-slice-pie,::ng-deep .ct-series-d .ct-area{fill:var(--color-accent-800)}::ng-deep .ct-series-e .ct-point,::ng-deep .ct-series-e .ct-line,::ng-deep .ct-series-e .ct-bar,::ng-deep .ct-series-e .ct-slice-donut{stroke:#453d3f}::ng-deep .ct-series-e .ct-slice-pie,::ng-deep .ct-series-e .ct-area{fill:#453d3f}::ng-deep .ct-series-f .ct-point,::ng-deep .ct-series-f .ct-line,::ng-deep .ct-series-f .ct-bar,::ng-deep .ct-series-f .ct-slice-donut{stroke:#59922b}::ng-deep .ct-series-f .ct-slice-pie,::ng-deep .ct-series-f .ct-area{fill:#59922b}::ng-deep .ct-series-g .ct-point,::ng-deep .ct-series-g .ct-line,::ng-deep .ct-series-g .ct-bar,::ng-deep .ct-series-g .ct-slice-donut{stroke:#0544d3}::ng-deep .ct-series-g .ct-slice-pie,::ng-deep .ct-series-g .ct-area{fill:#0544d3}::ng-deep .ct-series-h .ct-point,::ng-deep .ct-series-h .ct-line,::ng-deep .ct-series-h .ct-bar,::ng-deep .ct-series-h .ct-slice-donut{stroke:#6b0392}::ng-deep .ct-series-h .ct-slice-pie,::ng-deep .ct-series-h .ct-area{fill:#6b0392}::ng-deep .ct-series-i .ct-point,::ng-deep .ct-series-i .ct-line,::ng-deep .ct-series-i .ct-bar,::ng-deep .ct-series-i .ct-slice-donut{stroke:#e6805e}::ng-deep .ct-series-i .ct-slice-pie,::ng-deep .ct-series-i .ct-area{fill:#e6805e}::ng-deep .ct-series-j .ct-point,::ng-deep .ct-series-j .ct-line,::ng-deep .ct-series-j .ct-bar,::ng-deep .ct-series-j .ct-slice-donut{stroke:#dda458}::ng-deep .ct-series-j .ct-slice-pie,::ng-deep .ct-series-j .ct-area{fill:#dda458}::ng-deep .ct-series-k .ct-point,::ng-deep .ct-series-k .ct-line,::ng-deep .ct-series-k .ct-bar,::ng-deep .ct-series-k .ct-slice-donut{stroke:#eacf7d}::ng-deep .ct-series-k .ct-slice-pie,::ng-deep .ct-series-k .ct-area{fill:#eacf7d}::ng-deep .ct-series-l .ct-point,::ng-deep .ct-series-l .ct-line,::ng-deep .ct-series-l .ct-bar,::ng-deep .ct-series-l .ct-slice-donut{stroke:#86797d}::ng-deep .ct-series-l .ct-slice-pie,::ng-deep .ct-series-l .ct-area{fill:#86797d}::ng-deep .ct-series-m .ct-point,::ng-deep .ct-series-m .ct-line,::ng-deep .ct-series-m .ct-bar,::ng-deep .ct-series-m .ct-slice-donut{stroke:#b2c326}::ng-deep .ct-series-m .ct-slice-pie,::ng-deep .ct-series-m .ct-area{fill:#b2c326}::ng-deep .ct-series-n .ct-point,::ng-deep .ct-series-n .ct-line,::ng-deep .ct-series-n .ct-bar,::ng-deep .ct-series-n .ct-slice-donut{stroke:#6188e2}::ng-deep .ct-series-n .ct-slice-pie,::ng-deep .ct-series-n .ct-area{fill:#6188e2}::ng-deep .ct-series-o .ct-point,::ng-deep .ct-series-o .ct-line,::ng-deep .ct-series-o .ct-bar,::ng-deep .ct-series-o .ct-slice-donut{stroke:#a748ca}::ng-deep .ct-series-o .ct-slice-pie,::ng-deep .ct-series-o .ct-area{fill:#a748ca}::ng-deep .ct-square{display:block;position:relative;width:100%}::ng-deep .ct-square:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:100%}::ng-deep .ct-square:after{content:\"\";display:table;clear:both}::ng-deep .ct-square>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-second{display:block;position:relative;width:100%}::ng-deep .ct-minor-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:93.75%}::ng-deep .ct-minor-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-second{display:block;position:relative;width:100%}::ng-deep .ct-major-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:88.8888888889%}::ng-deep .ct-major-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-third{display:block;position:relative;width:100%}::ng-deep .ct-minor-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:83.3333333333%}::ng-deep .ct-minor-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-third{display:block;position:relative;width:100%}::ng-deep .ct-major-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:80%}::ng-deep .ct-major-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fourth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fourth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:75%}::ng-deep .ct-perfect-fourth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fifth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fifth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:66.6666666667%}::ng-deep .ct-perfect-fifth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-sixth{display:block;position:relative;width:100%}::ng-deep .ct-minor-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:62.5%}::ng-deep .ct-minor-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-golden-section{display:block;position:relative;width:100%}::ng-deep .ct-golden-section:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:61.804697157%}::ng-deep .ct-golden-section:after{content:\"\";display:table;clear:both}::ng-deep .ct-golden-section>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-sixth{display:block;position:relative;width:100%}::ng-deep .ct-major-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:60%}::ng-deep .ct-major-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-seventh{display:block;position:relative;width:100%}::ng-deep .ct-minor-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:56.25%}::ng-deep .ct-minor-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-seventh{display:block;position:relative;width:100%}::ng-deep .ct-major-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:53.3333333333%}::ng-deep .ct-major-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-octave{display:block;position:relative;width:100%}::ng-deep .ct-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:50%}::ng-deep .ct-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-tenth{display:block;position:relative;width:100%}::ng-deep .ct-major-tenth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:40%}::ng-deep .ct-major-tenth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-eleventh{display:block;position:relative;width:100%}::ng-deep .ct-major-eleventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:37.5%}::ng-deep .ct-major-eleventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-twelfth{display:block;position:relative;width:100%}::ng-deep .ct-major-twelfth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:33.3333333333%}::ng-deep .ct-major-twelfth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-double-octave{display:block;position:relative;width:100%}::ng-deep .ct-double-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:25%}::ng-deep .ct-double-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-double-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:url(#gradient)}::ng-deep .ct-point{opacity:0;transition:opacity .1s}::ng-deep .chartist-tooltip{position:absolute;border-radius:var(--border-radius);border:1px solid var(--color-weight-100);padding:4px;opacity:0;transition:opacity .1s,top .1s,left .1s;font-size:12px;background:var(--color-component-bg-100);box-shadow:0 2px 4px #0000000d;text-align:center}::ng-deep .chartist-tooltip.tooltip-show{opacity:.9}::ng-deep .ct-tooltip-hover{opacity:1}::ng-deep .tooltip-date{color:var(--color-text-200)}::ng-deep .tooltip-value{color:var(--color-primary-600);font-size:14px;text-align:center}:host{display:block;padding-bottom:28px}#chart{position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChartComponent, selector: "vdr-chart", inputs: { entries: "entries", options: "options" }, viewQueries: [{ propertyName: "chartDivRef", first: true, predicate: ["chartDiv"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"chart\" style=\"height: 20vh; min-height: 300px;\" #chartDiv></div>\r\n", styles: ["::ng-deep .ct-label{fill:#0006;color:#0006;font-size:.75rem;line-height:1}::ng-deep .ct-chart-line .ct-label,::ng-deep .ct-chart-bar .ct-label{display:flex}::ng-deep .ct-chart-pie .ct-label,::ng-deep .ct-chart-donut .ct-label{dominant-baseline:central}::ng-deep .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-vertical.ct-start{align-items:flex-end;justify-content:flex-end;text-align:right}::ng-deep .ct-label.ct-vertical.ct-end{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:center;text-align:center}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:center;text-align:center}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{align-items:center;justify-content:flex-end;text-align:right}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{align-items:center;justify-content:flex-start;text-align:left}::ng-deep .ct-grid{stroke:#0003;stroke-width:1px;stroke-dasharray:2px}::ng-deep .ct-grid-background{fill:none}::ng-deep .ct-point{stroke-width:10px;stroke-linecap:round}::ng-deep .ct-line{fill:none;stroke-width:2px}::ng-deep .ct-area{stroke:none;fill-opacity:.5}::ng-deep .ct-bar{fill:none;stroke-width:10px}::ng-deep .ct-slice-donut{fill:none;stroke-width:60px}::ng-deep .ct-series-a .ct-point,::ng-deep .ct-series-a .ct-line,::ng-deep .ct-series-a .ct-bar,::ng-deep .ct-series-a .ct-slice-donut{stroke:var(--color-primary-300)}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:var(--color-primary-300)}::ng-deep .ct-series-b .ct-point,::ng-deep .ct-series-b .ct-line,::ng-deep .ct-series-b .ct-bar,::ng-deep .ct-series-b .ct-slice-donut{stroke:var(--color-accent-300)}::ng-deep .ct-series-b .ct-slice-pie,::ng-deep .ct-series-b .ct-area{fill:var(--color-accent-300)}::ng-deep .ct-series-c .ct-point,::ng-deep .ct-series-c .ct-line,::ng-deep .ct-series-c .ct-bar,::ng-deep .ct-series-c .ct-slice-donut{stroke:var(--color-primary-800)}::ng-deep .ct-series-c .ct-slice-pie,::ng-deep .ct-series-c .ct-area{fill:var(--color-primary-800)}::ng-deep .ct-series-d .ct-point,::ng-deep .ct-series-d .ct-line,::ng-deep .ct-series-d .ct-bar,::ng-deep .ct-series-d .ct-slice-donut{stroke:var(--color-accent-800)}::ng-deep .ct-series-d .ct-slice-pie,::ng-deep .ct-series-d .ct-area{fill:var(--color-accent-800)}::ng-deep .ct-series-e .ct-point,::ng-deep .ct-series-e .ct-line,::ng-deep .ct-series-e .ct-bar,::ng-deep .ct-series-e .ct-slice-donut{stroke:#453d3f}::ng-deep .ct-series-e .ct-slice-pie,::ng-deep .ct-series-e .ct-area{fill:#453d3f}::ng-deep .ct-series-f .ct-point,::ng-deep .ct-series-f .ct-line,::ng-deep .ct-series-f .ct-bar,::ng-deep .ct-series-f .ct-slice-donut{stroke:#59922b}::ng-deep .ct-series-f .ct-slice-pie,::ng-deep .ct-series-f .ct-area{fill:#59922b}::ng-deep .ct-series-g .ct-point,::ng-deep .ct-series-g .ct-line,::ng-deep .ct-series-g .ct-bar,::ng-deep .ct-series-g .ct-slice-donut{stroke:#0544d3}::ng-deep .ct-series-g .ct-slice-pie,::ng-deep .ct-series-g .ct-area{fill:#0544d3}::ng-deep .ct-series-h .ct-point,::ng-deep .ct-series-h .ct-line,::ng-deep .ct-series-h .ct-bar,::ng-deep .ct-series-h .ct-slice-donut{stroke:#6b0392}::ng-deep .ct-series-h .ct-slice-pie,::ng-deep .ct-series-h .ct-area{fill:#6b0392}::ng-deep .ct-series-i .ct-point,::ng-deep .ct-series-i .ct-line,::ng-deep .ct-series-i .ct-bar,::ng-deep .ct-series-i .ct-slice-donut{stroke:#e6805e}::ng-deep .ct-series-i .ct-slice-pie,::ng-deep .ct-series-i .ct-area{fill:#e6805e}::ng-deep .ct-series-j .ct-point,::ng-deep .ct-series-j .ct-line,::ng-deep .ct-series-j .ct-bar,::ng-deep .ct-series-j .ct-slice-donut{stroke:#dda458}::ng-deep .ct-series-j .ct-slice-pie,::ng-deep .ct-series-j .ct-area{fill:#dda458}::ng-deep .ct-series-k .ct-point,::ng-deep .ct-series-k .ct-line,::ng-deep .ct-series-k .ct-bar,::ng-deep .ct-series-k .ct-slice-donut{stroke:#eacf7d}::ng-deep .ct-series-k .ct-slice-pie,::ng-deep .ct-series-k .ct-area{fill:#eacf7d}::ng-deep .ct-series-l .ct-point,::ng-deep .ct-series-l .ct-line,::ng-deep .ct-series-l .ct-bar,::ng-deep .ct-series-l .ct-slice-donut{stroke:#86797d}::ng-deep .ct-series-l .ct-slice-pie,::ng-deep .ct-series-l .ct-area{fill:#86797d}::ng-deep .ct-series-m .ct-point,::ng-deep .ct-series-m .ct-line,::ng-deep .ct-series-m .ct-bar,::ng-deep .ct-series-m .ct-slice-donut{stroke:#b2c326}::ng-deep .ct-series-m .ct-slice-pie,::ng-deep .ct-series-m .ct-area{fill:#b2c326}::ng-deep .ct-series-n .ct-point,::ng-deep .ct-series-n .ct-line,::ng-deep .ct-series-n .ct-bar,::ng-deep .ct-series-n .ct-slice-donut{stroke:#6188e2}::ng-deep .ct-series-n .ct-slice-pie,::ng-deep .ct-series-n .ct-area{fill:#6188e2}::ng-deep .ct-series-o .ct-point,::ng-deep .ct-series-o .ct-line,::ng-deep .ct-series-o .ct-bar,::ng-deep .ct-series-o .ct-slice-donut{stroke:#a748ca}::ng-deep .ct-series-o .ct-slice-pie,::ng-deep .ct-series-o .ct-area{fill:#a748ca}::ng-deep .ct-square{display:block;position:relative;width:100%}::ng-deep .ct-square:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:100%}::ng-deep .ct-square:after{content:\"\";display:table;clear:both}::ng-deep .ct-square>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-second{display:block;position:relative;width:100%}::ng-deep .ct-minor-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:93.75%}::ng-deep .ct-minor-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-second{display:block;position:relative;width:100%}::ng-deep .ct-major-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:88.8888888889%}::ng-deep .ct-major-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-third{display:block;position:relative;width:100%}::ng-deep .ct-minor-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:83.3333333333%}::ng-deep .ct-minor-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-third{display:block;position:relative;width:100%}::ng-deep .ct-major-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:80%}::ng-deep .ct-major-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fourth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fourth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:75%}::ng-deep .ct-perfect-fourth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fifth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fifth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:66.6666666667%}::ng-deep .ct-perfect-fifth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-sixth{display:block;position:relative;width:100%}::ng-deep .ct-minor-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:62.5%}::ng-deep .ct-minor-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-golden-section{display:block;position:relative;width:100%}::ng-deep .ct-golden-section:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:61.804697157%}::ng-deep .ct-golden-section:after{content:\"\";display:table;clear:both}::ng-deep .ct-golden-section>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-sixth{display:block;position:relative;width:100%}::ng-deep .ct-major-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:60%}::ng-deep .ct-major-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-seventh{display:block;position:relative;width:100%}::ng-deep .ct-minor-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:56.25%}::ng-deep .ct-minor-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-seventh{display:block;position:relative;width:100%}::ng-deep .ct-major-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:53.3333333333%}::ng-deep .ct-major-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-octave{display:block;position:relative;width:100%}::ng-deep .ct-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:50%}::ng-deep .ct-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-tenth{display:block;position:relative;width:100%}::ng-deep .ct-major-tenth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:40%}::ng-deep .ct-major-tenth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-eleventh{display:block;position:relative;width:100%}::ng-deep .ct-major-eleventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:37.5%}::ng-deep .ct-major-eleventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-twelfth{display:block;position:relative;width:100%}::ng-deep .ct-major-twelfth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:33.3333333333%}::ng-deep .ct-major-twelfth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-double-octave{display:block;position:relative;width:100%}::ng-deep .ct-double-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:25%}::ng-deep .ct-double-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-double-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:url(#gradient)}::ng-deep .ct-point{opacity:0;transition:opacity .1s}::ng-deep .chartist-tooltip{position:absolute;border-radius:var(--border-radius);border:1px solid var(--color-weight-100);padding:4px;opacity:0;transition:opacity .1s,top .1s,left .1s;font-size:12px;background:var(--color-component-bg-100);box-shadow:0 2px 4px #0000000d;text-align:center}::ng-deep .chartist-tooltip.tooltip-show{opacity:.9}::ng-deep .ct-tooltip-hover{opacity:1}::ng-deep .tooltip-date{color:var(--color-text-200)}::ng-deep .tooltip-value{color:var(--color-primary-600);font-size:14px;text-align:center}:host{display:block;padding-bottom:28px}#chart{position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"chart\" style=\"height: 20vh; min-height: 300px;\" #chartDiv></div>\r\n", styles: ["::ng-deep .ct-label{fill:#0006;color:#0006;font-size:.75rem;line-height:1}::ng-deep .ct-chart-line .ct-label,::ng-deep .ct-chart-bar .ct-label{display:flex}::ng-deep .ct-chart-pie .ct-label,::ng-deep .ct-chart-donut .ct-label{dominant-baseline:central}::ng-deep .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-label.ct-vertical.ct-start{align-items:flex-end;justify-content:flex-end;text-align:right}::ng-deep .ct-label.ct-vertical.ct-end{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:center;text-align:center}::ng-deep .ct-chart-bar .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:center;text-align:center}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start{align-items:flex-end;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end{align-items:flex-start;justify-content:flex-start;text-align:left}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start{align-items:center;justify-content:flex-end;text-align:right}::ng-deep .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end{align-items:center;justify-content:flex-start;text-align:left}::ng-deep .ct-grid{stroke:#0003;stroke-width:1px;stroke-dasharray:2px}::ng-deep .ct-grid-background{fill:none}::ng-deep .ct-point{stroke-width:10px;stroke-linecap:round}::ng-deep .ct-line{fill:none;stroke-width:2px}::ng-deep .ct-area{stroke:none;fill-opacity:.5}::ng-deep .ct-bar{fill:none;stroke-width:10px}::ng-deep .ct-slice-donut{fill:none;stroke-width:60px}::ng-deep .ct-series-a .ct-point,::ng-deep .ct-series-a .ct-line,::ng-deep .ct-series-a .ct-bar,::ng-deep .ct-series-a .ct-slice-donut{stroke:var(--color-primary-300)}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:var(--color-primary-300)}::ng-deep .ct-series-b .ct-point,::ng-deep .ct-series-b .ct-line,::ng-deep .ct-series-b .ct-bar,::ng-deep .ct-series-b .ct-slice-donut{stroke:var(--color-accent-300)}::ng-deep .ct-series-b .ct-slice-pie,::ng-deep .ct-series-b .ct-area{fill:var(--color-accent-300)}::ng-deep .ct-series-c .ct-point,::ng-deep .ct-series-c .ct-line,::ng-deep .ct-series-c .ct-bar,::ng-deep .ct-series-c .ct-slice-donut{stroke:var(--color-primary-800)}::ng-deep .ct-series-c .ct-slice-pie,::ng-deep .ct-series-c .ct-area{fill:var(--color-primary-800)}::ng-deep .ct-series-d .ct-point,::ng-deep .ct-series-d .ct-line,::ng-deep .ct-series-d .ct-bar,::ng-deep .ct-series-d .ct-slice-donut{stroke:var(--color-accent-800)}::ng-deep .ct-series-d .ct-slice-pie,::ng-deep .ct-series-d .ct-area{fill:var(--color-accent-800)}::ng-deep .ct-series-e .ct-point,::ng-deep .ct-series-e .ct-line,::ng-deep .ct-series-e .ct-bar,::ng-deep .ct-series-e .ct-slice-donut{stroke:#453d3f}::ng-deep .ct-series-e .ct-slice-pie,::ng-deep .ct-series-e .ct-area{fill:#453d3f}::ng-deep .ct-series-f .ct-point,::ng-deep .ct-series-f .ct-line,::ng-deep .ct-series-f .ct-bar,::ng-deep .ct-series-f .ct-slice-donut{stroke:#59922b}::ng-deep .ct-series-f .ct-slice-pie,::ng-deep .ct-series-f .ct-area{fill:#59922b}::ng-deep .ct-series-g .ct-point,::ng-deep .ct-series-g .ct-line,::ng-deep .ct-series-g .ct-bar,::ng-deep .ct-series-g .ct-slice-donut{stroke:#0544d3}::ng-deep .ct-series-g .ct-slice-pie,::ng-deep .ct-series-g .ct-area{fill:#0544d3}::ng-deep .ct-series-h .ct-point,::ng-deep .ct-series-h .ct-line,::ng-deep .ct-series-h .ct-bar,::ng-deep .ct-series-h .ct-slice-donut{stroke:#6b0392}::ng-deep .ct-series-h .ct-slice-pie,::ng-deep .ct-series-h .ct-area{fill:#6b0392}::ng-deep .ct-series-i .ct-point,::ng-deep .ct-series-i .ct-line,::ng-deep .ct-series-i .ct-bar,::ng-deep .ct-series-i .ct-slice-donut{stroke:#e6805e}::ng-deep .ct-series-i .ct-slice-pie,::ng-deep .ct-series-i .ct-area{fill:#e6805e}::ng-deep .ct-series-j .ct-point,::ng-deep .ct-series-j .ct-line,::ng-deep .ct-series-j .ct-bar,::ng-deep .ct-series-j .ct-slice-donut{stroke:#dda458}::ng-deep .ct-series-j .ct-slice-pie,::ng-deep .ct-series-j .ct-area{fill:#dda458}::ng-deep .ct-series-k .ct-point,::ng-deep .ct-series-k .ct-line,::ng-deep .ct-series-k .ct-bar,::ng-deep .ct-series-k .ct-slice-donut{stroke:#eacf7d}::ng-deep .ct-series-k .ct-slice-pie,::ng-deep .ct-series-k .ct-area{fill:#eacf7d}::ng-deep .ct-series-l .ct-point,::ng-deep .ct-series-l .ct-line,::ng-deep .ct-series-l .ct-bar,::ng-deep .ct-series-l .ct-slice-donut{stroke:#86797d}::ng-deep .ct-series-l .ct-slice-pie,::ng-deep .ct-series-l .ct-area{fill:#86797d}::ng-deep .ct-series-m .ct-point,::ng-deep .ct-series-m .ct-line,::ng-deep .ct-series-m .ct-bar,::ng-deep .ct-series-m .ct-slice-donut{stroke:#b2c326}::ng-deep .ct-series-m .ct-slice-pie,::ng-deep .ct-series-m .ct-area{fill:#b2c326}::ng-deep .ct-series-n .ct-point,::ng-deep .ct-series-n .ct-line,::ng-deep .ct-series-n .ct-bar,::ng-deep .ct-series-n .ct-slice-donut{stroke:#6188e2}::ng-deep .ct-series-n .ct-slice-pie,::ng-deep .ct-series-n .ct-area{fill:#6188e2}::ng-deep .ct-series-o .ct-point,::ng-deep .ct-series-o .ct-line,::ng-deep .ct-series-o .ct-bar,::ng-deep .ct-series-o .ct-slice-donut{stroke:#a748ca}::ng-deep .ct-series-o .ct-slice-pie,::ng-deep .ct-series-o .ct-area{fill:#a748ca}::ng-deep .ct-square{display:block;position:relative;width:100%}::ng-deep .ct-square:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:100%}::ng-deep .ct-square:after{content:\"\";display:table;clear:both}::ng-deep .ct-square>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-second{display:block;position:relative;width:100%}::ng-deep .ct-minor-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:93.75%}::ng-deep .ct-minor-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-second{display:block;position:relative;width:100%}::ng-deep .ct-major-second:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:88.8888888889%}::ng-deep .ct-major-second:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-second>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-third{display:block;position:relative;width:100%}::ng-deep .ct-minor-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:83.3333333333%}::ng-deep .ct-minor-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-third{display:block;position:relative;width:100%}::ng-deep .ct-major-third:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:80%}::ng-deep .ct-major-third:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-third>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fourth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fourth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:75%}::ng-deep .ct-perfect-fourth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-perfect-fifth{display:block;position:relative;width:100%}::ng-deep .ct-perfect-fifth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:66.6666666667%}::ng-deep .ct-perfect-fifth:after{content:\"\";display:table;clear:both}::ng-deep .ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-sixth{display:block;position:relative;width:100%}::ng-deep .ct-minor-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:62.5%}::ng-deep .ct-minor-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-golden-section{display:block;position:relative;width:100%}::ng-deep .ct-golden-section:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:61.804697157%}::ng-deep .ct-golden-section:after{content:\"\";display:table;clear:both}::ng-deep .ct-golden-section>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-sixth{display:block;position:relative;width:100%}::ng-deep .ct-major-sixth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:60%}::ng-deep .ct-major-sixth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-minor-seventh{display:block;position:relative;width:100%}::ng-deep .ct-minor-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:56.25%}::ng-deep .ct-minor-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-seventh{display:block;position:relative;width:100%}::ng-deep .ct-major-seventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:53.3333333333%}::ng-deep .ct-major-seventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-octave{display:block;position:relative;width:100%}::ng-deep .ct-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:50%}::ng-deep .ct-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-tenth{display:block;position:relative;width:100%}::ng-deep .ct-major-tenth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:40%}::ng-deep .ct-major-tenth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-eleventh{display:block;position:relative;width:100%}::ng-deep .ct-major-eleventh:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:37.5%}::ng-deep .ct-major-eleventh:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-major-twelfth{display:block;position:relative;width:100%}::ng-deep .ct-major-twelfth:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:33.3333333333%}::ng-deep .ct-major-twelfth:after{content:\"\";display:table;clear:both}::ng-deep .ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-double-octave{display:block;position:relative;width:100%}::ng-deep .ct-double-octave:before{display:block;float:left;content:\"\";width:0;height:0;padding-bottom:25%}::ng-deep .ct-double-octave:after{content:\"\";display:table;clear:both}::ng-deep .ct-double-octave>svg{display:block;position:absolute;top:0;left:0}::ng-deep .ct-series-a .ct-slice-pie,::ng-deep .ct-series-a .ct-area{fill:url(#gradient)}::ng-deep .ct-point{opacity:0;transition:opacity .1s}::ng-deep .chartist-tooltip{position:absolute;border-radius:var(--border-radius);border:1px solid var(--color-weight-100);padding:4px;opacity:0;transition:opacity .1s,top .1s,left .1s;font-size:12px;background:var(--color-component-bg-100);box-shadow:0 2px 4px #0000000d;text-align:center}::ng-deep .chartist-tooltip.tooltip-show{opacity:.9}::ng-deep .ct-tooltip-hover{opacity:1}::ng-deep .tooltip-date{color:var(--color-text-200)}::ng-deep .tooltip-value{color:var(--color-primary-600);font-size:14px;text-align:center}:host{display:block;padding-bottom:28px}#chart{position:relative}\n"] }]
         }], propDecorators: { entries: [{
                 type: Input
+            }], options: [{
+                type: Input
             }], chartDivRef: [{
                 type: ViewChild,
                 args: ['chartDiv', { static: true }]
@@ -19126,6 +19227,7 @@ const IMPORTS = [
     TranslateModule,
     OverlayModule,
     DragDropModule,
+    A11yModule,
 ];
 const DECLARATIONS = [
     ActionBarComponent,
@@ -19442,7 +19544,8 @@ class SharedModule {
             NgxPaginationModule,
             TranslateModule,
             OverlayModule,
-            DragDropModule], exports: [ClarityModule,
+            DragDropModule,
+            A11yModule], exports: [ClarityModule,
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -19451,7 +19554,8 @@ class SharedModule {
             NgxPaginationModule,
             TranslateModule,
             OverlayModule,
-            DragDropModule, ActionBarComponent,
+            DragDropModule,
+            A11yModule, ActionBarComponent,
             ActionBarLeftComponent,
             ActionBarRightComponent,
             AssetPreviewComponent,
@@ -19617,7 +19721,8 @@ class SharedModule {
             NgxPaginationModule,
             TranslateModule,
             OverlayModule,
-            DragDropModule] }); }
+            DragDropModule,
+            A11yModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -19934,7 +20039,7 @@ class TypedBaseDetailComponent extends BaseDetailComponent {
  * @docsCategory list-detail-views
  */
 function detailComponentWithResolver(config) {
-    const resolveFn = (route, state) => {
+    const resolveFn = route => {
         const router = inject(Router);
         const dataService = inject(DataService);
         const id = route.paramMap.get('id');
@@ -19948,7 +20053,7 @@ function detailComponentWithResolver(config) {
         }
         else {
             const result$ = dataService
-                .query(config.query, { id })
+                .query(config.query, { id, ...(config.variables ?? {}) })
                 .refetchOnChannelChange()
                 .stream$.pipe(takeUntil(navigateAway$), shareReplay(1));
             const entity$ = result$.pipe(map(result => result[config.entityKey]));
@@ -20264,7 +20369,7 @@ class DataTableFilterCollection {
     connectToRoute(route) {
         this.valueChanges.subscribe(value => {
             this.router.navigate(['./'], {
-                queryParams: { [this.#filtersQueryParamName]: this.serialize() },
+                queryParams: { [this.#filtersQueryParamName]: this.serialize(), page: 1 },
                 relativeTo: route,
                 queryParamsHandling: 'merge',
             });
@@ -20554,7 +20659,7 @@ class BaseListComponent {
      * Accepts a list of Observables which will trigger a refresh of the list when any of them emit.
      */
     refreshListOnChanges(...streams) {
-        const searchTerm$ = this.searchTermControl.valueChanges.pipe(filter(value => value !== null && (2 < value.length || value.length === 0)), debounceTime(250));
+        const searchTerm$ = this.searchTermControl.valueChanges.pipe(filter(value => value !== null && (2 < value.length || value.length === 0)), debounceTime(250), tap(() => this.setPageNumber(1)));
         merge(searchTerm$, ...streams)
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => this.refresh$.next(undefined));
@@ -21021,7 +21126,7 @@ function patchObject(obj, patch) {
 }
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.1';
+const ADMIN_UI_VERSION = '2.0.3';
 /**
  * @description
@@ -21374,5 +21479,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, 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, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_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_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, 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, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, 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_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_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, LocalizedTextComponent, LogOutDocument, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, MetricInterval, MetricType, ModalDialogComponent, ModalService, ModifyOrderDocument, MoveCollectionDocument, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderAddressFragmentDoc, OrderDataService, OrderDetailFragmentDoc, OrderDetailQueryDocument, OrderFragmentDoc, OrderLineFragmentDoc, OrderStateLabelComponent, OrderType, OverlayHostComponent, OverlayHostService, PAYMENT_FRAGMENT, PAYMENT_METHOD_FRAGMENT, PAYMENT_WITH_REFUNDS_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_FOR_LIST_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PageBlockComponent, PageBodyComponent, PageComponent, PageDetailLayoutComponent, PageDetailSidebarComponent, PageEntityInfoComponent, PageHeaderComponent, PageHeaderDescriptionComponent, PageHeaderTabsComponent, PageService, PageTitleComponent, PaginationControlsComponent, PasswordFormInputComponent, PaymentFragmentDoc, PaymentMethodFragmentDoc, PaymentMethodListItemFragmentDoc, PaymentWithRefundsFragmentDoc, PercentageSuffixInputComponent, Permission, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, 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, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, 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, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, 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_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
+export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, 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, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_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_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, 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, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PRODUCT_VARIANTS, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductVariantsDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, 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_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_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, LocalizedTextComponent, LogOutDocument, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, MetricInterval, MetricType, ModalDialogComponent, ModalService, ModifyOrderDocument, MoveCollectionDocument, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderAddressFragmentDoc, OrderDataService, OrderDetailFragmentDoc, OrderDetailQueryDocument, OrderFragmentDoc, OrderLineFragmentDoc, OrderStateLabelComponent, OrderType, OverlayHostComponent, OverlayHostService, PAYMENT_FRAGMENT, PAYMENT_METHOD_FRAGMENT, PAYMENT_WITH_REFUNDS_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_FOR_LIST_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PageBlockComponent, PageBodyComponent, PageComponent, PageDetailLayoutComponent, PageDetailSidebarComponent, PageEntityInfoComponent, PageHeaderComponent, PageHeaderDescriptionComponent, PageHeaderTabsComponent, PageService, PageTitleComponent, PaginationControlsComponent, PasswordFormInputComponent, PaymentFragmentDoc, PaymentMethodFragmentDoc, PaymentMethodListItemFragmentDoc, PaymentWithRefundsFragmentDoc, PercentageSuffixInputComponent, Permission, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, 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, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, 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, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, 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_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map